chrome--浏览器调试工具详解

chrome浏览器开发调试工具打开方式：F12键

一，常用面板介绍

1.定位小箭头按钮(左边第一个)：
选中Elements面板，并启动该按钮，可以在页面中定位相应元素的源代码位置，或者选择源代码位置可定位到页面相应的元素。
2.手机-PC视图切换按钮(左边第二个)：
启动该按钮，网页可以在pc网址网页和手机网址网页之间进行转换。由于在爬虫过程中，爬取手机网址网页相对来说更容易，所以可以通过该按钮将网页切换至移动网页实现更快速爬取操作。(例如新浪微博)
3.Elements面板
该面板显示了渲染完毕后的全部HTML源代码，在使用selenium爬取网页时可通过这些源代码找到各标签的位置，属性等特征。更重要的是，双击html源码或者右侧的css，可以更改网页外观，即可以对静态网页进行调试。
4.Console面板
该面板用来显示网页加载过程中的日志信息，包括打印，警告，错误及其他可显示的信息等。同时它也是一个js交互控制台。

上图显示了百度首页的console面板信息，该信息来源于执行请求下来的js文件所得。每条信息的右侧显示了信息的来源的js文件及具体的行数。同时最下边个人写了一条简单的输出信息，输出“这是数据小丸子”。
更为重要的一个功能是：ctrl+shift+F在该面板中能够唤起全局搜索功能，即可以在所有下载的资源中搜索目标信息，这点对于关键字查找是非常重要的。
5.Sources面板
该面板以站点为分组，存放着请求下来的所有资源(html,css,jpg,gif,js等)。正是因为该面板存放了所有的资源，因此在调试js时，目标代码都是在此处寻找的。
该面板也提供了调试按钮工具。
6.Network面板
Network面板记录了网络请求的详细信息，包括请求头，响应头，表单数据，参数信息等等，只要是做爬虫的这个面板必须要了解。

红色圆圈内代表的是请求的不同类型的数据，其中XHR表示ajax请求，即异步请求，在爬虫中最重要的是分析该项。Doc表示的是html文档类型。其他几个不是很重要不详细讲解。
若要保留请求记录，勾选上preserve log选项。

其他几个面板在爬虫过程中使用不是很多，故不再讲解。