自学Python爬虫js逆向（二）chrome浏览器开发者工具的使用

js逆向中很多工作需要使用浏览器中的开发者工具，所以这里以chrome为例，先把开发者工具的使用总结一下，后面用到的时候可以回来查询。

Google Chrome浏览器的开发者工具是前端开发者的利器，它不仅提供了丰富的功能用于开发、调试和优化网页，还以其用户友好的接口而受到广泛欢迎。

打开一个网页，比如www.baidu.com，按下Ctrl+Shift+i 可以看到页面右半部分出现了如下的画面：

右边这部分就是开发者工具页面

这一排就是开发者工具的面板菜单，我们主要用到其中的4个面板：Elements(元素) Console（控制台）Sources（源代码） Network（网络），下面挨个来说

1、Elements(元素)面板

这里显示的是网页对应的HTML代码，一些静态网站的数据直接在这里就可以得到。

在这里我们可以修改Dom 和 Css 来调整我们网站的布局和设计，并且可以对网页内容做一个简单修改。比如这里我们调皮一下，把下面这个标签修改一下：

然后打开页面，就看到效果：

2、Console（控制台）面板

在控制台面板中，可以看到网页运行的一些诊断信息，或者可以使用它与页面上的javascript进行交互。

它可以理解为一个编辑器，我们经常用console输出变量的值，用console.log console.info console.error等不同形式打印信息，方便我们观察调试代码

console.count可以统计方法调用的次数

console.table可以以表格形式显示数据

我们在console面板中间的编辑器里先定义一个变量data,然后用console.table展示出来

console.copy方法可以复制变量的值

$_记录了最后一次在console中计算的表达式的值

$('.subject')可以找出所有类为subject的DOM

$x()可以结合xpath查看DOM内容

比如我们在网站上找到一个标签，在Element面板里找到这个标签，右键复制xpath地址

然后打开Console面板，在编辑器里输入如下代码

可以看到该标签内容被正确显示了出来。

3、Sources（源代码）面板

这是js逆向中使用最多的面板，因为网站的源代码都在这，我们就是要从中找到规律才能突破反爬获取数据。在这个面板中，我们可以通过设置断点来调整JavaScript的运行，或者使用我们的工作区域来连接本地文件，来使用开发者工具自带的实时编辑器来修改我们的源代码

可以看到sources面板分为三个部分：左边的是文件导航窗口，中间的是编辑器窗口，右边的是调试窗口。

3.1 调用本地文件

点击中间窗口的 select folder, 如果标题栏弹出要求获取权限的提示，点击允许

这时候就可以在local文件夹下看到我们准备好的本地文件

在这里可以对它进行打断点、调试等操作。

左边导航窗口的右箭头打开，选择overrides标签，可以进行本地代理操作

本地代理操作的意思是将远程的资源下载一份在本地，然后可以在开发者工具下进行编辑，开发者工具会更新展示我们编辑后的文件，即可以直接将一些请求代理到本地的文件当中，以更好地观察请求的运行情况。

点击 Select folder for overrides,跟上面一样添加一个本地文件夹local,也要允许权限，然后还要勾选 Enable Local Overrides。这时候我们就可以进行本地代理操作了。

打开Network，选择一个请求右键弹出菜单，选择override content

界面回到overrides，在中间编辑窗口就可以对文件进行修改，保存之后就可以在页面上看到效果

3.2 Snippets面板：

是一个代码片段工具，可以在该部分预先编辑好一些功能代码，在需要的时候方便运行。比如我们放一个常见的All Colors 脚本，用来输出RGB的颜色

javascript">// allcolors.js
// https://github.com/bgrins/devtools-snippets
// Print out CSS colors used in elements on the page.(function () {// Should include colors from elements that have a border color but have a zero width?var includeBorderColorsWithZeroWidth = false;var allColors = {};var props = ["background-color", "color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color"];var skipColors = {"rgb(0, 0, 0)": 1,"rgba(0, 0, 0, 0)": 1,"rgb(255, 255, 255)": 1};[].forEach.call(document.querySelectorAll("*"), function (node) {var nodeColors = {};props.forEach(function (prop) {var color = window.getComputedStyle(node, null).getPropertyValue(prop),thisIsABorderProperty = (prop.indexOf("border") != -1),notBorderZero = thisIsABorderProperty ? window.getComputedStyle(node, null).getPropertyValue(prop.replace("color", "width")) !== "0px" : true,colorConditionsMet;if (includeBorderColorsWithZeroWidth) {colorConditionsMet = color && !skipColors[color];} else {colorConditionsMet = color && !skipColors[color] && notBorderZero;}if (colorConditionsMet) {if (!allColors[color]) {allColors[color] = {count: 0,nodes: []};}if (!nodeColors[color]) {allColors[color].count++;allColors[color].nodes.push(node);}nodeColors[color] = true;}});});function rgbTextToRgbArray(rgbText) {return rgbText.replace(/\s/g, "").match(/\d+,\d+,\d+/)[0].split(",").map(function(num) {return parseInt(num, 10);});}function componentToHex(c) {var hex = c.toString(16);return hex.length == 1 ? "0" + hex : hex;}function rgbToHex(rgbArray) {var r = rgbArray[0],g = rgbArray[1],b = rgbArray[2];return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);}var allColorsSorted = [];for (var i in allColors) {var rgbArray = rgbTextToRgbArray(i);var hexValue = rgbToHex(rgbArray);allColorsSorted.push({key: i,value: allColors[i],hexValue: hexValue});}allColorsSorted = allColorsSorted.sort(function (a, b) {return b.value.count - a.value.count;});var nameStyle = "font-weight:normal;";var countStyle = "font-weight:bold;";function colorStyle(color) {return "background:" + color + ";color:" + color + ";border:1px solid #333;";};console.group("Total colors used in elements on the page: " + window.location.href + " are " + allColorsSorted.length);allColorsSorted.forEach(function (c) {console.groupCollapsed("%c    %c " + c.key + " " + c.hexValue + " %c(" + c.value.count + " times)",colorStyle(c.key), nameStyle, countStyle);c.value.nodes.forEach(function (node) {console.log(node);});console.groupEnd();});console.groupEnd("All colors used in elements on the page");})();

