Chrome开发者工具详解（一）

---

前言

Chrome浏览器中内置了一套强大的开发者工具，学会使用Chrome开发者工具对web网站进行静态分析和HTTP数据抓包，才能有效地分析网站的反爬技术，突破各种网络爬虫难题。下面将总结chrome开发者工具的常见用法。

---

一、打开开发者工具方法

（1）在对应网页页面，右键网站----选择“检查”选项
（2）按“F12”按钮
（3）按Ctrl+Shift+I 组合键

二、面板常用方法

开发者工具中有多个面板，需要了解和掌握的面板是Elements、Console、Sources、Network 和 Application面板。

1.Elements面板

Elements：元素面板，用于查看和修改网页HTML节点的属性、CSS样式等。
如图，右侧为Element面板，面板上方显示的是：页面源代码的DOM树，可以在该面板中对源代码（HTML）进行增删改查等操作；下侧则显示的是：网页节点的CSS样式。
具体如下图说明：

（1）页面元素定位：在源代码中使用 Ctrl+F 键 打开搜索框，通过文本、编写CSS选择器或Xpath语法进行页面元素和节点实施定位，具体如下图操作：

通过搜索框或右键网页元素选择检查选项来快速定位到网页节点后，可以在该节点 右键----选择“Copy”选项，选择copy（复制）其中的css或xpath选择器定位语法，如图所示：

（2）获取原始网页源代码方式：在网页上右键----点击“查看网页源代码”选项，或使用Ctrl+U 键。

2、Network 面板

Network ：网络面板，用于查看页面的加载过程中的各种请求信息，包含请求、响应等。
该面板的1号窗的Preserver Log选择框用于保存日志，Disable cache复选框用于禁止缓存。2号窗用于过滤请求列表Name中的资源请求和响应。

通过对应的网络请求的preview按钮，可以看到请求数据在浏览器中展示的效果，具体如下操作：

如果需要查看HTTP响应的具体内容（HTML代码），可以点击 Response选项卡，如下图所示以源代码的形式展示：

---

总结

详解二链接跳转