两个实用的调试技巧

2019/04/10 10:10
阅读数 19

逆向找脚本

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

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

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

<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: 在移除当前节点的时候触发

'偷'资源

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

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

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

这里我们是'被反'者。

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

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

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

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

这段代码有两个坏处:

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

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

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

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

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

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

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

参考链接

developers

原文出处:https://www.cnblogs.com/xiaoyuxy/p/12449389.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部