你不知道的 20+ Chrome Devtools 技巧！

你不知道的 20+ Chrome Devtools 技巧！

 

 

谷歌Chrome是目前开发者使用的最流行的网络浏览器之一。根据StatCounter的统计，截至2019年9月，谷歌Chrome浏览器在全球拥有63.72%的浏览器市场份额。Chrome DevTools 可帮助您在浏览器中开发、测试和调试网站，从而极大地改善您的工作流程。你们许多人可能定期使用ChromeDevTools，但请查看这些额外的提示和技巧，以提高您的工作效率。

 

什么是谷歌开发工具 ？

 

Chrome Devtools 即 谷歌Chrome浏览器开发工具，也称为Chrome开发工具，是内置于浏览器中的网络创作和调试工具。它们为开发人员提供了更深入的 Web 应用程序和浏览器访问。您可以执行从在移动设备上测试视口到对网站进行在线编辑，甚至测量整个网站或单个资产的性能等所有操作。

要使用最新版本的开发人员工具，您可能需要使用Chrome 金丝雀，这是每晚更新的 Chrome 的实验版本。Chrome 金丝雀可以与 Chrome 并排运行，以便您可以检查可能出现的任何问题。

您可以通过访问并启用该功能来增强开发。然后，您可以使用开发人员工具中的设置面板切换单个实验。

chrome://flags 

我们将在下面提及一些ChromeDevTools键盘快捷键，但你可以在谷歌开发者网站上看到它们的完整列表。

 

打开 Chrome 开发工具

 

有几种方法可以打开 Chrome DevTools，这意味着您可以使用最适合您的方法。

 

从浏览器菜单打开

 

您可以在 Chrome 菜单中打开 Chrome 开发工具。转到，然后单击 。

右键单击打开

 

您也可以从右键单击菜单打开 Chrome DevTools。右键单击任何页面元素，然后单击 Inspect/检查。

 

使用键盘快捷键打开

 

您也可以使用以下快捷方式：

• Mac： Cmd + Opt + I
• 窗口：或F12Ctrl + Shift + I

 

提示和技巧

 

以下列出了你可以使用ChromeDevTools所做的很多事情中的一些。如果你以前没有使用过工具，它会是一个很好的课程。

 

快速文件切换

 

当 Chrome DevTools 打开并搜索名称时，您可以通过来轻松访问当前项目或网页中的任何文件。

• Cmd + P
• Ctrl + P

 

打印

 

您是否知道 Chrome DevTools 内置了漂亮的打印功能？您可以通过单击轻松更改最小化代码的格式。

 

编辑 HTML 元素

 

您可以通过选择任何元素、在面板中选择 DOM 元素以及双击打开标记进行编辑来实时编辑 HTML 并预览更改。结束标记会自动更新。任何更改都会在浏览器中显示，就像对源代码进行了实际更改一样。

 

编辑 CSS 属性

 

就像编辑 HTML 一样，您还可以在 Chrome DevTools 中更改 CSS 并预览结果。这可能是此工具最常见的用途之一。只需选择要编辑的元素，在样式面板下即可添加/更改任何您想要的 CSS 属性。

 

搜索源代码

搜索源代码快捷键：

• Cmd + Opt + F
• Ctrl + Shift + F

 

 

 

JavaScript 断点

在调试 JavaScript 时，设置断点有时很有用。您可以通过单击要中断的行号，然后按 （CMD/CTRL + R） 刷新页面，在 Chrome DevTools 中设置断点。然后，该页将运行到该断点。

• Cmd + R
• Ctrl + R

 

转到行号

 

您可以通过按 （Cmd/Ctrl + O） 并使用行语法自动跳到代码中的行。在下面的示例中，我们输入到第 375 行，第 18 列。

 

多个光标

 

有没有多行，你需要添加的东西？您可以通过同时按 （Cmd/Ctrl + Click） 和在多行上输入信息来轻松添加多个游标。

• Cmd + Click
• Ctrl + Click

 

Dock位置

 

您还可以更改 Chrome 开发工具停靠位置。您可以取消停靠到单独的窗口中，也可以将窗口停靠在浏览器的左侧、底部或右侧。可以通过一下快捷键 或通过菜单更改坞站位置。

• Cmd + Shift + D
• Ctrl + Shift + D

 

清除Cookie

 

您还可以轻松地清除 Chrome 开发工具中的 Cookie。这在测试和调试第三方插件时特别有用。在面板中，转到 存储 > Cookie 以清除所有 Cookie 或单个 Cookie。

 

 

