有时候我们在爬取

某个用 js 渲染的网站

需要去分析一下

别人网站的数据展示规则

这个时候就不得不用 Chrome 的 DevTools 进行分析了

对于一般的网站
我们在具体的位置打个断点就可以进行调试了



不过有一些网站
当你打开 DevTools 的时候你都还没打断点他妈的直接就这样了






一直 debug
只要一按 F2 就一直 debug
就算你运行过去
还是一直 debug一直调用卡死你卡死你卡死你

就是不让你进行调试
你奈我何




哇靠啊
怎么解决呢

接下来就是学习反反 debug 的正确姿势

来来来
莫慌

小帅b先跟你说说
在 Chrome 的开发者工具中怎么样在代码里面打断点


我们最常用的操作就是在想要打断点的代码行左侧用鼠标轻轻点一下
就可以生成一个图标

然后就可以对这行代码开始进行调试了




这样的操作也可以直接在代码中操作使用 debugger 这个关键字就可以了

比如这样的 js

console.log('a');

console.log('b');

debugger;

console.log('c');

当 Chrome 在运行的时候发现了 debugger
就会停下来
进入调试模式

其实在代码中声明 debugger 
就和我们点击代码行左侧进行调试是一样的
也正是因为这个关键字
所以就可以从它入手
只要在首页的 js 中
写一个方法不断的循环执行 debugger
比如

while true{    debugger;}

那么当我们打开这个网页的调试面板的时候
就会不停的处于 debug 模式
即使你疯狂的点击运行按钮

也无济于事




其实 Chrome 有一个忽略断点的功能
只要在代码行左侧
点击右键选择 Never pause here  即可然后就会有个黄色的标识



当下次运行到这里的时候就会忽略这个断点

这对于一些简单的很有效


但是有些比较变态的就没那么容易了


比如这个




就算我忽略了它还是会疯狂进入 debug 模式
看看右边的 Call stack
一直疯狂的调用 _0xa3e3cc吃你的内存

把你搞的不要不要的
那怎么办好呢？
只能看看它的源码了



可以看到
2949 行
一直在递归调用_0xa3e3cc 函数
所以我们才会一直处于 debug 模式

既然已经问题出现在哪里了
那就想办法把这个给搞掉




还记不记得我们之前说的 mitmproxy
没错
这次走它的代理然后拦截这个网页把 js 中的 debugger 代码去掉
然后我们不用受这个罪了呀
快点开启我们的 mitmweb

设置地址拦截


浏览器设置好代理


打开代理之后访问一波

这时候被我们拦截下来了

请求我们直接让它过去



因为我们只要拦截返回的数据
然后对它进行修改
ok现在我们就拦截到返回的数据了



修改一下代码
点击这支笔



可以看到现在的代码难看


复制出来用编辑器打开吧

把调用递归的代码去掉



把 debugger 关键字换成 return


复制到 mitmweb 替换



右上角的勾给打上然后运行


此时此刻浏览器得到的就是修改过的文件



打开 F12



可以看到
不会在一直 debug 恶心我们了

可能不同的网站
反 debug 的实现不同
思路就是这么个思路

以不变应万变
下回见了哦peace