技术指南

1.1.5.Properties

在Properties窗口中，展示了当前节点的所有方法和属性，并且由上至下为子节点到父节点，根据继承结构来排列。

1.2 Console

在Console面板中，显示了各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。具体来说，有如下两点功能：

输出诊断日志等各种信息，协助开发者调试页面

输入命令，在Inspector中产看各个文档中的信息

1.2.1.基本操作

打开方式

通过Ctrl + Shift + J或者是菜单栏打开Console，占用整个窗口。

事实上，Console更多用于调试JavaScript时使用，因此在Sources或者是其他的标签页中，也可以开启Console窗口。如下图所示，通过点击面板中右上角的【show drawer按钮】或者按下【Esc】键，即可在其他标签页开启的同时，在下方打开Console窗口。

清空Console窗口：clear() 或 console.clear()指令清空，或点左上角

选择Frame： 在Console窗口中，可以处理一个页面中不同的frame，其中则是对应着一个page中的main frame，而其他的子frame可以在下拉菜单中选择。在不同的frame中，可以进行更加具体的操作。

1.2.2.Console API

console.log()

该方法用于在控制台中输出指定变量或者表达式的值。也就等效于在C语言中的printf函数，便于开发者输出调试。如下例子：

此外，用于输出信息的有如下API：

console.log() 用于输出普通信息

console.info() 用于输出提示性信息

console.error() 用于输出错误信息

console.warn() 用于输出警告信息

console.debug() 用于输出调试信息

（注： Shift+Enter 实现在Console窗口换行输入命令）

其中，console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

console.assert()

与C++中的assert()函数相同，对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。

console.count()

较为使用的方法，统计目标代码被执行的次数。

console.dir()

直接将该DOM节点以DOM树的结构输出，并且可查看该对象中的方法。

console.time() console.timeEnd()

计时器，开始与结束。用法如下：

console.profile() console.profileEnd()

用户查看在这两个函数之间的代码，对CPU使用的相关信息。

可以在Profile面板中查看得到具体的数值。

用这两个API配合可以记录CPU使用情况，并在Porfile面板中显示。

$ [0 ~ 4]

$0~$4则代表了最近5个选择过的DOM节点，在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。

1.3 Resources

Resources面板中可以查看当前页面的数据资源，包括 IndexedDB, Web SQL databases, local and session storage, cookies, and Application Cache resource。最重要的是，在该面板中可以查看当前页面的实体资源，包括图片、字体、样式表、JavaScript等，下面主要介绍该部分，其余的资源同理。

开发者可以在Resources中查看到本页面所涉及的各类资源，目前该页面比较简单，只有单一的frame，如果页面有多个frame，则子frame会嵌套在Frames（main frame）下方。

字体和图片资源可以直接点击进行预览，在右键菜单中还有【在新窗口打开】和【在Network面板中展示】,可查看该资源的加载时刻和加载时长，在下一节中介绍。

1.4 1.4.Network

Network面板中记录了页面中的所有网络操作，包括具体的接收时长、HTTP请求和相应报头、cookies等等。通过该面板，可以知道某个页面中，哪些资源的加载时间最长、每个资源加载的时间顺序，最终了解到该页面每个阶段的网络表现情况。

Network面板会自动记录页面的网络活动，但是在首次打开时可能是空的，刷新网页可以激活该面板进行网络链接的记录。

面板上菜单栏中的按钮已经在图中注明，在此简要说明：

①该区域的四个按钮的功能分别是：开启网络记录状态 关闭网络记录；清理所有网络记录； 打开关闭区域②中的筛选菜单； 在Network内容窗口中以单行/双行的形式显示资源信息。

②该区域由按钮进行开关，主要是对当前页面的所有资源进行分类筛选。例如，点选了Images选项后，可在Network内容窗口中仅显示当前页面的所有图片资源，而不显示其他的文本资源等。

③该区域中指示了Network内容窗口中各项指标的类型，点击可按该类型排序

a)Name and Path 资源名称及其URL地址

b)Method HTTP请求的方法：GET 或 POST

c)Status and Text HTTP状态码及对应的信息

d)Type 请求资源的MIME类型

e)Initiator 发起网络请求的主体，点击链接可查看到发起连接的主体：

i.Parser HTML解析器

ii.Redirect HTTP重连

iii.Script 脚本

iv.Other 其他类型

f)Size and Content Size是响应报文的总大小，Content的资源解压后的大小。

g)Time and Latency Time是总持续时间，从开始发起请求到接收响应报文的最后一个字节的时长，Latency是加载首字节的时长

Timeline 展示时间序列，点击可选择 Start Time、Response Time、End Time、 Duation、Latency等参数，表示面板中的资源按该时间进行排

以上是比较通用的类型，在该菜单栏中右键，可以添加更多的类型。

点击具体的资源后，会出现该资源相关的详细信息，包括HTTP请求和响应报文头Headers、资源的预览Preview、HTTP响应Response、缓存Cookies、时间表Timing。

如上图所示各个项目，可以按照需要进行查看。着重需要了解下Timing中的各项详细信息，其中包含了在请求该资源时，需要经历的各种网络状态和流程，建议在调试页面资源加载相关的bug时，先了解发起请求后所要经历的各个网络状态以及工作，官网有简要说明，如下图：

1.5 Timeline

在Timeline面板中，可以观察页面中所有的活动，包括加载、运行脚本、排版以及绘制等工作，与Network中请求资源的响应时间Timing不同，应该区分开来。

点击左上角的开始和结束录制；清理所有记录；打开关闭筛选菜单，主要有如下四个基本的选项：Loading、Scripting、Rendering、Painting，每个类型对应不同的颜色，可以根据需要选择不同类型的浏览器活动。

在下方的窗口中，展示了在开始记录Timeline期间，浏览器的各项活动，包括请求资源、页面排版、事件响应、绘制页面等等，点击不同的项目，可以显示详细的信息，包括开始时间、持续时间，以及关于该项目的特定信息，比如在发起请求时候的项目中，显示了所请求资源的类型（url地址、gif图片、css文件等）。右边窗口则是每个事件对应的瀑布式流图。

1.6 Profiles

在Profiles面板中，提供了比Timeline中更为详细的信息，可以用来分析JavaScript的性能。有如下三个选项：Collect JavaScript CPU Profile，Take Heap Snapshot，Record Heap Allocations。

在Collect JavaScript CPU Profile中，可以展示在启动记录的过程中，各个时间段所执行的JS代码，以及经历的时长，并且能够以图表的方式展示各个代码之间的调用关系。

使用方式：点击左上角圆点开始记录，刷新页面重新加载，点击左上角圆点结束记录，即可展示该过程中的所有JS信息。

Snapshots则展示了JS对象与DOM树节点的关联。而Heap Allocation展示了每个JS对象被创建和存储的位置，以及在内存中的使用情况。更加详细的高级用法将在后续总结。

1.7 Audits

Audits译为审计，在Inspector可以对网页的网络利用情况、网页的性能进行分析，对前端开发者优化页面、加速网页加载速度十分有用。

勾选想要了解的项目后，选择run，即可开始自动统计分析当前网页。分析的结果包括：对个别网站资源本地缓存建议、优化样式代码等，甚至会统计出CSS样式中未被使用到的规则，建议删除。

Snapshots则展示了JS对象与DOM树节点的关联。而Heap Allocation展示了每个JS对象被创建和存储的位置，以及在内存中的使用情况。更加详细的高级用法将在后续总结。