你不知道的 20+ Chrome Devtools 技巧！
谷歌Chrome是目前开发者使用的最流行的网络浏览器之一。根据StatCounter的统计，截至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 + PCtrl + P
打印
您是否知道 Chrome DevTools 内置了漂亮的打印功能？您可以通过单击轻松更改最小化代码的格式。
编辑 HTML 元素
您可以通过选择任何元素、在面板中选择 DOM 元素以及双击打开标记进行编辑来实时编辑 HTML 并预览更改。结束标记会自动更新。任何更改都会在浏览器中显示，就像对源代码进行了实际更改一样。
编辑 CSS 属性
就像编辑 HTML 一样，您还可以在 Chrome DevTools 中更改 CSS 并预览结果。这可能是此工具最常见的用途之一。只需选择要编辑的元素，在样式面板下即可添加/更改任何您想要的 CSS 属性。
搜索源代码
搜索源代码快捷键：
Cmd + Opt + FCtrl + Shift + F
JavaScript 断点
在调试 JavaScript 时，设置断点有时很有用。您可以通过单击要中断的行号，然后按 （CMD/CTRL + R） 刷新页面，在 Chrome DevTools 中设置断点。然后，该页将运行到该断点。
Cmd + RCtrl + R
转到行号
您可以通过按 （Cmd/Ctrl + O） 并使用行语法自动跳到代码中的行。在下面的示例中，我们输入到第 375 行，第 18 列。
多个光标
有没有多行，你需要添加的东西？您可以通过同时按 （Cmd/Ctrl+ Click） 和在多行上输入信息来轻松添加多个游标。
Cmd + ClickCtrl + Click
Dock位置
您还可以更改 Chrome 开发工具停靠位置。您可以取消停靠到单独的窗口中，也可以将窗口停靠在浏览器的左侧、底部或右侧。可以通过一下快捷键或通过菜单更改坞站位置。
Cmd + Shift + DCtrl + Shift + D
清除Cookie
您还可以轻松地清除 Chrome 开发工具中的 Cookie。这在测试和调试第三方插件时特别有用。在面板中，转到 存储 > Cookie 以清除所有 Cookie 或单个 Cookie。
设备模式
您可以测试您的网站和媒体查询，以查看您的响应式设计是否通过进入设备模式而中断。或者，您可能需要查看页面的分辨率，以便知道在哪里应用媒体查询。
要进入设备模式，请单击 Chrome DevTools 或按 （） 中的小型手机和平板电脑图标。然后，您可以选择要模拟的设备和分辨率、添加网络限制，甚至定义设备方向。
Cmd + Shift + MCtrl + 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 + RCtrl + R
监控性能
性能功能使您能够轻松查看花费最多时间和资源的成本。性能详细信息可以通过许多不同的方式进行细分，例如时间、活动和源。
在面板中，按 （） 然后 （） 刷新页面。记录要监视的时间量。然后，您可以单击并评估结果。Performance
Cmd + ECtrl + ECtrl + RCmd + R
DOM 内容加载
我们有一篇关于阻止DOM 以及如何修复它的文章。此功能允许您查看确切的 DOMContent 加载时间和总加载时间。检查这些值对提高网站或应用程序的整体性能有帮助。
在面板中单击设置图标，选中该选项，然后按 （） 刷新页面。将显示一条蓝线，用于 DOMContent 加载，而显示总加载时间为红线。通常，所留下的或接触蓝线的所有内容都是阻塞 DOM 的资产，或者也称为渲染阻塞资源。
Cmd + RCtrl + R
Throttling 网络限制配置文件
现在，您还可以添加自定义网络限制配置文件。如果您想要以特定速度更准确地进行测试，这可能是有益的。
在面板中单击"节气门"下拉，然后。在"网络限制配置文件"中，单击并添加符合您的规范的配置文件。
安全检查
安全面板对于检查 SSL/TLS 证书是否有效、连接是否安全以及是否安全地提供所有资源非常有用。这非常适合调试HTTPS 迁移和快速修复混合内容警告。
在面板中，按 Cmd/Ctrl + R 刷新页面。然后，它将显示相关的安全信息。
Cmd + RCtrl + R
验证谷歌 AMP HTML
Google AMP是一项开源计划，旨在使用轻量级 HTML 页面加快网络速度。对于 Google 将网页的 AMP 版本编制索引，您必须确保该版本已验证。
在面板中，附加到浏览器地址栏中的 AMP 版本，然后按 （） 刷新页面。如果下面成功验证，它将显示。阅读有关AMP 验证错误的任何信息。
总结
如您所看到的，Chrome DevTools 具有多种功能，可帮助您更好地开发、更快地调试，并更高效地衡量您的网站或应用程序的性能。上面提到的提示只是众多可用功能的一部分。您有我们错过的最喜欢的 DevTools 功能吗？如果是这样，请让我们在下面的评论中知道。
在谷歌开发者官方页面上详细了解Chrome开发工具。订阅其网页更新页面上的 ChromeDevTools更新。
