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解释请求是怎么发起的，有四种可能的值：

Parser：请求是由页面的HTML解析时发送的；

Redirect：请求是由页面重定向发送的；

Script：请求是由script脚本处理发送的；

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壳、命令解析器，区分于核

三、一些单词的含义

Record Network Log: 红色表示此时正在记录资源请求信息；

Clear: 清空所有的资源请求信息；

Filter: 过滤资源请求信息；

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

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

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

Use small resource raws: 每一行显示更少的内容；

Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；

Disable cache: 不允许缓存的话，所有资源均重新加载。