Chrome开发者工具使用教程笔记

https://www.giuem.com/chrome-devtools/

一、command+l打开 control+shift+I

二、Chrome含有八大组工具：

1、可以看到HTML，css，DOM对象，可以编辑这些内容更改页面显示效果。 ？？？如何更改 右键

command + f 搜索DOM树中指定内容

辅助功能：

Add Attribute: 在标签中增加新的属性；

Force Element State: 有时候我们为页面元素添加一些动态的样式，比如当鼠标悬停在元素上时的样式，这种动态样式很难调试。我们可以使用 Force Element State 强制元素状态，便于调试。

Edit as HTML: 以HTML形式更改页面元素；

Copy XPath: 复制XPath；

Delete Node: 删除DOM节点；

Break On: 设置DOM 断点。…………………………………………………………右键得到

右侧框元素：

Styles: 显示用户定义的样式，比如请求的default.css中的样式，和通过Javasript生成的样式，还有开发者工具添加的样式；

Computed: 显示开发者工具计算好的元素样式；

Event Listeners: 显示当前HTML DOM节点和其祖先节点的所有JavaScript事件监听器，这里的监听脚本可以来自Chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。

DOM Breakpoints: 列出所有的DOM 断点；

Properties: 超级全面地列出当前选中内容的属性，不过基本很少用到。

2、 network 看页面向服务器请求的资源、资源的大小以及加载资源花费的时间、加载不成功的资源，http的请求头，返回内容等 ？？？network用处 查看加载速度的瓶颈在哪里

Name/Path：资源名称以及URL路径；

Method：HTTP请求方法；

Status/Text：HTTP状态码/文字解释；

Type： 请求资源的MIME类型；

Initiator解释请求是怎么发起的，有四种可能的值：

1. Parser：请求是由页面的HTML解析时发送的；
2. Redirect：请求是由页面重定向发送的；
3. Script：请求是由script脚本处理发送的；
4. Other：请求是由其他过程发送的，比如页面里的link链接点击，在地址栏输入URL地址。

Size/Content：Size是响应头部和响应体结合起来的大小，Content是请求内容解码后的大小。资料 Chrome Dev Tools - “Size” vs “Content” ；

Time/Latency：Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间；

Timeline：显示网络请求的可视化瀑布流 ，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。

3、sources主要用来调试js。 async 异步

HTTP request and response headers

Resource preview：可行时进行资源预览；

HTTP response: 未处理过的资源内容；

Cookie names and values: HTTP请求以及返回中传输的所有Cookies；

WebSocket messages: 通过WebSocket发送和接收到的信息；

Resource network timing: 图形化显示资源加载过程中各阶段花费的时间。

4、timeline 完整分析加载页面时花费的时间，allthing 。capture捕获 ？？？事件显示时间的顺序

timeline的排序比较复杂，单击timeline之后，选择根据start time、response、end time、duration、latency中的一项来排序

5、profiles 分析web应用 ？页面的执行时间以及内存使用情况 ………… 找到之后，看到三个方面 的选项，heap snapshot 堆快照

6、resource 对本地缓存（ indexedDB、Web SQL 、Cookie、应用程序缓存、Web Storage） 中的数据进行确认及编辑

7、audits 分析页面加载过程，进而提供减少页面加载时间、提升响应速度的方案， audits 审核；

8、Console 显示各种警告与错误信息，提供shell用来和文档、开发者工具交互 shell壳、命令解析器，区分于核

三、一些单词的含义

1. Record Network Log: 红色表示此时正在记录资源请求信息；
2. Clear: 清空所有的资源请求信息；
3. Filter: 过滤资源请求信息；

过滤资源类型包括：Documents，Stylesheets，Images，Scripts，XHR，Fonts，WebSockets，Other

在XHR请求中，可以在一个请求上右键选择“Replay XHR”来重新运行一个XHR请求。

还可以copy as cURL 复制网络请求作为curl命令的参数，

4. Use small resource raws: 每一行显示更少的内容；
5. Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；
6. Disable cache: 不允许缓存的话，所有资源均重新加载。