为什么你应该立即开始使用 Chrome 开发者工具

拥有一套方便的工具来帮助测试您的网站对于开发人员来说至关重要。 把它们放在哪里最好？ 当然，在您的浏览器中！ Google 流行的网络浏览器 Chrome 内置了开发人员工具。这是一组用于网络创作和调试的工具。 Chrome 开发人员工具（称为 DevTools）使开发人员能够访问网络浏览器和网络应用程序的内部工作。

使用 Chrome DevTools 可以知道使用的样式、图像的大小、使用的脚本等。您可以调试并知道页面上存在哪些错误。 您甚至可以打开或关闭样式，或完全更改它们，以查看它对您网站的影响。

它在您的浏览器中

工具本身很容易获得。 以下是三种打开方式：

1. 在您的 Chrome 浏览器中 - 选择 Chrome 菜单（右上角的三个水平条），选择更多工具，然后选择开发人员工具。
2. 右键单击任何页面上的元素，然后选择“检查元素”。
3. 在 Windows 的键盘上选择 ctrl + shift + i。 在 Mac 上选择 cmnd + opt + i。

其中任何一个都将打开浏览器底部的 DevTools 窗口。

主窗口

工具出现在屏幕底部。 您将看到一个主窗口，顶部菜单和元素作为默认视图，以及一个带有菜单和样式的辅助窗口作为默认选择。

这些工具被分组到任务中。 有 8 个组，包括元素、网络、来源、时间线、配置文件、资源、审计和控制台。

元素

您可以在此处查看页面的 HTML 结构。 HTML 和正文的底部有一个切换按钮。 您可以将鼠标悬停在任何元素上以查看有关每个元素的详细信息。

您可以单击箭头来打开和关闭主要元素的内容，以便于阅读。 因此，您可以关闭正文并只阅读标题，选择标题中的元素进行查看等。这是查看您网站的 HTML 的绝佳工具。

网络

这显示了将要加载的每个元素、它们是如何加载的、它是文件的类型、文件的大小、加载所需的时间以及在页面加载序列中加载的时间线。 这可用于解决网络问题，例如页面加载瓶颈和错误请求。

例如，如果您看到大量 404 错误，则可以仔细查看问题所在。 也许您已经删除了一个仍然获得大量流量的页面，或者也许有人输入了错误的链接。

来源

这将显示将加载的脚本和片段以及它们来自何处。

时间线

这会显示每个资源的加载时间。 您可以看到什么花费的时间最多，这有助于减少页面加载。

简介

这显示了每个元素的内存使用情况。 这非常适合向您展示哪些代码需要优化。

资源

您可以在此处检查加载的资源。 您可以查看 cookie、应用程序缓存、HTML5 数据库等。

审计

这使您可以分析页面。 您可以在加载后或加载时进行审核。

审计现状

首先，我选择运行 Audit Present State。 这会在站点当前所在的位置运行审核，该站点已加载到我的浏览器中。

它给了我一个项目列表，根据它们的重要性给它们着色，并显示问题的数量。 我可以通过单击它们来查看更多详细信息。

我已经扩展了其中的几个以查看有关每个的详细信息。 它为我提供了有关网络利用率和网页性能的信息。 它为我提供了有关如何解决问题的建议，并为我确定了它们的优先级。

重新加载页面并在加载时进行审核

我回去并选择进行负载审核。 结果是相似的，但正如预期的那样，加载页面时比加载页面后出现更多问题。

在这两者之间，我获得了有关 JavaScript、浏览器缓存、代理缓存、cookie 大小、从无 cookie 域提供内容、图像尺寸、脚本的顺序和样式、将 CSS 放置在文档头部、删除未使用的 CSS 规则和使用普通 CSS 的信息属性名称。 当然，结果会因网站而异。

该信息不如 PageSpeed Insights 详细，但足以让我入门，而且我喜欢它内置于我正在使用的工具中的便利性。 我建议您每次对站点进行更改时都运行它。 太容易使用了，不使用它。

安慰

这是 JavaScript 控制台，您可以在其中测试页面和应用程序。 您可以调试脚本并获得有关要进行哪些更改的建议。 控制台允许您输入命令，以便您可以与网页进行交互。 它将记录诊断信息以帮助您进行调试。 您可以在主屏幕或抽屉（主屏幕下的窗口）中使用它。

您可以使用控制台或命令行 API。 您可以写入控制台、格式化元素和样式输出、测量执行或加载时间、查看和标记时间线、计算语句、设置断点、评估表达式、监视事件、堆栈消息、查看错误和警告等等更多的。

这是一个强大的工具，但使用它有很多好处。 幸运的是，提供了很好的参考资料以及如何使用它的示例。

调试

在 Windows 中选择 ctrl + p 或在 Mac 上选择 cmd + p 将打开调试屏幕，您可以在其中选择要调试的脚本。 该工具为您提供了您希望在任何编程环境中看到的调试功能：暂停、继续、单步执行、单步执行、断点、格式化代码等。

