精华内容
下载资源
问答
  • 文章更新了新内容,更加深入分析了一波 ...选择它的原因,一是功能真的十分强大,第二个就是新特性支持的比较快(尤其是Google Chrome Canary 版,拥有新版 Chrome 的最新功能,这是专为开发者早期用户设计的版...

    文章更新了新内容,更加深入分析了一波

    作为前端开发来说,js调试是一项必备的技能。无论是要查找bug,还是想了解别人代码的逻辑,js调试都是一种可以帮助你节省时间的方法。

    这是我平时使用的chrome的调试界面。选择它的原因,一是功能真的十分强大,第二个就是新特性支持的比较快(尤其是Google Chrome Canary 版,拥有新版 Chrome 的最新功能,这是专为开发者和早期用户设计的版本,有时可能会造成浏览器彻底当机,下载直通车,你可以去这里看看它的功能和特性)

    这篇文章的目的不是分享 像格式代码,设置断点,查看调用栈,查看变量等一系列调试工具功能的使用,这种网上已经有很多好的文章了,本文主要分析工作中遇到的循环debugger问题,如下图:

    有时候我们在扒别人网站的时候,为了了解代码的功能,我们可以通过JavaScript调试工具设置断点,阻止代码执行。进而分析断点的执行环境,对象,变量等一系列有用的信息,完成代码逻辑的解读。

    在JavaScript中,我们可以直接使用debugger指令,将代码断在指定位置,举个?

    console.log('you can see me')
    debugger
    console.log('can you see me?')
    复制代码

    结果其实比较明显,你可以看到第一行的输出,但是运行到第二行时,代码被断住,只有你手动继续执行才能看到第三行的输出。就是这个原理很多商业产品代码中会定义一个无线循环的debugger指令,它的目的是

    • 不停地打断你,浪费时间
    • 不断的产生不可回收的对象,占据你的内存,造成内存泄漏,没过多久浏览器就会卡顿,甚至可以跑满你的cpu,调试你是不用想了,能关掉页面就已经不错了

    在这里给大家举一个简单易懂的?

    setTimeout(function(){
    	while (true) {
    		debugger
    	}
    },100)
    复制代码

    像这种情况我们怎么应对那? google一圈之后发现普遍的解决方案是:

    Deactivate breakpoint,那它能解决问题吗?

    看下图就知道了。由于忽略了所有断点,连你自己设置的都不放过(你的断点没有意义了),会继续去执行debugger,创建对象,你的cpu会被跑满,我在实践中发现这种发式不靠谱。抬走,下一个!

    还有一招就是:禁止断点 具体操作见下图

    我们就可以忽略它,可以继续打其他的断点,还是有效果的。但是这种方式其实是有弊端的,比如创建其他执行环境等,就没办法解决问题了,上一张这种恶心情况的图。

    像这样的我能利用上面的方式能解决吗? 能,要不也没有这篇文章了,哈哈 但是一定要耐心 好 我们会到正题,具体怎么解决那? 看调用栈,如图

    我们可以看到这段代码是在player.js中的0x51c762调用的,那我们需要看player.js中的0x51c762到底干了什么?好,沿着这个思路我们看一看_0x51c7626和调用它的地方

    这代码看着让人崩溃,这是写的什么东西啊!别急,分析一波,之所以能够循环debugger肯定和这个setInterval相关,这个定时器中调用了_0x51c7626函数,说明debugger跟0x51c7626函数有关,那么把他们干掉试一下。具体方法是copy一份player.js,注释掉如下代码

    _0x51c762();
    setInterval(function() {
        _0x51c762()
    }, 0xfa0);
    复制代码

    用charles(我用的是这个,你可以用别的抓包工具)重定向到你做了修改的js文件

    然后再进行调试的时候是不是发现这种创建新执行环境的循环debugger没有了。啊 哈哈哈。其实每个网站做的方式可能不同,但是套路是不变的。 上面只是提到一个单纯使用dubugger指令的反调试方法,其实还有很多其他的方式,比如时间差异的方式

    var timelimit = 50;
    var open = false;
    var starttime = new Date();
    debugger;
    if (new Date() - starttime > timelimit) {
        open = true;
       	//此处执行你的反调试逻辑,比如删除操作
        open = false;
    }
    复制代码

    像这种我们怎么去解决它? 其实很简单,我们可以断点,调大timelimit(比如timelimit = 1000000),轻松绕过。实际中可能还有其他判断条件,我们只要断点一次将它置成false,保证它不会进入debugger的条件语句就好了 希望能对大家有帮助

    未经本人允许,不得转载,文章有疏漏浅薄之处,请各位大神斧正

    展开全文
  • 我们来看一下下面一段简单代码的输出: var obj = {a:{b:2}}; console.log("before:",obj); var obj2 = obj; // 断点1 obj2.a.b = 0; console.log("...当我们在断点1处打上断点后...

    我们来看一下下面一段简单代码的输出:

    var obj = {a:{b:2}};
    console.log("before:",obj);
    var obj2 = obj; // 断点1
    obj2.a.b = 0;
    console.log("after:",obj);

    当我们不打断点的时候,输出结果为:

    before:{a:{b:0}}
    after:{a:{b:0}}

    当我们在断点1处打上断点后,当到达断点后,我们可以看到,控制台输出结果:

    before:{a:{b:2}}

    猜测这可能是console.log做的一个优化,因为整段代码执行完后,obj的值是改变了的,而为什么obj值会改变,这就需要弄清楚js中的基本类型和引用类型的区别。

    js中的基本类型和引用类型:

    基本类型:Number, Boolean, String, undefined, null
    引用类型:Object, Function
    基本类型的数据是存放在栈内存中的,引用类型的数据是存放在堆内存中的。
    因此,基本类型的复制就是在栈内存中开辟出一个新的存储区域用来存储新的变量,两个值之间不会互相影响。
    而引用类型的定义其实就是在栈内容中存储了一个指针,这个指针指向堆内存中改对象的存储地址,将引用类型复制给另一个变量时,实际是将该引用类型的指针给了变量,两个变量指向了同一个指针,因此这两个变量之间是相互影响的。

    展开全文
  • vscode断点调试js代码的设置

    千次阅读 2020-04-20 14:22:50
    vscode也可以直接调试js代码,...但通常我们需要同时调试HTML和js,此时我们使用chorme调试html,其自带的调试js,方法如下: VSCode 上装插件:Debugger for Chrome 修改launch.json { // Use IntelliSense t...

    vscode可以运行多种代码,需要安装插件code runner,然后点击右上角三角运行即可:
    在这里插入图片描述
    vscode也可以直接调试js代码,如下:
    在这里插入图片描述
    但通常我们需要同时调试HTML和js,此时我们使用chorme调试html,其自带的调试js,方法如下:

    1. VSCode 上装插件:Debugger for Chrome
    2. 修改launch.json
    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        
        "version": "0.2.0",
        "configurations": [{
                "name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开
                "type": "chrome",
                "request": "launch",
                "url": "${file}",
                "sourceMaps": true,
                "webRoot": "${workspaceRoot}"
            },
            {
                "name": "nodeLauch", //单独调试js,即可以直接运行js
                "type": "node",
                "request": "launch",
                "program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件
                "stopOnEntry": false,
                "args": [],
                "cwd": "${workspaceRoot}",
                "runtimeExecutable": null,
                "runtimeArgs": [
                    "--nolazy"
                ],
                "env": {
                    "NODE_ENV": "development"
                },
                "console": "internalConsole",
                "preLaunchTask": "",
                "sourceMaps": false,
                "outDir": null
            }
        ]
    }
    

    然后选择不同的调试方式进行调试:
    在这里插入图片描述

    展开全文
  • 使用VSCode 断点调试 js项目,html页面

    千次阅读 2018-11-07 18:29:01
    1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码; 二、工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件:Debugger for Chrome 如图 三、配置文件更改 1.用VSCode装载项目...

    一、效果目的
    1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码;

    二、工具准备
    1.VSCode 软件
    2.一个js项目
    3.VSCode 上装一个插件:Debugger for Chrome
    如图
    这里写图片描述

    三、配置文件更改
    1.用VSCode装载项目
    这里写图片描述

    2.然后按F5,出现这个框
    这里写图片描述
    选择 Chrome

    3.然后出现个配置的提示,和打开了launch.json这个文件
    这里写图片描述
    在 这个文件里添加一段配置信息

    ,
            {
                "name": "使用本机 Chrome 调试",
                "type": "chrome",
                "request": "launch",
                 "file": "${workspaceRoot}/index.html",
            //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
                "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
                "sourceMaps": true,
                "webRoot": "${workspaceRoot}",
            //  "preLaunchTask":"build",
                "userDataDir":"${tmpdir}",
                "port":5433
            }

    结果如图
    这里写图片描述

    4.然后,更改调试方式
    这里写图片描述
    如图,选择左边的圆形按钮,然后出来这个调试配置管理界面,选择“使用本机 Chrome 调试”。

    5.然后在项目的 js 处设置好断点,按 F5,就可以进行断点调试了。
    这里写图片描述

    6.接着就 Enjoy!

    PS:这种方法只适合普通页面,要是你的js项目里,包含json等游览器不支持本地游览的资源,那么就需要开启服务器,配合这个插件,才能进行断点调试。

    展开全文
  • 代码写完会运行一下看下效果,开发的时候我们更多都是通过 dubugger 来单步或断点运行。我们整天在用 debugger,可是你有想过它的实现原理么。 本文会解答以下问题: 代码运行的底层原理是什么 为什么需要 ...
  • 一般大家调试都是在浏览器端调试js的,不过有些时候也想后台一样在代码工具里面调试js或者node.js,下面介绍下怎样在vscode里面走断点。 1,用来调试js 一:在左侧扩展中搜索Debugger for Chrome并点击安装:  ...
  • js调试

    2017-08-24 22:49:00
    在要调试的js前加一句js命令debugger DOM断点: 或是在页面上Elements---Break on----attribute modifitions,在进入Sources,在js上打断点,进行调试 压缩的代码格式化,便于阅读调试 转载于:https...
  • webpack断点调试

    2020-11-12 10:33:17
    在自己编写webpack的loaderplugin的时候,我们难免需要进行调试我们的编写的loaderplugin,这时候我们就可以使用webpack的断点调试了。 1.在package.json中添加调试指令 "debug": "node --inspect --inspect-brk...
  • Fiddler Web Debugger.zip

    2019-11-24 23:25:43
    Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js,css等文件)。 Fiddler 要比其他的网络调试器要更加简单...
  • 使用VSCode 断点调试

    万次阅读 2019-06-13 14:31:50
    1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码; 二、工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件:Debugger for Chrome 如图 三、配置文件更改 1.用VSCode装载...
  • 关于调试javascript的代码方式debugger

    千次阅读 2018-01-23 14:37:11
    在项目中遇到了这样一种情况,就是在有两个页面的url地址后面这两个页面的js文件名后面增加了随机数,而且这两个页面也不缓存,所以就导致这两个页面没法在浏览器上进行调试了,因为打过断点之后,在刷新页面的...
  •  除了一般使用debugger和设置断点外,还可以使用一些浏览器工具进行辅助调试。比如,在你页面上有一个地图对象,假设为maplet,现在你想测试一下它的setCenter函数的运行效果,甚至在不正常参数下的运...
  • 比如document.body.clientWidth,window.screen.width,document.body.scrollWidth等方法之后,发现都不是我想要的结果,后来发现了一个高效的方法,立刻大家分享之: 在需要取高度宽度的地方加断点调试【debugger】...
  • 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debugger,然后在浏览器中打开检查进行断点调试。 但是如果在vue界面的话则没法逐步查看变量的值。 比如: 在Vue页面中,点击搜索按钮时 ...
  • 首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外,Firefox还...
  • [JS]调试

    2020-11-16 18:30:20
    在浏览器按F12打开调试工具,这里可以切换控制台调试窗口。 console.log() 方法 如果浏览器支持调试,可以使用 console.log() 方法在调试窗口控制台上打印 JavaScript 值...JS代码中使用debugger关键字设置断点 ...
  • 今天继续大家研究JS逆向,不少小伙伴在JS逆向的时候遇到过无限debugger的反爬,今天就拿一个网站练练手感受下无限debugger。 先打开这次的目标网站--淘大象(taodaxiang.com/credit2) 打开「开发者工具」就自动...
  • 在写其他 js 代码时会经常用到 debugger 的东西,能够让当前运行的函数暂停住。生成器函数里的 yield 关键词也能使得函数暂停运行,同时还能用来做数据的输入输出(如果是 debugger,只能手动去逐个 inspect 变量)...
  • 调试器报告 debugger-report是一个Node.js程序包,... 打开test/spec/index.js并设置断点和第15行。 按F5 ,等待调试器启动。 它将在第15行的src/index.js文件中暂停,而不是在test/spec/index.js暂停。 (c)2018
  • 使用VSCode 断点调试 html 页面

    千次阅读 2019-01-17 10:55:51
    1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码; 二、工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件:Debugger for Chrome 如图 三、配置文件更改 1.用VSCode...
  • js获得页面的高度宽度

    千次阅读 2014-01-15 14:23:24
    今天在做一个弹出dialog时,遇用到了取父页面的宽度高度的方法。  尝试了几种方式,比如document.body.clientWidth,window.screen.width,document.body.... 在需要取高度宽度的地方加断点调试【debugger
  • 首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外,Firefox还...
  • 想对网站进行爬虫操作或分析算法时,打开F12往常不同的是,浏览器自动断点,导致无法正常分析js,如图可知,浏览debugger处于暂停状态,这是前端浏对非授权调试者在debug时造成干扰,在一定程度上保护前端代码这种...
  • 首先,在各个 浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如 JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外,Firefox还...
  • 首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外,Firefox还...
  • js笔记11.17

    2016-11-17 16:18:03
    这个关键字与在调试工具中设置断点的效果是一样的。 如果没有调试可用,debugger 语句将无法工作。 开启 debugger ,代码在第三行前停止执行。 2.变量提升:函数声明变量声明总是会被解释器悄悄地被"提升"到...

空空如也

空空如也

1 2 3 4
收藏数 62
精华内容 24
关键字:

debugger和断点js