两个实用的调试技巧

逆向找脚本

平常我们开发的时候，想调试功能流程或者定位某个状态下的一些值的变化，我们可以使用debugger关键字，或者直接在浏览器控制台里打断点，像这样：

image

不过，如果我们遇到传说级别的，动则几万、几十万行的代码，并且分布非常混乱上面的方法或许不是很方便。

对于这类业务代码，其实更多是更新迭代小功能，那么有没有办法能够帮助我们快速定位到我们要想修改的地方呢？

<img width='150' src='https://user-gold-cdn.xitu.io/2020/3/9/170be63180f6c4de?w=281&h=479&f=png&s=83407' />

谷歌为我们提供了dom上的断点，可以检测三种情况:

• Subtree modifications: 在移除或添加当前所选节点的子级，或更改子级内容的时候触发该断点。
• Attributes modifications：在当前所选节点上添加或移除属性的时候会触发
• Node Removal： 在移除当前节点的时候触发

image

'偷'资源

这里说的'偷'是阅读别人的代码，下载一些图片、视频资源等操作，不用做商业用途自己用用还是没问题的。

这个会面对的问题学名叫做：前端反调试。

为什么会有这个东西呢？因为浏览器环境太不安全了，以至于我们的代码无时无刻都有可能被别人窃取、篡改，我们的辛辛苦苦创作的资源也很容易被别人利用，所以我们有代码混淆、压缩，反调试等等方法，来过滤部分人，反与被反的斗争持续至今。

这里我们是'被反'者。

有段时间很喜欢看热血动漫，但是资源或不好找或付费，很是烦恼，所以就去某网站去爬取资源并下载下来，但是当我打开控制台的时候，我发现我无法使用dom选择器选中dom，因为有个断点在不断地循环：

image

通过查看源代码，发现它是一段乱糟糟的代码：

image

虽然我们看到很多_xxxxx的代码，但是不难发现一个规律，这些是由下划线 加 16进制数字组成的js合法变量名，这就是第一步混淆、压缩(图片已解压)。然后我们还看到了几个明显的debugger，这就是阻止我选中dom的主要根源，一个死循环断点，我们可以换一个清晰地代码进行演示：

function loop() {
    setTimeout(function() {
        loop();
    }, 100);
    debugger;
}
loop();

这段代码有两个坏处：

1. 一个空的无任何作用的死循环断点。再打开控制台后会一直执行
2. 会产生无数个定时器计数器，并且没有被回收，会造成内存泄漏(内存泄漏详见 >>>)

第二点会很快造成你的浏览器卡顿，让你想操作都操作都操作不了。

对于这种比较常见的反调试我们有两种选择：

1. 可以直接禁止掉浏览器的断点功能
2. 用同样的函数名去覆盖他的反前端函数

当然方法不只这两种，如果你有更好的方法，欢迎下面评论。

这就是这次的全部内容了，最近会比较忙，所以更新内容不会很长，请谅解。

如果你能看到这里，不妨点个关注、评个论支持一下，大家的热情就是我的动力。

image

参考链接

developers