浏览器开发者工具

浏览器开发者工具 - 网络

抓包【包也就是请求】：

1. 打开开发者工具

   • f12
   • 点击右键 =》点击检查

2. 刷新浏览器

一定是要先打开再访问，才能抓到这些请求。

基本配置

1. 勾选保留日志：重新加载不会清理之前的请求

2. 勾选禁用缓存：重新加载不会使用之前缓存的数据

   

3. 开发者工具汉化

   

查看请求信息

点击任意请求，可以看到右侧的框框：

• 标头：可以看到请求的方式、url、请求头、响应头、状态码等

• 预览：响应的内容经过渲染后的内容

  预览，给你东西，你看不懂，给你个看得懂的

• 响应：响应的原内容

  数据真正获取的地方

• 发起程序：程序从开始到结束的流程

• 计时：请求各时间段

• cookie：cookie 数据

----------------------------------------------------------- 分割线 -----------------------------------------------------------

打开开发者工具的方式

1. 快捷键 F12

2. 快捷键 ctrl+shift+i

3. 鼠标右键

   

   选择 检查。

4. 设置中打开

   

   一般情况用 F12 或鼠标右键即可。

汉化

1. 设置

   

2. 重新加载

   

菜单栏

元素

查找网页元素一般进入的是这个模块。需要注意的是，元素模块的文本，和请求响 应的文本并不一定完全相同，解析时需要以响应文本为主。

当使用左上角的工具点击页面元素时，定位到的就是 元素 模块中的节点了。 调试时，它参与不多。

控制台

控制台 部分可以编写代码，也可以打印内容：

一般在调试的时候不使用这个地方的控制台，因为不方便边调试边查看。在 源代码 模块中，也可以打开一个较小的 控制台。

网络

一般进入网络，会先勾选上：

• 保留日志 ：避免页面改变，日志信息消失，不便于信息查找
• 停用缓存 ：避免请求走缓存，不再重新请求

如果强制走了缓存，也可以按 ctrl + F5 强制刷新。

【这里不重复说明，看爬虫基础部分】

调用堆栈

除了在 源代码 中可以查看调用堆栈，在请求上面一般也可以查看到，方便定位：

1. 定位到目标请求

2. 鼠标放到 启动器 部分

3. 弹出的信息就是调用堆栈

   

   一般不知道看哪个，就点击最上面的，进入到源代码。在进入的那行打上断点，刷 新页面，断住在这行。然后在源代码中，通过调用堆栈的切换和代码代码的调试确 定位置。

tips：目标代码一般不再前端封装的js文件中，比如 jquery-....，还可以通过代码功能猜测所在文件，比如登录的可能会在 loginxx.js 文件中。

应用

应用中一般查看 cookie，并且可以在这里删除 cookie。

源代码

这部分是调试的重点部分，网页 js 代码的调试都在这完成。

左侧栏

把左边拉宽，可以看到下面又可以分为 网页、文件系统、替换、内容脚本和代码 段，一般情况可以不用打开这部分，点击右侧的方框三角（
）就可以收起来。其 中 替换 和 代码段 可能会在后面的内容中用到。

替换

将网页的 js 文件保存到本地，替换掉网页的该 js 文件，可以在本地的 js 文件中做任 意修改，方便调试。

代码段

编写 js 代码，运行 js 代码。

主要作用是让编写的 js 代码运行在浏览器环境。因为我们平时运行 js 代码的环境的 是 node 环境，与正常浏览器所运行的 js 环境不同。在保证我们的 js 代码在浏览器 环境中能成功运行后，再换到 node 环境运行，就只需要考虑到环境的问题，而不需 要考虑代码的逻辑问题了。

中间栏

代码的显示部分，主要用来查看代码以及代码断点的设置。

在代码的行数上点击一下，就可以打上断点。 这栏一般和右侧栏一起配合使用。

右侧栏

调试代码的主要栏目。测试代码：

name = "hy";
function f1(n1){
  item = n1 + "item"; 
  console.log("第1个函数，参数是：" + n1);
  f2("f1给的参数"); 
}
function f2(n2){
  item = n2 + "item"; 
  console.log("第2个函数，参数是：" + n2);
  f3("f2给的参数"); 
}
function f3(n3){ 
  console.log("第3个函数，参数是：" + n3); 
}
f1(name);

断点调试

• 继续执行脚本 - F8

  继续执行，直到碰到下一个断点或程序结束。

• 单步执行 - F10

  执行下一行。

• 进入下一个函数调用 - F11

  如果当前执行的是函数，则进入到该函数所在部分。

• 跳出当前函数 - shift + F11

  跳出当前函数的执行，到函数调用的地方。

• 停用断点

  任何断点都不生效，只想看请求后的结果。

这几个常用，其他不怎么用。

断点

当给代码打上断点之后，右侧“断点”部分就会出现对应断点显示。右键点击断点，可以出现对应设置：

1. 编辑条件

• 条件断点：当符合某个条件才会断下来的断点

  

  该断点只有 n1 的值是 "www.taobao.com" 的时候才会断下来，其他时候都不会被断。

• 日志断点：在控制台打印断点处需要打印的内容

  

  设置了日志断点之后，控制台会打印处日志断点的值。

2. 启用/禁用断点

   通过启用和禁用断点，可以让对应的断点启用和失效，并不会直接删除，方便后续再测试这个断点。

3. 删除断点

   可以选择性的删除当前、其他或者所有断点。

监视

这里有应该先看 断点。

用来监视一个变量的值，使用步骤：

1. 点击 + **

2. 在弹出的输入框中输入要监视的变量名称，例如 item

   

3. 回车

   设置完成后，打上断点，在调试过程中，被监视变量的值，会在这里展示，并随着值的变化而变化（下一步运行程序，可以查看 item 的变化）。

断点

当在中间栏代码行号上打上断点，在这个不分可以看到：

点击断点就可以跳转到打断点的部分（断点作用与演示，省略）。

点击代码显示区域右下角的三角形就可以运行代码，当代码运行到断点部分就会暂停。

作用域

等同于Python作用域，在不同的作用域中显示不同作用域的值，一般查看本地的作用域的值，用来监视变量的变化。

调用堆栈

程序调用的先后顺序，上面代码中一共有三个函数与三个函数的调用，最先被调用的是 f1，所以它在堆栈的最下面。

也就是说，最先被调用的函数，在堆栈的最下面。当前正在被调用的函数，在最上面（没有被调用的，看不到）。

此时断点断在 12 行，已经被调用的有 f1 和 f2，调用堆栈能看到的也是他们俩。

通过点击调用堆栈的函数名称，可以进入到对应的函数部分。在 js 代码调试中，这部分非常重要。

XHR/提取断点

当请求是 XHR 请求的时候，可以在这里设置请求接口，断住请求（在不好定位代码位置的时候使用）。

例如：百度首页 https://www.baidu.com/ 有一个异步请求：

在 源代码 中添加 XHR 断点（添加方式与监视的添加方式一样），添加的值写域名后面的地址即可（不用包含查询参数，也就是 “?” 后面的内容）:

再次刷新百度首页，即可断住，断住的地方是发送 XHR（异步） 请求的地方：

如果不是异步请求，不能用这种方式打断点。

源代码中打开控制台

1. 点击控制面板右上角三个点

2. 点击 显示控制台抽屉栏

   

3. 点击控制台左上角的禁止标志，可以清屏