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

深碍√TFBOYSˉ_ 2022-11-25 10:10 364阅读 0赞

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

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

# #

## 什么是谷歌开发工具 ？ ##

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

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

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

`chrome://flags `

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70][]

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

## ##

### 打开 Chrome 开发工具 ###

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

**从浏览器菜单打开**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 1][]

**右键单击打开**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 2][]

**使用键盘快捷键打开**

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

*  **Mac：** `Cmd + Opt + I`
 *  **窗口：**或`F12``Ctrl + Shift + I`

# #

## 提示和技巧 ##

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

## ##

### 快速文件切换 ###

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

*  `Cmd + P`
 *  `Ctrl + P`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 3][] ###

### 打印 ###

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

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 4][] ###

### 编辑 HTML 元素 ###

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

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 5][] ###

### 编辑 CSS 属性 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 6][]

## ##

### 搜索源代码 ###

搜索源代码快捷键：

*  `Cmd + Opt + F`
 *  `Ctrl + Shift + F`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 7][]

## ##

### JavaScript 断点 ###

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

*  `Cmd + R`
 *  `Ctrl + R`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 8][] ###

## ##

### 转到行号 ###

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

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 9][] ###

## ##

### 多个光标 ###

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

*  `Cmd + Click`
 *  `Ctrl + Click`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 10][] ###

### Dock位置 ###

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

*  `Cmd + Shift + D`
 *  `Ctrl + Shift + D`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 11][] ###

### 清除Cookie ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 12][]

## ##

### 设备模式 ###

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

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

*  `Cmd + Shift + M`
 *  `Ctrl + Shift + M`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 13][] ###

### 调色板和选取器 ###

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

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 14][] ###

### 更改颜色格式 ###

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

*  `Shift + Click`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 15][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 16][] ###

### 切换元素状态 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 17][]

## ##

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 18][]

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAIAAADdvvtQAAAgNklEQVR42u2dd5gVZZbG

### `Network``Capture` ###

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

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

*  `Cmd + R`
 *  `Ctrl + R`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 19][] ###

### 监控性能 ###

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

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

*  `Cmd + E`
 *  `Ctrl + E`
 *  `Ctrl + R`
 *  `Cmd + R`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 20][]

## ##

### DOM 内容加载 ###

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

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

*  `Cmd + R`
 *  `Ctrl + R`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 21][] ###

### Throttling 网络限制配置文件 ###

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

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

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 22][] ###

### 安全检查 ###

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

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

*  `Cmd + R`
 *  `Ctrl + R`

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 23][] ###

## ##

### 验证谷歌 AMP HTML ###

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

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

# #

### 总结 ###

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

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

[StatCounter]: https://gs.statcounter.com/browser-market-share
[Chrome]: https://www.google.com/intl/en/chrome/canary/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70]: /images/20221124/e2cb9d50ed2a4244ac39c9dcf39cbfca.png
[Link 1]: https://developers.google.com/web/tools/chrome-devtools/shortcuts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 1]: /images/20221124/20d457b946aa4ca2b0f93cbf62e39bde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 2]: /images/20221124/f414090eda8f4e0cbb1bccf326b7a54f.png
[Link 2]: https://developers.google.com/web/tools/chrome-devtools/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 3]: /images/20221124/0a87b38cca35457d9c1a7e29ecbc10b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 4]: /images/20221124/8ce4b21177ed40af89a939becf06168d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 5]: /images/20221124/bed2cd908cb641e2858d6b0b64d9a144.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 6]: /images/20221124/dc92e1a730cd446faf0e7c5739fb01af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 7]: /images/20221124/59b40d129f47486196746f05489c05ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 8]: /images/20221124/9e3a3419a9f64616896726ed3f63ad45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 9]: /images/20221124/ffbea78dd9364070af2cbbfd28e6e15a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 10]: /images/20221124/f94f31e4e269493ca165f71d14df6212.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 11]: /images/20221124/93254f4836244de8a6feb61aaf9a2404.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 12]: /images/20221124/f4bb519db4964dd4907b935439df5fed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 13]: /images/20221124/c5e0e4937fcc464eb0f333591adc42a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 14]: /images/20221124/976543dbbe664f008a58ab2f888f1f2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200807200907821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 16]: /images/20221124/838960cb66aa47419e8b244f062e50d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 17]: /images/20221124/5144273352844964b1d207f3e8b6c6b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 18]: /images/20221124/a66828d5868545c58d9322bb4610b987.png
[FOIT_FOUT]: https://www.keycdn.com/blog/web-font-performance
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 19]: /images/20221124/8376f46fc84b45d3834711e3b53de648.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 20]: /images/20221124/f4ff009587d347a89c49148bc7988de7.png
[DOM]: https://www.keycdn.com/blog/blocking-the-dom
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 21]: /images/20221124/6c39a7643af84c95b96ef173728d619f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 22]: /images/20221124/c5d41ee1e31f4f46bb90bdc2284ab94c.png
[HTTPS]: https://www.keycdn.com/blog/http-to-https
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70 23]: /images/20221124/523d7ceb026a48e6b7a461d54377a82b.png
[Google AMP]: https://www.keycdn.com/blog/accelerated-mobile-pages
[AMP]: https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/
[DevTools]: https://developers.google.com/web/updates