面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。
这些按钮的功能点如下：
Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
注： 这一篇主要讲解前三个面板Elements、Console、Sources。
通过JS代码或者命令行console.log()、console.warn()
和console.error()可以将日志信息输出到控制台
console.log 显示一般的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组console.warn 显示带有黄色小图标的警告信息console.error 显示带有红色小图标的红色的错误信息
console.assert 当第一个参数为false时，才会显示第一个参数的值
注： 当需要换到下一行而不是回车的时候，请按Shift+Enter。
在上一小节，我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值，当你在控制台输入命令时，会弹出相应的智能提示框，你可以用Tab自动完成当前的建议项
| 快捷方式 | 描述 |
|---|---|
| $() | 返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()
|
| $$() | 返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()
|
| $x() | 返回与指定的XPath相匹配的所有元素的数组 |
注： 我在实际操作过程中发现$()并没有按预期返回相匹配的第一个元素，而是返回了所有匹配的元素数组，我也给Google提供了这个issue，等待Google的答复。
你可以在这个面板里面调试你的JS代码，也可以在工作区打开你的本地文件。
{}来增强可读性，所有的断点都会列出右侧的断点区。
断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发
① DOM元素节点发生改变时
在Elements面板中指定的DOM节点上右击，在弹出的菜单中选择Break on...，可以看到三个选择项，比如我们选择Subtree modifications，
那么当选择的节点里面的子节点被添加、删除、修改，则断点就会被触发。设置方式如下图：
下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点，通过单步调试可以看到会弹出一个div对话框供用户添加数据。
② XHR生命周期状态改变时
当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时，则断点就会有触发。
③ 指定的事件执行时
在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件，勾选你要监听的事件，
在指定的事件执行时，断点就会有触发。
注： 这一篇主要讲解面板Network，参考了Google的相关文档，主要用于公司内部技术分享。
面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。
这些按钮的功能点如下：
Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。
我把Google官方网站上介绍Network面板的图贴到这里，该面板主要包括5大块窗格(Pane)：
其中 Requests Table 显示如下信息列：
Headers、Preview、Response、Cookies、Timing。Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器，视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。
以捕获屏幕为例，点击摄像机按钮（捕获屏幕），重新加载页面即可捕获屏幕。
双击其中的截屏可以放大显示，在放大的图下方可以点击跳转到上一帧或者下一帧。
单击则可以查看该帧被捕获时的网络请求信息，并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。
DOMContentLoaded和load这两个事件会高亮显示。
DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。
load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。
DOMContentLoaded事件在Overview上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。
load事件同样会在Overview和Requests Table上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。
通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：
针对上面4个Tab进行详细讲解一下各个功能：
① 查看资源HTTP头信息
在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。
② 查看资源预览信息
在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。
③ 查看资源HTTP的Response信息
在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。
④ 查看资源Cookies信息
如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。
⑤ 分析资源在请求的生命周期内各部分时间花费信息
在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：
TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了，可以参见网络性能优化方案及里面的相关参考文档。
通过按住Shift并且把光标移到资源名称上，可以查看该资源是由哪个对象或进程发起的（请求源）和对该资源的请求过程中引发了哪些资源（依赖资源）。
在该资源的上方第一个标记为绿色的资源就是该资源的发起者（请求源），有可能会有第二个标记为绿色的资源是该资源的发起者的发起者，以此类推。
在该资源的下方标记为红色的资源是该资源的依赖资源。
注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。
注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。
Timeline面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
你可以充分利用这个面板来分析你的网页的程序性能问题。
下图是从Google官方网站中介绍Timeline面板的图贴到这里，该面板主要包括4大块窗格(Pane)：
Flame Chart里面的虚竖线含义：蓝色标记DOMContentLoaded事件；绿色标记第一次的绘制时间点；红色代表load事件。
其中第2块Overview显示了网页性能相关的概要信息，可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围，Flame Chart会跟着局部放大显示指定区域内的详情信息。
可以通过键盘上的
W,S来放大和缩小指定区域，通过A,D来向左或向右移动指定区域。
从Google把图贴到这里，这个窗格包含了三个图表：
CPU面积图中各颜色的含义：蓝色代表HTML文件；黄色代表脚本文件；紫色代表样式文件；绿色代表媒体文件；灰色代表其它杂项文件。
NET图表柱状条两种颜色的含义：较亮的部分表示等待时间（当资源被请求时，直到第一个字节被下载的时间)；较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。
支持两种网页录制操作：①录制网页加载，②录制网页交互。为了便于分析，录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。
当录制完成后，在Flame Chart(火焰图)中点击左侧三角可以展开详情，点击其中的事件或者空白处，可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大，限于篇幅原因，下次有机会再作深入介绍，或者直接到Google上查看Timeline Event Reference这个参考文档。
在录制之前点击Controls中的JS Profile复选框，可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗)，并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。
在录制之前点击Controls中的Screenshots复选框，可以在录制过程中捕获截屏，鼠标在Overview上从左向右移动则可以看到录制的动画。
在录制之前点击Controls中的Paint复选框，可以获取绘制事件的更多细节信息（注意这会产生很多的性能消耗）。如果要深入了解网页渲染方面的信息，可以点击DevTools右上角的菜单，在More tools里面选中Rendering settings，这里面包含了如下设置项：
print、screen。把上面的所有设置项勾选上，网页的显示效果如下：
你可以通过在DevTools上按Cmd+F(Mac)调出查询框，来查看指定时间区域范围内的指定类型的事件，点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件发生的顺序来查询。
图中查询到了4个红色标记着的Parse HTML事件，点击Cmd+G焦点会在这4个事件移动。
上面大致介绍了Timeline面板上的各个功能菜单，那么如何去利用该面板去分析和优化网页程序的运行性能呢，由于篇幅限制，就不在这边展开讨论，感兴趣的读者直接到Google开发者文档上查看，Google开发者文档有最权威最新的信息。
如果上篇中的Timeline面板所提供的信息不能满足你的要求，你可以使用Profiles面板，利用这个面板你可以追踪网页程序的内存泄漏问题，进一步提升程序的JavaScript执行性能。
当前使用的Chrome最新版为54.0.2840.71，这个版本的Profiles面板比之前提供的功能更多也更强大，下面是该面板所包含的功能点：
通过选择Record JavaScript CPU Profile，然后点击Start，结合你所要分析的具体场景，你可以重新加载网页，或者在网页上进行交互，甚至什么都不操作。最后点击Stop，完成记录操作。
有三种不同的视图可供选择：
我们以Chart视图为例分析一下JS的执行的性能情况：
该视图会以时间顺序展示CPU的性能情况，视图主要分成两块：
视图中的函数颜色不同于其它的面板，这里面的函数颜色标记是随机显示的。然而相同的函数调用颜色标记是相同的。
其中纵轴表示的函数调用堆栈高度仅仅函数的调用嵌套层次比较深，不表示其重要性很高，但是横轴上一个很宽的柱形条则意味着函数的调用需要一个很长的时间去完成，那么你就考虑去做一些优化操作，具体可以参见网络性能优化方案及里面的相关参考文档。
将鼠标移到Call Stacks中的函数上可以显示函数的名称和时间相关的数据，会提供如下信息：
通过创建堆快照可以查看创建快照时网页上的JS对象和DOM节点的内存分布情况。利用该工具你可以创建JS的堆快照、内存分析图、对比堆快照以及定位内存泄漏问题。选中Take Heap Snapshot,点击Take Snapshot按钮即可获取快照，在每一次获取快照前都会自动执行垃圾回收操作。
快照最初会存储在渲染进程的内存之中，当我们点击创建快照按钮来查看时才会被传输到DevTools中，当快照被加载到DevTools里面并经过解析之后，在快照标题下方的文字显示是数字就是可访问到的JS对象总的大小。
堆快照提供了不同的视角来进行查看：
该视图会显示所有的对象信息，点击其中的一个对象进行展开可查看更详细的实例信息。鼠标移动到某个对象上会显示该对象实例的详情信息。
图中的各列的具体含义如下：
Shallow size和Retained size的区别？Shallow size是对象本身占用内存的大小，不包含它所引用的对象。Retained size是该对象本身的Shallow size，加上能从该对象直接或者间接访问到对象的Shallow size之和。也就是说Retained size是该对象被GC之后所能回收到内存的总和。
在展开构造函数，则会列出该函数相关的所有对象实例，可以查看该对象的Shallow size和Retained size，在@符号后面的数字是该对象的唯一标识ID。
其中黄色的对象表示在它被某个JS所引用，而红色的对象表示由黄色背景色引用被分离开出的节点。
这些构造函数都代表什么含义呢？
window）和通过它引用的对象之间的中间对象，如果一个对象是由Person构造函数生成并被全局对象所引用，那么它们的引用路径关系就像这样[global] > (global property) > Person。这跟常规的对象之间直接引用相比，采用中间对象主要是考虑性能的原因。全局对象的改变是很频繁的，而非全局变量的属性访问最优化方案对全局变量是不适用的。通过比较多个快照之间的差异来找出内存泄露的对象，为了验证某个程序的操作不会引起内存泄露（通常会执行一个操作后再执行一个对应的相反操作，比如打开一个文档后再关闭它，应该是没有产生内存泄露问题的），你可以执行如下步骤：
切换到Comparison视图之后，就可以看到两个不同的快照之间的差别。
该视图本质上就是应用程序的对象结构的“鸟瞰图”，允许你去深入分析函数的闭包，了解应用程序底层的内存使用情况。
这个视图提供了多个入口：
闭包小建议: 在快照的分析中命名函数的闭包相比匿名函数的闭包更容易区分。
Google上提供的例子和图如下：
function createLargeClosure() {
var largeStr = new Array(1000000).join('x');
var lC = function() { // 匿名函数
return largeStr;
};
return lC;
}function createLargeClosure() {
var largeStr = new Array(1000000).join('x');
var lC = function lC() { // 命名函数
return largeStr;
};
return lC;
}
该视图是堆快照的总的分布统计情况，这个直接上图就可以了：
还是把Google提供的内存泄露的小例子贴出来：
DOM内存泄露可能比你想象的要大，考虑一下下面的例子-什么时候#tree节点被释放掉？
var select = document.querySelector;
var treeRef = select("#tree");
var leafRef = select("#leaf");
var body = select("body");
body.removeChild(treeRef);
//由于treeRef #tree不能被释放
treeRef = null;
//由于leafRef的间接引用 #tree还是不能被释放
leafRef = null;
//现在没有被引用，#tree这个时候才可以被释放了
#leaf节点保持着对它的父节点(parentNode)的引用，这样一直递归引用了#tree节点，所以只有当leafRef被设置成null后，#tree下面的整个树节点才有可能被垃圾回收器回收。
该工具是可以帮助你追踪JS堆里面的内存泄漏的另一大利器。
选中Record Allocation Timeline按钮，点击Start按钮之后，执行你认为可能会引起内存泄漏的操作，操作之后点击左上角的停止按钮即可。你可以在蓝色竖线上通过缩放来过滤构造器窗格来仅仅显示在指定的时间帧内的被分配的对象。
录制过程中，在时间线上会出现一些蓝色竖条，这些蓝色竖条代表一个新的内存分配，这个新的内存分配都可以会有潜在的内存泄露问题。
通过展开对象并点击它的值则可以在Object窗格中查看更多新分配的对象细节。
从JS函数角度记录并查看内存的分配信息。点击Start按钮，执行你想要去深入分析的页面操作，当你完成你的操作后点击Stop按钮。然后会显示一个按JS函数进行内存分配的分解图，默认的视图是Heavy (Bottom Up)，该视图会把最消耗内存的函数显示在最顶端。
下图是切换到Chart视图时具体的界面，点击任意函数跳转到Sources面板可以查看具体的函数信息。
这篇文章是Chrome开发者工具详解这一系列的最后一篇，介绍DevTools最后的三个面板功能-Application面板、Security面板、Audits面板的基本功能：
该面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
这个面板跟前前面几道硬菜（Network面板、Timeline面板、Profiles面板）比起来简单多了，这里就稍微作一下介绍：
在上图中可以查看到顶级的top是一个主文档，在top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个就是主文件自身。
在资源上右击后在弹出菜单选择Reveal in Network Panel，就会跳转到Network面板并定位到该资源的位置。
你也可以在Sources面板里面按frame类别来查看资源信息。
通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。
HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。
HTTPS和HTTP的区别主要为以下四点：
① https协议需要到CA申请证书，一般免费证书很少，需要交费。
② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
如果网页是安全的，则会显示这样一条消息：This page is secure (valid HTTPS).。
通过点击View certificate可以查看main origin的服务器证书信息。
点击左侧可以查看指定源的连接和证书详情。
如果网页是不安全的，则会显示：This page is not secure.。
该面板可以区分两种类型的不安全的页面：
点击左侧则提供一个跳转到Network面板视图的链接信息。
中间人攻击(Man-in-the-Middle Attack,"MITM攻击")是一种“间接”的入侵攻击，这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机之间，这台计算机就称为“中间人”。
对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
选中Network Utilization、Web Page Performance，点击Run按钮，将会对当前页面进行网络利用率和页面的性能优化作出诊断，并给出相应的优化建议。
转自：
http://www.cnblogs.com/charliechu/p/6021141.html
https://developers.google.com/web/updates/2018/02/devtools#pretty-printing
https://bugs.chromium.org/p/chromium/issues/detail?id=785050
https://groups.google.com/forum/#!topic/google-chrome-developer-tools/6btEa32ISEA
https://developers.google.com/web/updates/2018/02/devtools#pretty-printing
