原文：工具介绍 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,
(3)Toggle animation controls,
2、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中的一项来排序。
小功能模块：
从左到右：
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（‘节流，限流，限制’）：
选择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 文档中通过元素和属性进行导航。
这里a标签的Xpath为：/html/body/div[2]/p[1]/a，解读为：html里面body标签的第二个div标签的第一个p标签下的a标签。
[HTML DOM事件]