设备模式

您可以测试您的网站和媒体查询，以查看您的响应式设计是否通过进入设备模式而中断。或者，您可能需要查看页面的分辨率，以便知道在哪里应用媒体查询。

要进入设备模式，请单击 Chrome DevTools 或按 （） 中的小型手机和平板电脑图标。然后，您可以选择要模拟的设备和分辨率、添加网络限制，甚至定义设备方向。

• Cmd + Shift + M
• Ctrl + Shift + M

 

调色板和选取器

自定义调色板将从网站样式表中拉取。只需单击样式面板中的颜色块即可访问它们。还有一个颜色选取器，可用于直接从网页中挑选颜色。

 

更改颜色格式

 

您可以通过按颜色块在 RGBA、HSL 和十六进制格式之间切换。

• Shift + Click

 

切换元素状态

 

你有没有试图弄清楚一个隐藏的风格从何而来，说选择器？在 Firefox 开发人员工具中，您可以在选择元素时看到这一点，但在 Chrome DevTools 中看不到。但是，还有更好的东西，称为切换元素状态。这允许您强制元素状态（如 ，以便可以使用样式面板查看属性）。

 

 

将图像复制为数据 URI（基础 64 编码）

 

您可以将网页上的任何图像保存为数据 URI，或者更确切地说，将 base64 编码。无需使用免费的在线转换器，因为它已经内置于 Chrome DevTools 中。在面板中单击图像，然后右键单击它以选择 。NetworkCopy image as data URI

您将以以下格式获取图像：

您将以以下格式获取图像：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAIAAADdvvtQAAAgNklEQVR42u2dd5gVZZbG

 

NetworkCapture

NetworkCapture功能允许您在整个加载过程中抓取屏幕截图，查看页面从头到尾的渲染方式。这可能是一个伟大的方式，看看你的字体是如何呈现，如果你正在处理的问题，如FOIT或FOUT。

在面板中单击设置图标，选中该选项，然后按 （） 刷新页面。刷新页面后，将显示页面从头到尾呈现方式。

• Cmd + R
• Ctrl + R

 

监控性能

性能功能使您能够轻松查看花费最多时间和资源的成本。性能详细信息可以通过许多不同的方式进行细分，例如时间、活动和源。

在面板中，按 （） 然后 （） 刷新页面。记录要监视的时间量。然后，您可以单击并评估结果。Performance

• Cmd + E
• Ctrl + E
• Ctrl + R
• Cmd + R

 

DOM 内容加载

我们有一篇关于阻止DOM 以及如何修复它的文章。此功能允许您查看确切的 DOMContent 加载时间和总加载时间。检查这些值对提高网站或应用程序的整体性能有帮助。

在面板中单击设置图标，选中该选项，然后按 （） 刷新页面。将显示一条蓝线，用于 DOMContent 加载，而显示总加载时间为红线。通常，所留下的或接触蓝线的所有内容都是阻塞 DOM 的资产，或者也称为渲染阻塞资源。

• Cmd + R
• Ctrl + R

 

Throttling 网络限制配置文件

现在，您还可以添加自定义网络限制配置文件。如果您想要以特定速度更准确地进行测试，这可能是有益的。

在面板中单击"节气门"下拉，然后。在"网络限制配置文件"中，单击并添加符合您的规范的配置文件。

 

安全检查

安全面板对于检查 SSL/TLS 证书是否有效、连接是否安全以及是否安全地提供所有资源非常有用。这非常适合调试HTTPS 迁移和快速修复混合内容警告。

在面板中，按 Cmd/Ctrl + R 刷新页面。然后，它将显示相关的安全信息。

• Cmd + R
• Ctrl + R

 

验证谷歌 AMP HTML

Google AMP是一项开源计划，旨在使用轻量级 HTML 页面加快网络速度。对于 Google 将网页的 AMP 版本编制索引，您必须确保该版本已验证。

在面板中，附加到浏览器地址栏中的 AMP 版本，然后按 （） 刷新页面。如果下面成功验证，它将显示。阅读有关AMP 验证错误的任何信息。

 

 

总结

如您所看到的，Chrome DevTools 具有多种功能，可帮助您更好地开发、更快地调试，并更高效地衡量您的网站或应用程序的性能。上面提到的提示只是众多可用功能的一部分。您有我们错过的最喜欢的 DevTools 功能吗？如果是这样，请让我们在下面的评论中知道。

• 在谷歌开发者官方页面上详细了解Chrome开发工具。
• 订阅其网页更新页面上的 Chrome DevTools更新。