无论是做Web开发、调试或者写爬虫，都离不开Chrome开发者工具，作为Google 浏览器最牛逼的功能之一，国内的各浏览器也加入了开发者工具，但是功能各方面始终不如Google Chrome。因此，是时候扔掉你的360浏览器，qq浏览器，来学学Google Chrome开发者工具的使用了。
打开Chrome开发者工具
打开Google Chrome开发者工具有三种方法，根据自己的习惯选一种就行。当然，若是喜欢换着用也可以。
- 在页面点击直接点击“F12”
- 在页面点击“Ctrl + Shift + i”
- 在页面点击鼠标右键 --> 检查
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
- Accept：服务器接收的数据格式
- Accept-Encoding: 服务器接收的编码
- Accept-Language: 服务器接收的语言
- Connection: keep-alive保持连接
- Cookies：身份信息
- Host: 请求的主机地址
- User-Agent: 用户身份代理
- Sec-xxx-xxx: 其他信息
Request Headers是用户向服务器发送请求时所携带的信息，如果遭遇反爬，很有可能是这里的参数没有提交或者提交错误。最重要的是User-Agent，Cookies，Hosts数据。
General
- Request url ：实际请求的网址【如果是使用ajax技术加载的网页，请求这里的url才可以获取真实的数据】
- Request Method： 请求方法【有POST和GET两种】
- Status Code： 状态码，成功时为 200；404表示请求失败；302表示重定向，需了解其他的响应码可以查看以下连接：https://www.runoob.com/http/http-status-codes.html
Response Headers
Response Headers主要是服务器返回设置的数据，例如，服务器会返回最新的cookie数据就是在这里出现。一般查看Response Headers比较少。
5. 其他部分
- 时间o轴：通过调整时间轴，可以查看不同时间服务器返回的数据。
- Dock side：设置开发者工具窗口显示在网页的哪个位置，一般设置为显示在右边或下面。
能掌握Chrome开发者工具上述基本功能，你已经掌握了Chrome开发者工具大部分的知识啦，给自己点掌声吧~~pa pa pa
作者：爱学习，也爱女票的于饼喵
网友评论