如何调试做了防止调试的前端页面代码 转载

转载公众号：web前端智汇堂

作者：Aplee

https://juejin.cn/post/7369505226921738278

在 JavaScript 中，使用 debugger 关键字可以在代码执行到该位置时触发断点调试。这可以帮助开发人员进行代码调试和排错。然而，有些网站开发者可能会故意使用 debugger 关键字来阻止调试，从而增加代码的安全性。但仍然有一些方法可以绕过这种防护措施，进行调试和排错。

禁用浏览器debugger

因为 debugger 其实就是对应的一个断点，它相当于用代码显示地声明了一个断点，要解除它，我们只需要禁用这个断点就好了。

禁用全局断点

全局禁用开关位于 Sources 面板的右上角，如下图所示：

点击它，该按钮会被激活，变成蓝色。

这个时候我们再重新点击一下 Resume script execution(恢复脚本执行)按钮，跳过当前断点，页面就不会再进入到无限 debugger 的状态了。

请注意，禁用所有断点可能会导致你错过一些潜在的问题或错误，因为代码将会连续执行而不会在可能的问题点停止。因此，在禁用所有断点之前，请确保你已经理解了代码的行为，并且明白在出现问题时该如何调试。

禁用局部断点

尝试使用另一种方法来跳过这个无限 debugger。在 debugger 语句所在的行的行号上单击鼠标右键，此时会出现一个快捷菜单，操作下图所示：

添加条件断点

在JS代码 debugger 行数位置的最左侧点击右键，添加条件断点（满足条件才会进入断点），将条件设置为false，就是条件永远不成立，永远不会断下来。

添加条件断点还可以监视获取一些变量信息，还是挺好用的。

如果是简单的debugger断点，直接用上边的方式就可以，如果是通过定时器触发的debugger断点，就需要进行Hook处理了。

以上的方案执行完毕之后有时候会跳转空页面，这时候只需要在空页面上打开原先地址即可。

先打开控制台

有时候我们一打开网页，就直接进入空页面，控制台上的js和html文件也随之为空，这时候需要在空白页面，或者F12等键无法打开控制台等，这种可以先打开控制台，然后再在空白页面上打开网站即可。

可以在这个网站上试一下。

测试网站

https://www.meihuama.com/

替换文件

直接使用浏览器开发者工具替换修改js（Sources面板 --> Overrides），或者通过FD工具替换。

这种方式的核心思路，是替换 JS 文件中的 debugger 关键字，并保存为本地文件，在请求返回的时候、通过正则匹配等方式、拦截并替换返回的 JS 代码，以达到绕过 debugger 的目的。也可以直接删掉相关的debugger代码。

具体实现可参考：

2024最新版JavaScript逆向爬虫教程-------基础篇之无限debugger的原理与绕过

https://blog.csdn.net/xw1680/article/details/138547184

快捷方案-使用油猴等插件

使用这种方法，就不需要再打 script 断点。直接安装插件即可。

参考文献

2024最新版JavaScript逆向爬虫教程-------基础篇之无限debugger的原理与绕过

https://blog.csdn.net/xw1680/article/details/138547184

解决浏览器调试无限debugger

https://zhuanlan.zhihu.com/p/584684377