37

两个实用的调试技巧

 5 years ago
source link: http://www.cnblogs.com/xiaoyuxy/p/12449389.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

逆向找脚本

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

num6JvY.png!web

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

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

RBjAfqY.png!web

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

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

ZZr6RbE.png!web

'偷'资源

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

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

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

这里我们是'被反'者。

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

ZzuUZbz.gif

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

7JzuAjv.png!web

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

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

这段代码有两个坏处：

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

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

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

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

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

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

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

yaiyIru.jpg!web

参考链接

developers


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK