神器--chrome开发者工具

原文：工具介绍 http://selfboot.cn/2014/09/19/chrome_DevTools_1/

---

Note：

Google Chrome 共提供了8大组工具：

1。Elements：可以看到chrome渲染页面所需要的HTML、CSS和DOM对象。也可以编辑这些内容更改页面显示效果。
2。Network：可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。另外，还可以查看HTTP请求头，返回内容等。
3。Sources：主要用来调试JS。
4。TimeLine：提供加载页面时花费时间的完整分析。所有事件，从下载资源到处理JavaScript,计算CSS样式等花费的时间都展示在TimeLine中；
5。Profiles(‘简况，轮廓’)：分析web应用或者页面的执行时间以及内存使用情况。
6。Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
7。Audits（‘审计’）: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
8。Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。

此外，开发者工具还提供了Emulation（‘仿真’）功能，做移动开发时特别有用。

---

1、Elements：

HTML中的每个元素都是一个DOM节点，所有的DOM节点组成了DOM树。可以把HTML标签看作DOM节点。

---

选中DOM对象之后右键即可以看到一些辅助的功能。

1，Add atrribute：在标签中增加新的属性；
2，Edit atrribute ：编辑标签的属性；
3，Force element state：有时候我们为页面元素添加一些动态的样式，比如当鼠标悬停在元素上时的样式，这种动态样式很难调试。我们可以使用Force Element State强制元素状态，便于调试。
    :active , :hover, :focus, :visited
4，Edit as HTML ：以HTML形式更改页面元素；
5，Copy Css path ：复制css path ；
6，Copy XPath ： 复制XPath；
     XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。
7，Scroll into view ：将页面滚动到节点处；
8，Break on ： 设置断点；
     Break on subtree modifications（子树修改）, Break on attributes modifications（属性修改）, Break on node removal（删除节点）；

---

图中区块实时显示当前选中标签的CSS样式、属性等，一共有以下5小部分：

Styles: 显示用户定义的样式，比如请求的default.css中的样式，和通过Javasript生成的样式，还有开发者工具添加的样式；
Computed: 显示开发者工具计算好的元素样式；
Event Listeners: 显示当前HTML DOM节点和其祖先节点的所有JavaScript事件监听器，这里的监听脚本可以来自Chrome的插件。
DOM Breakpoints: 列出所有的DOM 断点；
Properties: 超级全面地列出当前选中内容的属性，不过基本很少用到。

---

Styles:

(1)+ : New Style Rule, 可以为当前标签添加新的选择器，新建立的样式为inspector-stylesheet。此外，也可以直接在原有的样式上增加、修改、禁用样式属性，如图中标记2显示。
(2)Toggle Element State,

Toggle Element State

(3)Toggle animation controls,

Toggle animation controls

---

---

2、Network

有时候我们的网页加载的很慢，而相同网速下，其他网页加载速度并不慢。这时候就得考虑优化网页，优化前我们必须知道加载速度的瓶颈在哪里，这个时候可以考虑使用Network工具。

Network

请求的每个资源在Network表格中显示为一行，每个资源都有许多列的内容

。Name/Path：资源名称以及URl路径；
。Method：HTTP请求方法；
。Status/Text：HTTP 状态码/文字解释；
。Type：请求资源的MIME类型；
。Initiator（‘发起人；启动程序’）：解释请求是怎么发起的，有四种可能值：
                1，Script ：请求是由script脚本处理发送的；
                2，Parser：请求是由页面的HTML解析时发送的；
                3，Redirect：请求是由页面重定向发送的；
                4，Other：请求是由其他过程发送的，比如页面里的link链接点击，
                    在地址输入URL地址。
。Size/Content ：Size是响应头部和响应体结合起来的大小，Content是请求内容解码后的大小。
。Time/Latency（‘潜伏期，延迟，潜伏’）：Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间；
。Timeline：显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。

以上是默认显示的列，不过我们可以在瀑布流的顶部右键，这样就可以选择显示或者隐藏更多的列比如Cache-Control, Connection, Cookies, Domain等。

右键点击

我们可以按照上面任意一项来给资源请求排序，只需要单击相应的名字即可。Timeline排序比较复杂，单击Timeline后，需要选择根据Start Time、Response Time、End Time、Total Duration(‘持续的时间，期间’)、Latency中的一项来排序。

单击排序-Timeline排序

小功能模块：

从左到右：
1，Record Network Log：红色表示正在记录资源请求信息；
2，Clear：清空所有的资源请求信息；
3，Capture（‘捕获’） screenshots（‘截屏’）：捕捉屏幕截图；
4，Filter: 过滤资源请求信息；

5，Use small（large） resource raws：每一行显示更少的内容；
6，Show（Hide）overview：显示（隐藏）概况；

7，Perserve（‘保护，保存，保持’） Log（记录）：Do not clear log on page reload/navigation  再次记录请求的信息时不擦除之前的资源信息；
8，Disable cache: 不允许缓存的话，所有资源均重新加载。
9，No throttling（‘节流，限流，限制’）：

No throttling 下拉菜单

选择Filter 后出现过滤条件：

Filter 条件

当我们点击某一内容类型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只显示该特定类型的资源。

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

有时候我们需要把Network里面内容传给别人，这时候可以在资源请求行的空白处右键然后选择Save as HAR with Content保存为一个HAR文件。然后可以在一些第三方工具网站，比如这里 重现网络请求信息。
选定某一资源后，我们还可以Copy as cURL，也就是复制网络请求作为curl命令的参数。

此外，我们还可以查看网络请求的请求头，响应头，已经返回的内容等信息

资源的详细内容有以下几个：

。HTTP request and response headers
。Resource preview: 可行时进行资源预览；
。HTTP response: 未处理过的资源内容；
。Cookie names and values: HTTP请求以及返回中传输的所有Cookies；
。WebSocket messages: 通过WebSocket发送和接收到的信息；
。Resource network timing: 图形化显示资源加载过程中各阶段花费的时间。

资源详细内容

解析后

---

---

补充解释：

【XPath】

XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。

XPth

这里a标签的Xpath为：/html/body/div[2]/p[1]/a，解读为：html里面body标签的第二个div标签的第一个p标签下的a标签。

[HTML DOM事件]