01-Chrome开发者工具，你真的会用吗？

无论是做Web开发、调试或者写爬虫，都离不开Chrome开发者工具，作为Google 浏览器最牛逼的功能之一，国内的各浏览器也加入了开发者工具，但是功能各方面始终不如Google Chrome。因此，是时候扔掉你的360浏览器，qq浏览器，来学学Google Chrome开发者工具的使用了。

打开Chrome开发者工具

打开Google Chrome开发者工具有三种方法，根据自己的习惯选一种就行。当然，若是喜欢换着用也可以。

1. 在页面点击直接点击“F12”
2. 在页面点击“Ctrl + Shift + i”
3. 在页面点击鼠标右键 --> 检查

Chrome开发者工具功能基本介绍

先看下Chrome开发者工具最常用的功能有哪些

1. Elements

元素面板，这里能查看页面渲染后的数据，爬取静态网页时，主要就是在Elements面板进行调试，可以通过CSS，xpath，re等方法快速的提取想要的数据。

2. Console

控制台，这里可以运动代码，可以运行自己输入的代码，也可以运行网页的代码，在对网页进行分析，js解密时需要用到Console。

3. Network

网络面板，这里能看到浏览器请求和响应的所有数据，我们在处理反爬，抓包等主要就是在Netwrok面板操作。

3. Tool

工具栏，Chrome的工具栏是其很强大的功能，包括Preserve log，Disable cache，Serach，Clear等，js解密，多网站同时分析都需要用到工具栏。

4.Request

写网络爬虫，Request请求是很重要的一环，能否成功获取页面就看是否能向服务器提交正确的参数，而对各个参数的分析，都离不开Network中的request table，下面，就看看如何Chrome开发者工具查看各参数，以及各个参数的意义吧~。

Response可以查看返回的数据，通常通过ajax加载的数据就放在这个位置，Preview用于预览请求的结果，最重要的就是部分是Headers，
下面就详细讲讲Headers部分各个参数。

Request Headers

1. Accept：服务器接收的数据格式
2. Accept-Encoding: 服务器接收的编码
3. Accept-Language: 服务器接收的语言
4. Connection: keep-alive保持连接
5. Cookies：身份信息
6. Host: 请求的主机地址
7. User-Agent: 用户身份代理
8. Sec-xxx-xxx: 其他信息

Request Headers是用户向服务器发送请求时所携带的信息，如果遭遇反爬，很有可能是这里的参数没有提交或者提交错误。最重要的是User-Agent，Cookies，Hosts数据。

General

1. Request url ：实际请求的网址【如果是使用ajax技术加载的网页，请求这里的url才可以获取真实的数据】
2. Request Method： 请求方法【有POST和GET两种】
3. Status Code： 状态码，成功时为 200；404表示请求失败；302表示重定向，需了解其他的响应码可以查看以下连接：https://www.runoob.com/http/http-status-codes.html

Response Headers

Response Headers主要是服务器返回设置的数据，例如，服务器会返回最新的cookie数据就是在这里出现。一般查看Response Headers比较少。

5. 其他部分

1. 时间o轴：通过调整时间轴，可以查看不同时间服务器返回的数据。
2. Dock side：设置开发者工具窗口显示在网页的哪个位置，一般设置为显示在右边或下面。

能掌握Chrome开发者工具上述基本功能，你已经掌握了Chrome开发者工具大部分的知识啦，给自己点掌声吧~~pa pa pa

---

作者：爱学习，也爱女票的于饼喵