028-86922220

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

总览

浏览器开发者工具在爬虫中常用来进行简单的抓包分析、JS逆向调试，打开方式：

龙海ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

终端模拟

点击可以模拟各种终端设备，适合查看手机页面的数据，点击【More tools】—> 【Sensors】可以模拟终端的地理位置、终端朝向等；工具栏可以选择要模拟的终端型号，其中 Responsive 是自适应。

Network 面板

Controls 控制器

Preserve log：是否在页面重加载后，清除请求列表。

Disable cache：是否启用缓存。

是否开启抓包。

清除请求。

是否隐藏 Filter（过滤器）窗格。

搜索。

Network conditions，网络条件，允许在各种网络环境中测试网站，包括 3G，离线等，还可以自定义限制最大下载和上传流量。

Import/Export HAR file，导入导出抓包数据。

Filter 过滤器

断点调试

常规断点调试

适用于分析关键函数代码逻辑

各个选项功能：

执行到下一个断点。

执行下一步，不会进入所调用的函数内部。

进入所调用的函数内部。

跳出函数内部。

一步步执行代码，遇到有函数调用，则进入函数。

停用断点。

不要在出现异常时暂停。

Breakpoints：可以看到已经埋下的断点。

Scope：可以看到当前局部或者全局变量的值，可对值进行修改。

Call Stack：可以看到当前代码调用的堆栈信息，代码执行顺序为由下至上。

XHR 断点

匹配 url 中关键词，匹配到则跳转到参数生成处，适用 于url 中的加密参数全局搜索搜不到，可采用这种方式拦截。

行为断点

Event Listener Breakpoints，事件侦听器断点，当鼠标点击、移动、键盘按键等行为或者其他事件发生时可以触发断点，比如 Mouse —> click，可快速定位点击按钮后，所执行的 JS。

插入 JS

在 sources —> snippets 下可以新建 JS 脚本。

打印 windows 对象的值

在 console 中输入如下代码，如只打印 _$ 开头的变量值：

for (var p in window) {
    if (p.substr(0, 2) !== "_$")  
       continue;
   console.log(p + " >>> " + eval(p))
}

无限 debugger 防调试

某些页面打开调试工具会出现无限 debugger 的现象：

中间人拦截替换无限 debug 函数

查看调用栈，点击第二行跳转到原函数：

可以看到 _0x2ba9bc[_0x20b2('0x79')] 和 _0x2ba9bc[_0x20b2('0x7a')] 分别对应 debu 和 gger，连起来就是 debugger，在本地重写这个 JS，直接将这两个值置空：

使用插件 ReRes，编写规则，遇到此 JS，就替换成我们本地经过修改过的 JS，替换后无限 debugger 就不存在了：

方法置空

直接在 Console 中将无限 debugger 的函数重写置空也可以破解无限 debugger，缺点是刷新后失效。

解除定时器

适用于定时器类触发的 debug：

for (var i = 1; i < 99999; i++)window.clearInterval(i);

Hook 钩子

钩子英文 Hook，在 windows 系统中，所有的都是消息，按了一下键盘，就是一个消息，Hook 的意思就是勾住，在消息过去之前先把消息勾住，不让其执行，然后自己优先处理。也就是这个技术提供了一个入口，能够针对不同的消息或者 api 在执行前，先执行我的操作。

“我的操作”就是钩子函数。在开发者工具中以 chrome 插件的方式，在匹配到关键词处插入断点。

创建一个文件夹，文件夹中创建一个钩子函数文件 inject.js 以及插件的配置文件 manifest.json ：

打开 chrome 的扩展程序, 打开开发者模式，加载已解压的扩展程序，选择创建的文件夹即可：

配置文件 manifest.json

以一个 header 钩子为例，其配置文件如下：

{
  "name": "Injection",
   "version": "1.0",
   "description": "RequestHeader钩子",
   "manifest_version": 1,
   "content_scripts": [
       {
           "matches": [
               ""
           ],
           "js": [
               "inject.js"
           ],
           "all_frames": true,
           "permissions": [
               "tabs"
           ],
           "run_at": "document_start"
       }
   ]
}

header 钩子

header 钩子用于定位 header 中关键参数生成位置，以下代码演示了当 header 中包含 Authorization 时，则插入断点

var code = function(){
var org = window.XMLHttpRequest.prototype.setRequestHeader;
window.XMLHttpRequest.prototype.setRequestHeader = function(key,value){
   if(key=='Authorization'){
       debugger;
   }
   return org.apply(this,arguments);
}
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

cookie 钩子

cookie 钩子用于定位 cookie 中关键参数生成位置，以下代码演示了当 cookie 中匹配到了 abcdefghijk， 则插入断点：

var code = function(){
   var org = document.cookie.__lookupSetter__('cookie');
   document.__defineSetter__("cookie",function(cookie){
       if(cookie.indexOf('abcdefghijk')>-1){
           debugger;
       }
       org = cookie;
   });
   document.__defineGetter__("cookie",function(){return org;});
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

请求钩子

请求钩子用于定位请求中关键参数生成位置，以下代码演示了当请求的 url 里包含 AbCdE 时，则插入断点：

var code = function(){
var open = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, url, async){
   if (url.indexOf("AbCdE")>-1){
       debugger;
   }
   return open.apply(this, arguments);
};
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

看到这里，给个在看不过分吧


分享名称：浏览器开发者工具使用技巧一览
本文链接：http://www.turtgq.com/article/dhseipi.html

其他资讯