Chrome开发工具基础教程

随着现代框架，ES6的出现以及日益增长的安全风险，了解如何使用Chrome开发工具可以极大地提高工作效率，并帮助您轻松诊断网站的性能。本文的目的是概述Chrome开发工具中的各种特性及其使用方法。这篇文章的大部分内容适用于Mozilla Firefox和Microsoft Edge等浏览器。本文根据Chrome 62版本的Chrome开发者工具的各个面板，分开详述。

打开Chrome开发工具，可以通过以下三种方法：

• 点击右上角（三个垂直点）——更多的工具——开发工具；
• 按Ctrl+Shift+I'（Windows，Linux）或'Command + Option + I'（Mac）；
• 右键单击网站上的一个元素并选择检查。

现在，我们将逐一深入研究每一个devtools面板：

Elements——自由地迭代站点的元素布局

开发中，经常需要修改和查看网页的DOM（文档对象模型）结构。Chrome开发工具中的元素面板可用于：

1. 查看页面的DOM Content；
2. 查看整个页面的DOM结构 和 HTML源码；
3. 编辑HTML/CSS，并实时查看最终的计算样式，在设计和测试原型更改时，这是非常重要的。

在左边的面板中，可以查看页面的HTMl源码以及他们在DOM树中的嵌套关系。这些元素可以被编辑，并在网页中实时看到效果。右侧的面板可以用来查看应用于所选择的DOM元素的样式，它可以选择性地启用/禁用，以查看特定样式的效果。我们还可以在计算部分中看到最终的计算样式，并应用样式。绑定到元素的事件监听器也可以在右侧面板中看到。元素面板中最常见的用途是检查屏幕上呈现的元素的HTML源码和DOM位置。在元素上右键点击并选择“检查“，浏览器会弹出检查面板，对应的HTML会高亮显示。 打开元素面板后，可以在元素上停留，来查看元素的盒模型参数。

image

通过在样式面板中选择“：hove”选项，可以检查应用的CSS的各个状态。

Device Toolbar-检查你网站的响应能力

对于构建响应式布局的网站，Chrome开发者工具有“切换设备工具栏”（在左上角）选项，可以用来查看不同分辨率屏幕下网站的实现效果。它还为iPhone、iPad和Nexus等移动设备提供了特定的窗口。

image

Sources-调试你的js代码

Sources是开发中使用最频繁的面板，它可用于分析、调试和编辑网站的Javascript、HTML和CSS代码。Sources面板根据域名来管理网站所需的各种资源。压缩文件可以通过”pretty print button“按钮进行快速格式化。请查看下图，来更加直观得了解快速格式化的用法。

image

可以在Sources面板中直接编辑代码。

image

Sources面板包含一个内置的调试器，可以给Js代码打断点，并可在断点处，利用控制台打印上下文的各种变量值。通过Source maps可以轻松把压缩文件或合并后的文件，映射到源文件，来进行调试。你可以像在传统的Debugger中一样，进行step in, step out; step over等调试操作。更多功能还包括：

• 在任意的异常中启用断点；
• 查看调用堆栈；
• 添加各种类型的断点，如事件侦听器断点（如click）或DOM断点（如修改DOM树）。（在Chrome开发者工具里，选中想要监控的DOM元素，点击右键，选择Break on->Attributes modifications，可以打DOM断点）

image

Audits-最佳实践测试

Audits面板可以用于检测影响网站性能、可访问性和用户体验的常见问题和难点。Audits面板使用谷歌的lighthouse项目作为服务端。通常的检测包括web应用标准、性能指标、最佳实践和可访问性问题。只需进入Audits面板，选择所需要进行的检测选项，并点击”Run audits“即可获得分析报告。

image

Network-优化页面加载性能和调试页面请求

Network面板可以监控网站发出的所有请求，并将响应主体、响应头以及请求参数、请求头记录在每个请求中。通过请求类型或者域名可以过滤请求。Network是查看失败请求信息的首要位置。失败的请求会被标注为红色，并带有HTTP状态码。如果是POST请求，可以看到请求的表单数据。

Network面板更多介绍：

• Cookies 可以用来检查发送请求的cookies，并由响应设置的cookies；
• Timing 显示请求的时间统计数据，可用于性能诊断；

其他特性还有：

• 以3g/4g或较慢的连接速度 网站进行测试；
• 以离线模式运行；
• 禁用请求缓存；
• 在页面请求中，获取屏幕截图

image

右键单击一个感兴趣的网络请求，并选择复制该请求的选项之一。最常用的选项是拷贝，你可以用它来获得类似于请求的cURL，并在终端中运行它。

