Chrome以其界面简洁、大量的应用插件、良好的代码规范支持、强大的V8解释器，和Chrome开发者工具给前端开发者带来了很大的便利。利用好Chrome开发工具，能给我们开发工作带来很大的便利。下面我们就详细的介绍下Chrome DevTools。
1.怎么打开Chrome DevTools
开发者通过快捷键Ctrl+Shift+I或者直接按F12打开下面的面板：
我们从左到右依次介绍标签项。
2.Elements标签
Elements标签页左侧是对Html元素的查看和编辑，右侧是对CSS的查看和编辑。如下图：
Element标签页左侧：选中DOM对象之后右键，就可以看到能够操作DOM元素的功能。
a.Add attribute:在标签中添加新属性；
b.Edit attribute:编辑标签的属性；
c.Edit as HTML:可以直接对HTML进行编辑和删除，更改的结果会立即展示在页面上；
d.Copy:可以用来复制HTML代码，我们在看到别的网站写的比较好的代码的时候，可以直接复制过来；
e.Scroll into view:将页面滚动到节点处；
d.break on:设置断点。
Element标签页右侧：选中DOM对象之后右键，就可以看到当前标签的CSS样式、属性等。双击，可以对CSS样式进行编辑。
a.Styles:显示用户定义的样式；
b.Computed:显示开发者工具计算好的元素样式；
c.Event Listeners:显示当前HTML DOM节点和其祖先节点的所有JavaScript事件监听器，这里的监听脚本可以来自Chrome插件；
d.Properties:全面的列出当前选中内容的属性。
3.Console标签
Console标签页也是javascript控制台，在这个面板可以查看错误信息、打印调试信息、写一些测试脚本，还可以作为Javascript API查看用。
注意：当需要换行的时候而不是回车的时候，请按Shift+Enter。
4.Sources标签
Source页面内我们能看到当前浏览器页面中的js源文件。在这里我们可以设置断点，调试js代码。
a.设置断点的方法
可以点击JS代码前面的数字外来设置断点，如果当前代码是经过压缩的，可以点击下方的花括号{}来增强可读性，所有的断点都会列出在右侧的断点区。
b.断点触发
① DOM元素节点发生改变时
在Elements面板中指定的DOM节点上右击，在弹出的菜单中选择Break on...，可以看到三个选择项，比如我们选择Subtree modifications，
那么当选择的节点里面的子节点被添加、删除、修改，则断点就会被触发。
②XHR生命周期改变时
当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时，则断点就会有触发。
③指定事件执行时
在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件，勾选你要监听的事件，在指定的事件执行时，断点就会有触发。
5.Application标签
Application标签页主要是记录网站加载的所有资源信息，包括存储数据（Local Storage,Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式等。
Local Storage：用于存储客户端浏览器的数据，它与cookie的不同之处在于没有时间限制，属于html5中的新特性以key/value的方式进行存储的，并且value只能是字符串形式，如果要使用其他数据类型，需要进行相应的转换。
Session Storage:用于本地存储一个回话（session）中的数据，这些数据只有在一个回话中的页面才能访问，并且当回话结束后，数据随之销毁。Session Storage不是一种持久化的本地存储，仅仅是会话级别的存储。
Frames窗格：顶级的top是一个主文档，在top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个就是主文件本身。
6.Audits标签
Audits标签页可以帮你分析页面性能，有助于优化前端页面，分析后得到报告
7.Profiles标签
Profiles标签页可以查看CPU执行时间与内存占用，这里不做过多介绍，后面会写专题介绍。
8.Network标签
Network标签页记录从发起网页页面请求的Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小和所用时间等），可以根据这个进行网络性能优化。该面板的图如下，共有5个视窗：
a.Controls（工具栏）：控制Networ的功能和外观；
b.Filters（筛选栏）：控制Requests Table具体显示哪些内容；
c.Overview（概览）：资源被加载过来的时间线，如果多条时间线垂直堆叠，表示多个资源被并行加载；
d.Request Table（请求列表）：改视窗列出了所有的资源请求，默认按时间顺序排序，点击资源，可以查看更详细的信息；
e.Summary（总览）：汇总了请求数量，传输数据大小，加载时间等信息。
其中Request Table显示的信息如下：
- Name 资源名称：点击名称可以查看资源的详细情况，包括Headers、Preview、Response、Timing。
- Status HTTP状态码
- Type 请求的资源MIME类型
- Initiator 标记请求由哪个对象或进程发起的（请求源）。
- Size从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示
- Time请求或下载的时间，从发起Request到获取到Response所用的总时间
- Waterfall显示所有网络请求的可视化瀑布流（时间状态轴），点击时间轴，可以查看该请求的详细时间，点击列头则可以根据指定的字段排序
9.Performance标签
Chrome57已经将Timeline改为Performance。在加载和使用网页应用程序或网页时，时间轴面板提供关于时间开销的完整概述。包括从加载资源到解析JavaScript，以及计算方式在内的所有事件，都会重新绘制在一个时间表中。该面板共有4个视窗：
a.Controls 录制开关和控制录制过程中需要记录哪些信息。
b.Overview 网页性能的概要信息。
c.Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
d.Details 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。
10.Security标签
Security标签页可以告诉你这个网站的安全性，查看有效的证书等。如果网页是安全的，则会显示一条信息：This page is secure (valid HTTPS)，点击View certificate可以查看main origin的服务器证书信息；如果网页是不安全的，则会显示：This page is not secure。
该面板可以区分两类不安全的页面：
- 如果被请求的页面通过HTTP提供服务，那么这个主源就会被标记为不安全。
- 如果被请求的页面是通过HTTPS获取的，但是这个页面接着通过HTTP继续从其他源检索内容，那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面，混合内容页面只是部分受到保护，因为HTTP内容（非加密的内容）可以被嗅探者入侵。
版权归本人所有，如有转载，请注明来源。