提供了详细的帮助文件以指导您使用调试模式。

CSS 样式窗口

最右侧的框包含所有 CSS 信息。 当您选择一个元素时，右侧的“样式”窗口会显示该元素的样式信息。 这部分很有趣。 有五组工具：样式、计算、事件侦听器、DOM 断点和属性。

样式

您可以在此窗口中选择样式并手动更改它们。 例如，您可以选择字体大小和颜色。

选择字体大小并输入您自己的大小。 当您这样做时，您选择的字体的字体大小将在屏幕上更改。

在字体颜色上进行选择将打开颜色选择器。 选择你想要的颜色并按回车键。 您将看到您选择的字体更改为新颜色。 这是尝试新字体样式、大小和颜色的好方法。

如果您单击右侧的 site.CSS，您将打开一个更大的窗口，其中包含详细信息。 在这里，您可以输入要使用的字体名称、指定颜色、指定大小等。

计算

这显示了以像素为单位的框大小。 它有填充、边框和边距。

设备模式

在放大镜和看起来像移动设备的元素菜单之间的左侧有一个小按钮。 你猜怎么着？ 它是一种移动设备。 这是设备仿真模式。 这是查看您的网站响应速度的好方法。

设备

比仅作为移动设备更酷的是，您可以选择它是哪种移动设备，然后您可以像在该设备上查看网站一样查看网站。 现在，太棒了！

我选择了 Amazon Kindle Fire HDX 7”，屏幕模仿了该设备，因此我可以看到网站在其屏幕上的外观以及触摸的工作方式。

您可以通过点击“交换尺寸”按钮来更改屏幕的方向。

这是在较小的移动屏幕上查看 WordPress 网站外观的好方法。 我选择了 iPhone 6，屏幕尺寸改变以匹配新的屏幕尺寸和分辨率。 有很多设备可以查看。 您还可以通过拖动边来增大或减小尺寸来查看自定义尺寸。

网络

还有一个选项可以选择您访问站点的网络类型。 这使您可以通过各种连接类型和速度查看网站的性能。 您可以测试从 50 Kbps GPRS 到 30 Mbps WiFi 的多种速度，以及多种 2G、3G 和 4G 连接速度。 这是通过有问题的网络测试网站速度并了解需要改进的地方的绝佳方式。

媒体查询

左上角有一个小按钮，看起来像楼梯。 它会在网站窗口上方打开另一部分屏幕，显示不同的像素宽度。 单击它们会使移动屏幕达到该大小。 他们向您展示：

• 以最大宽度为目标的查询
• 范围内的宽度
• 以最小宽度为目标的查询

这有助于您调整样式和媒体内容以实现完全响应式设计。

抽屉

主屏幕下还有另一部分工具称为抽屉。 这补充说：

控制台– 这与主窗口中的控制台相同。 通过将其放置在这里，您可以将其与主窗口中的任何工具一起使用。

搜索- 允许您搜索来源。

仿真——您可以选择设备（在这里您可以选择型号、分辨率、网络等）、媒体、网络（吞吐量和用户代理）和传感器（触摸屏、加速度计等）。

渲染– 显示绘制矩形、合成图层边框、FPS 表、连续页面重绘和潜在的滚动瓶颈。

设置等

右侧的菜单栏会告诉您站点上的错误和警告数量，允许您隐藏底部的抽屉，让您调整设置，并将工具停靠到主窗口（在之间创建分屏）您的网站和 DevTools）。

您可以调整大量设置，以便您可以修改工具以按照您需要的方式工作。

铬金丝雀

如果您真的想走在 Google Chrome DevTools 的前沿，那就试试 Chrome Canary。 它的图标是黄色的。 得到它？ 它需要披风。 这是来自 Google 的最新和最伟大的产品。 它专为开发人员设计，拥有最新版本的 DevTools。 它对于一般用途来说还不够稳定，因此它可能会破坏您的系统。

如果您在系统崩溃时容易对环境造成严重破坏，请查看上图中的 Chrome Canary 图标，并且不要闪烁五秒钟。

现在你可以继续到最后。 你不会记得这部分。

包起来

谷歌浏览器的开发者工具是一个很好的工具，用于排除故障、提高网络性能、在不同的屏幕尺寸和分辨率上查看您的网站，以及获取有关您的网站需要改进的地方的信息。 有很多功能，您可以通过扩展添加更多功能。 这些工具本身就是安装 Google Chrome 的一个很好的理由，即使它不是您的主要浏览器。 花时间学习这些功能会有所回报，您的网站和访问者会为此感谢您。

轮到你了！ 你使用 Chrome 开发者工具吗？ 我是否遗漏了您最喜欢的功能？ 你有什么要补充的吗？ 我想在下面的评论中听到它！

Anikei/shutterstock.com 的文章缩略图