Application-管理网站的资源

Application面板用于管理网站加载的各种资源，包括cookie、localStroge、application cache、图片、字体、样式脚本、serviceWorkers、Session Stroge、WebSQL 和IndexedDB等。可以对资源进行查看、设置、清空等操作。以组合和独立的方式显示资源所占硬盘空间。使用Application面板可以轻松完成以下任务：

• 使用Manifest面板检查和出发Manifest缓存列表；
• service worker用于执行服务端相关操作，如未注册、停止、脱机等；
• 服务端相关缓存可以通过Cache Storage面板查看；
• Clear Storage可以用来清空所有的存储、缓存和服务；
• Frames 可以根据框架过滤管理资源；
• 查看和编辑各种资源和数据库；
• 在Web SQL database执行SQL语句

image

Memory-跟踪内存泄漏

使用memory面板可以发现一些影响页面性能的问题，包括内存泄露和代码冗余。memory面板提供了三种不同的分析：

• Heap Snapshot（堆跟踪）：可以用来获取堆的快照，这显示了网站的JavaScript对象和DOM节点之间的内存分布。可以用来找到分离的DOM树，有可能会导致内存泄漏。红色突出显示的节点在代码中没有被直接引用，而黄色的节点有直接引用。红色的是活动的，因为它们是黄色结点树的一部分。我们需要关注黄色节点。确保，黄色节点的生命周期不会超过它所需要的时间。
• Record Allocation Timeline （记录内存分配信息时间轴）：这段记录有助于追踪网站JS堆中的内存泄漏。开启记录，执行你怀疑内存泄漏的操作，然后按停止记录。记录中的蓝条代表了新的内存分配。这些都是内存泄漏的可能候选者，可以放大以过滤面板，然后可以在object窗口中查看特定的对象。

image

• Record Allocation Profiles（从JS函数角度记录内存的分配信息）：这显示了JavaScript函数的内存分配。与时间轴类似，您可以用您想要调查的动作记录概要文件。Devtool将显示每个函数的内存分配。然后，您可以研究那些似乎是内存使用的罪魁祸首的函数。

image

Performance-提高页面运行性能

Performance面板允许我们分析应用程序的JavaScript的运行时性能。记录在一个页面的生命周期中发生的各种事件，并显示每个事件花费的时间。一旦选中了截图复选框，我们就可以从捕捉设置中使用网络和CPU节流选项来模拟我们的网站在移动设备上的性能。使用记录按钮开始记录，将开始对网站的各种生命周期事件进行分析。几秒钟后，点击停止将显示每个事件的结果和时间。分析每一个图表，以了解网站的哪些部分是有差强人意的性能。在每个图表上停留的时间会显示页面的屏幕截图。这些记录也可以通过使用鼠标来重现。

image

Security-检查常见的安全问题

这个相对较新的面板允许你测试你的网站，以获得最常见的安全措施。对不同资源的所有来源都进行了有效的SSL证书、安全连接、安全资源和其他东西的测试。根据不安全/安全，可以很容易地跟踪问题，从而进一步，将来源过滤成不同的类别。只要打开Devtool，选择这个面板，重新加载你的网站就可以进行分析。以后，可能会添加更多的安全工具。

image

Console-日志信息

控制台面板可以被认为是一个实验性的游乐场。在这里可以运行任何种类的JavaScript代码，可以访问全局变量。控制台面板也可以作为所有类型的错误（网络和源代码相关的）的日志记录器，并将它们全部显示在一个地方，并将其显示在错误发生的源代码中。此外，在调试控制台面板时，可以打开检查当前断点处局部变量的值。控制台面板公开了一个对象“控制台”，它可以用于以不同的格式记录信息。

image

扩展

Chrome开发人员工具可以很容易进行扩展，并添加为新的面板。例如，流行的devtools扩展包括AngularJS的扩展，反应。请参阅Google开发者网站上关于扩展devtools以获得更多信息的文章。

由于具有丰富的提高生产力和易于调试的特性和功能，Chrome开发工具已经成为任何前端开发人员或网站安全研究人员的必知的工具。虽然简单，使用高效的UI和用户体验，使它成为任何类型的操作、分析、内存诊断和JavaScript调试的首选工具。为了进一步阅读和深入的文章，建议阅读谷歌的Chrome DevTools网站上教程：https://developers.google.com/web/tools/chrome-devtools/，每个面板都详细地解释。

一些图片是在谷歌开发者网站上获得的，这些图片是根据知识共享署名3.0许可授权的。