文章目录

  • debugger原理
  • 绕过方式
  • 禁用全局断点
  • 禁用局部断点
  • 条件断点
  • 替换文件

debugger原理

俗话说:“知己知彼,方能百战百胜”。js中通常用debugger关键字来实现无限循环。

debugger 语句用于停止执行 JavaScript(以下简称JS),并调用 (如果可用) 调试函数。
使用 debugger 语句类似于在代码中设置断点。

注意: 如果调试工具不可用,则调试语句将无法工作。
也就是说只有在打开调试工具的时候才会触发debugger语句

绕过方式

禁用全局断点

先来一个实例,网址是:https://antispider8.scrape.center/,打开网站进入开发者工具(此处我使用的是谷歌浏览器),发现其立即进入断点模式。

javascript debugger 插件快捷键_爬虫


不管我们怎样点击Resume script execution 都无法跳出断点模式,既然无法跳出它,那我们就把它禁用掉,在调试工具中可以选择Deactivate breakpoints禁用全局所有断点,然后再次点击Resume script execution 可以发现页面不会进入无限debugger模式中了。

javascript debugger 插件快捷键_ide_02


虽然,这样可以实现原有目的,但显然不是一个好的解决方案,因为这样会让我们也无法在其他的地方进行断点调试。

禁用局部断点

既然禁用全局断点不太好,那有没有一种方案是可以禁用局部断点的呢?答案肯定是有的。

有人可能会想着直接在breakpoints取消勾选相应的断点不就可以了么

javascript debugger 插件快捷键_Chrome_03


然而并没有达到理想状态。Breakpoints只适用于我们手动打的断点,对于debugger关键字没有什么效果的。正确的做法是我们在debugger关键字的行号上单击右键,出现下面的选项卡

javascript debugger 插件快捷键_Chrome_04


点击Never pause here选项意思不会在这里停留,这时候页面变成如下样子

javascript debugger 插件快捷键_python_05


这时候会发现在断点变成橙色并且在断点处出现一个?符号,这时再次点击Resume script execution会发现页面不在进入无限debugger模式了

条件断点

在上一个方法中,通过点击Never pause here来实现的,在选项卡还有一个Add conditional breakpoint选项,这个选项用来设置进入断点的条件。在本案例中可以直接填入false,效果与上述方法Never pause here一致。

javascript debugger 插件快捷键_爬虫_06

替换文件

既然是由debugger关键字引起的,那有什么方法可以把它删除掉吗?浏览器调试工具为我们提供了overrides这个功能可以实现我们的目的。

javascript debugger 插件快捷键_ide_07


点击加号会出现让我们选择文件夹,用于存储要替换的js文件,这里我选择是Chrome文件夹

javascript debugger 插件快捷键_python_08


选择后会出现这样一个提示,点击允许即可

javascript debugger 插件快捷键_python_09

找到debugger所在js文件,

javascript debugger 插件快捷键_ide_10


我们会发现代码不易可读,其实调试工具中为我们提供了格式化代码的功能,在其左下角中有一个{}便是格式化按钮。点击完后会在其旁边打开一个带有format文件名的文件,

javascript debugger 插件快捷键_python_11


复制这个文件的内容到文本编辑器中修改后,再次将修改后的内容复制到不带format的文件中去替换原有文件(带有format的文件是格式化的,不能被修改)并按Ctrl+S进行保存,会发现在Chrome文件夹下生文件

javascript debugger 插件快捷键_python_12


替换完成后再次刷新网页就变得正常了