运行后效果：

3.3 常用断点

在Sources（源代码）面板中我们经常会进行一些断点调试，这里总结一下常用的几种断点：

条件断点：

我们先准备一段测试代码放到Snippets

javascript">console.log("断点测试");
let i = 0;
while (i<10) {console.log("本轮测试开始");console.log("现在i的值为："+ i);// debugger;console.log("本轮测试结束");i++;
}console.log("断点测试完成");

然后在代码行号点右键，弹出菜单里面选择 Add conditional breakpoint

在弹出的菜单里填写条件i=4，并在右边的watch里添加一个监控的变量 i

再次运行代码片段，发现运行到 i 的值为4时，程序就停住了

XHR断点：

我们先打开Network面板，勾选 XHR/fetch，然后刷新一下百度网站，看看有没有xhr请求

发现了一个，先不用管这请求是干嘛用的，我们截取前面一段字符串 sugrec ,然后点开Sources面板，在右边的XHR/fetch Breakpoints 标签右边点击 + 号增加一个xhr断点，然后把刚刚的字符串填进去，这样当网页再次发起包含 “sugrec" 这个字符串的xhr请求时，就会断点停下

再次刷新网站，发现果然断点了

DOM 断点：

在元素列表，找到想要断点的元素，点击右键，在弹出菜单里选择Break on => subtree modifications

然后在Sources面板里就可以看到该断点

当该元素发生改变的时候，就会断点停到这里

事件断点：

我们打开一个网站的登录界面，选择登录按钮，看到按钮的type是一个 submit，意味着这里调用了一个submit事件，我们打开Sources面板，选择Event Listenner Breakpoints => Control => submit

这样每当这个事件调用的时候，这里就会断点停到这里

3.4 工具栏介绍

最后再来说下右边的调试窗口最上方的这一排小图标

第1个是暂停按钮，当运行到断点时会变成蓝色箭头，点击恢复执行直到下一个断点

第2个是直接执行下一行然后直接就跳转到下一行

第3个是如果下一行包含一个函数调用的话，就会进入到函数内部，并且在这个函数的第一行断上

就是经常会说的追进去

第4个是跳出当前函数的调用

第5个是单步按钮，表示执行下一步

第6个是暂时禁用所有的断点，用于恢复正常的执行

4、Network（网络）面板

这也是JS逆向中经常使用到的面板，在这个面板中可以用来抓包、查看每个请求的请求头、响应、以及它所耗费的时间等信息。

它包括控制器、过滤器、概览和请求

4.1 控制器

控制器可以用来控制我们网络面板的一个外观还有功能

第1个红色按钮控制是否抓包。

第2个是清除现有列表中的所有请求。

第3个是过滤器网格的开关。

第4个是一个搜索开关，打开可以出现一个搜索界面。

第5个是控制是否进行跨页面加载保存请求。不勾选的话，跨页面请求的时候之前的请求就会被清除。

第6个是控制是否禁用浏览器缓存。如果不勾选的话我们每一个请求都会去请求新的浏览器资源。

第7个是慢速网络模拟。可以使用slow 3G 或者离线状态来看一下浏览器在不同网络环境下请求是什么样子的。

4.2 过滤器

过滤器可以用来控制请求列表，显示哪些资源，比如说通过点选 Fetch/XHR，可以只显示异步请求（XHR），点选img标签，可以只显示图片资源。也可以通过Ctrl来多选。最左边的选择框可以进行关键字筛选，比如我们可以输入 www.baidu.com 直接筛选出来自 www.baidu.com网站的请求。

4.3 概览

这里显示的是每个请求的时间线。

4.4 请求

这部分是重点。网页访问过程中的每一个请求都会被记录在这里。请求列表默认是以请求的时间顺序排列。这里可以看到请求的一些信息：Name(请求的名称) Status(状态码) Type（请求类型）Intiator(请求来源) Size（请求大小） Time(请求时间）等等，这里最重要的是请求来源，可以看到请求的发起方，这很重要，很多时候我们可以通过它是从哪里发起的来判断它的JS大概是哪一个。

选中某个请求之后还可以看到该请求的详细情况：