最简单的谷歌浏览器调试面板使用教程

Chrome调试面板

常用面板

1. 定位小箭头按钮(左边第一个)：
   选中Elements面板，并启动该按钮，可以在页面中定位相应元素的源代码位置，或者选择源代码位置可定位到页面相应的元素。
2. 手机-PC视图切换按钮(左边第二个)：
   启动该按钮，网页可以在pc网址网页和手机网址网页之间进行转换。由于在爬虫过程中，爬取手机网址网页相对来说更容易，所以可以通过该按钮将网页切换至移动网页实现更快速爬取操作。
3. Elements面板(元素面板)
   该面板显示了渲染完毕后的全部HTML源代码，在使用selenium爬取网页时可通过这些源代码找到各标签的位置，属性等特征。更重要的是，双击html源码或者右侧的css，可以更改网页外观，即可以对静态网页进行调试。
4. Console面板(控制台面板)
   该面板用来显示网页加载过程中的日志信息，包括打印，警告，错误及其他可显示的信息等。同时它也是一个js交互控制台。
5. Sources面板(源代码面板)
   该面板以站点为分组，存放着请求下来的所有资源(html,css,jpg,gif,js等)。正是因为该面板存放了所有的资源，因此在调试js时，目标代码都是在此处寻找的。该面板也提供了调试按钮工具。
6. Network面板(网络面板)
   Network面板记录了网络请求的详细信息，包括请求头，响应头，表单数据，参数信息等，

Network面板

1. All：所有的请求
2. XHR(XmlHttpRequest对象js生成)： js动态加载请求
3. JS: JS代码
4. Css: 样式
5. image: 图片
6. Media: 音频,视频
7. Font: 字体
8. DOC: 首页
9. WS: WebSocket

设置断点

目的：通过调试找到目标数据生成的地方

---

在一些网页的渲染，行为和请求等等的实现后面都有JS代码进行执行，我们对JS代码打了断点之后，当JS执行到我们打断点的那一行时就会暂停执行，其实就像我们在IDE中编写Python一样，是对代码进行调试的一个工具。

---

使用断点来暂停JavaScript代码，审查变量的值和在特定时刻所调用的堆栈。
设置断点的最基本的方法是在特定的代码行上手动添加一个断点。也可以将这些断点配置为仅在满足特定条件时触发。
在源代码的左侧，您可以看到行号。这个区域称为line number gutter(行号槽)。单击行号槽中的行号，就会在该行代码上添加一个断点。
例如事件，DOM更改。

逐步调试

---

恢复执行这个常用的场景有两个，一个是结束调试，比如要同一个页面要换一个请求分析的时候可以结束当前调试，另一个是进入一个相当长的不重要的循环中，但是又需要分析同一个函数中后面的代码，这时可以在循环外面打一个断点，再恢复执行，可以快速跳出循环。后面的几个功能描述都比较清晰就不多讲了，后面在使用中会慢慢熟悉。

---

作用域

当脚本中断的时候，Scope(作用域)窗格将显示当前时刻所有当前定义的属性。

调用堆栈

• 靠近边栏顶部的是Call Stack(调用堆栈)窗格。当代码在断点处暂停时,CallStack(调用堆栈)窗格显示执行路径，按时间逆序，将代码带到该断点。这有助于理解现在执行到哪里，它是如何到达这里的，是调试的一个重要因素。
• 调用函数链，下面调用上面的函数

---

可以这样理解，每次在函数中需要调用新的函数时，就会把新函数压到最上面，这样我们每次都会关注最新的函数执行。