乐趣区

关于python:爬虫技巧浏览器开发者工具使用技巧总结

jiezi

总览

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

  1. F12；
  2. 快捷键 Ctrl+Shift+I；
  3. 鼠标右键查看或者审查元素；
  4. 浏览器右上角 —> 更多工具 —> 开发者工具

常见禁用开发者工具伎俩：https://blog.csdn.net/cplvfx/…

官网文档：https://developer.chrome.com/…

  • Elements（元素面板）：应用“元素”面板能够通过自在操纵 DOM 和 CSS 来重您网站的布局和设计。
  • Console（控制台面板）：在开发期间，能够应用控制台面板记录诊断信息，或者应用它作为 shell，在页面上与 JavaScript 交互。
  • Sources（源代码面板）：在源代码面板中设置断点来调试 JavaScript，或者通过 Workspaces（工作区）连贯本地文件来应用开发者工具的实时编辑器。
  • Network（网络面板）：从发动网页页面申请 Request 后失去的各个申请资源信息（包含状态、资源类型、大小、所用工夫等），并能够依据这个进行网络性能优化。
  • Performance（性能面板）：应用时间轴面板，能够通过记录和查看网站生命周期内产生的各种事件来进步页面运行时的性能。
  • Memory（内存面板）：剖析 web 利用或者页面的执行工夫以及内存应用状况。
  • Application（利用面板）：记录网站加载的所有资源信息，包含存储数据（Local Storage、
    Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、款式
    表等。
  • Security（平安面板）：应用平安面板调试混合内容问题，证书问题等等。
  • Lighthouse（诊断面板）：对以后网页进行网络利用状况、网页性能方面的诊断，并给出一些优化
    倡议。
  • （元素抉择）：能够间接点击页面的元素，会主动跳转到对应的源代码。
  • （终端模仿）：模仿各种终端设备，反对自定义终端。
  • （设置）：开发者工具设置，包含一些外观、快捷置、终端设备、地理位置设置等。
  • （自定义）：自定义和管制开发者工具，包含调整工具的地位、全局搜寻、运行命令、其余工具等。

终端模仿

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

Network 面板

Controls 控制器

  • Preserve log：是否在页面重加载后，革除申请列表。
  • Disable cache：是否启用缓存。
  • ：是否开启抓包。
  • ：革除申请。
  • ：是否暗藏 Filter（过滤器）窗格。
  • ：搜寻。
  • ：Network conditions，网络条件，容许在各种网络环境中测试网站，包含 3G，离线等，还能够自定义限度最大下载和上传流量。
  • ：Import/Export HAR file，导入导出抓包数据。

Filter 过滤器

  • Hide data URLs：data URLs 指一些嵌入到文档中的小型文件，在申请表外面以 data: 结尾的文件就是，如较为常见的 svg 文件。勾选 Hide data URLs 复选框即可暗藏此类文件。
  • All：显示所有申请。
  • XHR：全称 XMLHttpRequest，是一种创立 AJAX 申请的 JavaScript API，通常抓取 Ajax 申请能够抉择 XHR。
  • WS：全称 WebSocket，是 HTML5 开始提供的一种在单个 TCP 连贯上进行全双工通信的协定。
  • Manifest 安卓开发文件名，属于 AndroidManifest.xml 文件，在简略的 Android 零碎的利用中提出了重要的信息码。
  • Has blocked cookies：仅显示具备阻止响应 cookie 的申请。
  • Blocked Requests：只显示被阻止的申请。

断点调试

惯例断点调试

实用于剖析要害函数代码逻辑

  1. Ctrl+Shift+F 或者右上角三个点关上全局搜寻，搜寻关键字。
  2. 定位到可疑代码，点击行号埋下断点。
  3. 调试代码，剖析逻辑，其中 console 模板能够间接编写 JS 代码进行调试。

各个选项性能：

  • ：执行到下一个断点。
  • ：执行下一步，不会进入所调用的函数外部。
  • ：进入所调用的函数外部。
  • ：跳出函数外部。
  • ：一步步执行代码，遇到有函数调用，则进入函数。
  • ：停用断点。
  • ：不要在出现异常时暂停。
  • 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": ["<all_urls>"],
            "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);
退出移动版