【Chrome浏览器开发工具笔记】

---

前言

这次的主题是Chrome浏览器开发工具的简单介绍，是在b站看志远老师课程总结的，yyds。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、打开浏览器开发者工具

方式1. F12

方式2.如下图。

二、浏览器开发者工具界面介绍

关于爬虫方面，浏览器开发者工具主要使用如下图的五个箭头所指的部分。

2.1 Element（元素）

Element(元素)：用于前端调试页面，查看元素

1. 点击下图红色框的箭头能方便定位前端页面的各个元素对应标签的位置。并能够进行修改，但只改动了本地的文件，未对服务器进行改动。
   
2. 右键某个标签，可以有如下功能。
   
3. 同时右半窗口有各种功能如下：其中点击Event Listener，有个Ancestors ALL选项用于选择显示当前页面所有事件还是对应选择元素的绑定事件。
   

2.2 network（网络）

network用于查看网络请求的各种信息。

1. 建议勾选Preserve log和Disable catche
   
2. 其中过滤器
   XHR：代表ajax请求；js就是js文件，css是css文件，img是图片，media视频，font字体。

3. 各个请求的详细详细如下图

4. 右键某个请求可以如下操作

2.3 Sources(资源面板)

1. 资源面板左半部分
   

2. 如下图格式化js代码
   

3. 打上断点后，页面功能如下图：
   
   

4. 对断点的操作
   

5. console的建议设置
   

2.4 Application(缓存页面)

1. 关键操作
   

总结

未完待续