一、Chrome 浏览器开发者工具简述
1.1 什么是浏览器开发者工具
其实简单的说，浏览器开发者工具就是给专业的web 应用和网站开发人员使用的工具，它的
作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本
（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手
锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就
是介绍我常用的三个浏览器。
1.2 浏览器开发者工具基本使用
如何调出开发者工具：
按F12 调出& 右键检查（或快捷键Ctrl+Shift+i）调出
二、浏览器开发者工具面板说明
chrome 开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。爬虫这块用的比较多的是元素(ELements), 网络(Network).
元素（Elements）：用于查看或修改HTML 元素的属性、CSS 属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面
控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript 对象，查看调试日志
信息或异常信息。还可以当作Javascript API 查看用。例如我想查看console 都有哪些方法
和属性，我可以直接在Console 中输入"console" 并执行
源代码（Sources）：该页面用于查看页面的HTML 文件源代码、JavaScript 源代码、CSS 源代码，此外最重要的是可以调试JavaScript 源代码，可以给JS 代码添加断点等。
网络（Network）：网络页面主要用于查看header 等与网络连接相关的信息。：网络页面主要用于查看header 等与网络连接相关的信息。
2.1 元素(Elements) 面板
查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然
后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素
源代码的具体位置。
用于定位元素，复制某类元素路径，这个在使用BS4 库,selenium 库时，选择定位器会用到!
用于写XPATH 路径语言时使用!
可以更改浏览器显示方式! 使用手机或者其他设备! 也可以更改当前使用的设备的网络连接
速度!
2.2 网络(Network) 面板(1)
Network 面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request 后分
析HTTP 请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request 和
Response 等），可以根据这个进行网络性能优化。该面板主要包括5 大块窗格：
Controls 控制Network 的外观和功能。
Filters 控制Requests Table 具体显示哪些内容。
Overview 显示获取到资源的时间轴信息。
Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
Summary 显示总的请求数、数据传输量、加载时间信息。
其中用的比较多的是:Controls,Filter,Requests Table
使用频率一般，在部分网站上抓取某些请求时使用! 有时需要选择Disable Cache, 不需要缓
存。
这个主要用来选择一些请求时用的！常用的俩选项XHR 和JS, 其他偶尔用用!
笔记xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax 功能实现所依赖的对象，jquery中的ajax 就是对xhr 的封装。
查看一些请求的名字，状态码，类型，大小和类型! 这个不是重点！重点是这个资源本身的
一些属性!
2.3 网络(Network) 面板(2)
点击任意一个资源我们可以得到如下资源!
这个主要用于查看这个请求的内容! 知道数据是否在这块放着!
主要用于查看某个资源是如何请求的, 请求头信息，请求体信息，响应体信息等等，下面会
具体介绍! 这部分内容相对来说还是很重要的!
generel 主要用于查看请求的url 和请求方式，响应状态码，等信息，常用的就这四个!
Request Headers 请求头信息，里面信息很多，常用来做伪装浏览器使用，最常见的伪装方法就是使用User-Agent! 当然还有一些其他的伪装方法!
