浏览器开发者工具使用技巧一览

,浏览器开发者工具在爬虫中常用来进行简单的抓包分析、JS逆向调试，打开方式：,点击可以模拟各种终端设备，适合查看手机页面的数据，点击【More tools】—> 【Sensors】可以模拟终端的地理位置、终端朝向等；工具栏可以选择要模拟的终端型号，其中 Responsive 是自适应。,,,Preserve log：是否在页面重加载后，清除请求列表。,Disable cache：是否启用缓存。,,是否开启抓包。,,清除请求。,,是否隐藏 Filter（过滤器）窗格。,,搜索。,,Network conditions，网络条件，允许在各种网络环境中测试网站，包括 3G，离线等，还可以自定义限制最大下载和上传流量。,,Import/Export HAR file，导入导出抓包数据。,适用于分析关键函数代码逻辑,,各个选项功能：,,执行到下一个断点。,,执行下一步，不会进入所调用的函数内部。,,进入所调用的函数内部。,,跳出函数内部。,,一步步执行代码，遇到有函数调用，则进入函数。,,停用断点。,,不要在出现异常时暂停。,Breakpoints：可以看到已经埋下的断点。,Scope：可以看到当前局部或者全局变量的值，可对值进行修改。,Call Stack：可以看到当前代码调用的堆栈信息，代码执行顺序为由下至上。,匹配 url 中关键词，匹配到则跳转到参数生成处，适用 于url 中的加密参数全局搜索搜不到，可采用这种方式拦截。,,Event Listener Breakpoints，事件侦听器断点，当鼠标点击、移动、键盘按键等行为或者其他事件发生时可以触发断点，比如 Mouse —> click，可快速定位点击按钮后，所执行的 JS。,,在 sources —> snippets 下可以新建 JS 脚本。,,在 console 中输入如下代码，如只打印 _$ 开头的变量值：,某些页面打开调试工具会出现无限 debugger 的现象：,,查看调用栈，点击第二行跳转到原函数：,,可以看到 _0x2ba9bc[_0x20b2('0x79')] 和 _0x2ba9bc[_0x20b2('0x7a')] 分别对应 debu 和 gger，连起来就是 debugger，在本地重写这个 JS，直接将这两个值置空：,,使用插件 ReRes，编写规则，遇到此 JS，就替换成我们本地经过修改过的 JS，替换后无限 debugger 就不存在了：,,直接在 Console 中将无限 debugger 的函数重写置空也可以破解无限 debugger，缺点是刷新后失效。,适用于定时器类触发的 debug：,钩子英文 Hook，在 windows 系统中，所有的都是消息，按了一下键盘，就是一个消息，Hook 的意思就是勾住，在消息过去之前先把消息勾住，不让其执行，然后自己优先处理。也就是这个技术提供了一个入口，能够针对不同的消息或者 api 在执行前，先执行我的操作。,“我的操作”就是钩子函数。在开发者工具中以 chrome 插件的方式，在匹配到关键词处插入断点。,创建一个文件夹，文件夹中创建一个钩子函数文件 inject.js 以及插件的配置文件 manifest.json ：,,打开 chrome 的扩展程序, 打开开发者模式，加载已解压的扩展程序，选择创建的文件夹即可：,,以一个 header 钩子为例，其配置文件如下：,header 钩子用于定位 header 中关键参数生成位置，以下代码演示了当 header 中包含 Authorization 时，则插入断点,cookie 钩子用于定位 cookie 中关键参数生成位置，以下代码演示了当 cookie 中匹配到了 abcdefghijk， 则插入断点：,请求钩子用于定位请求中关键参数生成位置，以下代码演示了当请求的 url 里包含 AbCdE 时，则插入断点：,看到这里，给个在看不过分吧