[转]Tips——Chrome DevTools - 25 Tips and Tricks

Chrome DevTools - 25 Tips and Tricks

原文地址：https://www.keycdn.com/blog/chrome-devtools

如何打开？

1.从浏览器菜单打开

2.通过右键单击打开

3.使用键盘快捷键打开

• Windows: F12 or also Ctrl + Shift + I
• Mac: Cmd + Opt + I

技巧和窍门

1.快速文件切换

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

2.漂亮的打印{}

Chrome DevTools内置了漂亮的打印功能，您可以通过单击{}来轻松更改最小化代码的格式，这将返回到普通视图，以便您轻松完成。

3.编辑HTML元素

您可以通过选择任何元素，在面板中选择DOM元素，然后双击开始标记进行编辑来动态编辑HTML /预览更改。结束标记会自动为您更新。任何更改都将显示在您的浏览器中，就好像实际上已对源代码进行了更改一样。

4.编辑CSS属性

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

5.在源代码中搜索

您可以按Ctrl + Shift + F（Cmd + Opt + F）快速搜索源代码。也可以是Ctrl + F（Cmd + F）。

6.JavaScript断点

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

7.跳到行号

您可以通过按Ctrl + O（Cmd + O）并使用行语法自动跳到代码中的一行。在下面的示例中，我们键入“：200：10”并按Enter键转到第200行第10列。

8.多个光标

您需要添加多条线路吗？也许你想将font-size添加到几个类中。您可以通过按Ctrl +单击（Cmd +单击）并同时在多行上输入信息来轻松添加多个游标。这是一个非常方便的技巧。

9.更改DevTools停靠位置

您还可以更改Chrome DevTools的停靠位置。有三个选项可供选择：Bottom，Side和Undocked（浮动）。要在停靠位置之间切换，您可以按Ctrl + Shift + D（Cmd + Shift + D）。然后右上角还有一个对接面板。

10.清除Cookies

您还可以使用Chrome DevTools轻松清除Cookie。在测试和调试第三方插件时，这尤其有用。只需单击“资源”选项卡，然后在Cookie下右键单击并删除当前存储在浏览器中的任何cookie。

11.设备模式

您可以测试您的网站和媒体查询，并通过进入设备模式查看您的响应式设计是否在任何地方破坏。或者您可能需要查看页面的分辨率，以便了解应用媒体查询的位置。要进入设备模式，请单击Chrome DevTools中的小手机图标，或者按Ctrl + Shift + M（Cmd + Shift + M）。然后，您可以选择要模拟的设备，方向，甚至分辨率。您还可以更改网络限制，以查看您的网站实际呈现如何定期2G连接。

12.自定义调色板和拾色器

在谷歌C​​hrome Canary中，他们推出了新的自定义调色板和材料调色板，这些调色板和材料调色板可以从您网站的CSS中获取。只需单击样式面板中的颜色块即可访问它们。您还可以使用颜色选择器从网页中挑选颜色。

13.更改颜色格式

您可以通过按住Shift +单击颜色块在RGBA，HSL和十六进制格式之间切换。

14.设备仿真传感器

Chrome DevTools的一个很酷的功能是你甚至可以模拟触摸屏和加速器。要执行此操作，请单击“控制台”，“仿真”和“传感器”。

15.切换元素状态

您是否试图找出隐藏风格的来源，比如：hover属性？在Firefox中，他们的开发工具可让您在选择元素时看到这一点，但在Chrome DevTools中却看不到。但是，有一些更好的东西，称为切换元素状态。这允许您强制元素状态：悬停，以便您可以使用样式面板查看属性。

16.将图像复制为数据URI（base64编码）

您可以将任何图像从网页中保存为数据URI，或者更确切地说是base64编码。没有必要使用免费的在线转换器，因为它已经内置在Chrome DevTools中。要执行此操作，只需单击“网络”面板，单击图像，然后右键单击它并选择“将图像复制为数据URL”。然后，您将以下列格式获取图像：“URURIsdata：image / png; base64，iVBORw0KGgoAAAANSUhEUgAABAAAAAFt ......”

17.显示用户代理Shadow DOM

当您处理按钮和输入等内容时，Web浏览器通常会构建隐藏属性。要通过按F1（？）来查看这些单击设置，您可以启用“显示用户代理DOM”。正如您在示例中所看到的，我们现在能够看到正在构造的＃shadow-root div。您甚至可以更进一步，并将CSS样式应用于隐藏属性。

18.选择下一个出现次数

Chrome DevTools可让您轻松选择下一个匹配项，然后同时应用更改。要执行此操作，只需双击要编辑的内容，然后对要选择的每个事件按Ctrl + D（Cmd + D），然后在键入时将同时更改所有这些内容。

19.工作区

Chrome DevTools的一个非常强大的功能是工作空间。默认情况下，当您更改开发人员工具中的内容时，它们会在您刷新页面后消失。这适用于此处和那里的小调整，但工作区实际上允许您通过将这些更改保存到磁盘来保留这些更改。要执行此操作，请右键单击文件夹并选择“将文件夹添加到本地工作区”。然后使其保持不变，右键单击文件并选择“映射到文件系统资源...”

20.网络电影胶片

网络幻灯片功能允许您通过在整个加载过程中抓取屏幕截图来查看页面从开始到结束的呈现方式。这可以是查看字体呈现方式以及处理FOIT或FOUT等问题的好方法。要执行此操作，请单击“网络”面板，单击相机图标，然后按Ctrl + R（Cmd + R）刷新页面。然后它会显示您的页面从开始到结束的呈现方式。

21.监控网络性能

通过最新的开发人员工具更新，他们在瀑布时间轴中添加了聚合详细信息面板。这使您可以更轻松地查看最耗费成本的时间，然后您可以按域，子域等细分。要运行此单击，请单击“时间轴”面板，然后按Ctrl + R（Cmd + R）刷新页面。然后，您可以单击“摘要”面板和“聚合”详细信息面板。

22.DOMContentLoaded

关于什么阻止DOM以及如何解决它，我们有一个很好的帖子。在开发人员工具中，您可以准确地看到DOMContentLoaded时间和总加载时间。要运行此单击进入“网络”面板，请单击“显示概述”选项，然后按Ctrl + R（Cmd + R）刷新页面。将显示DOMContentLoaded的蓝线和总加载时间的红线。通常，留下或触及蓝线的所有内容都是阻塞DOM的资产，或者也称为渲染阻止资源。

23.网络限制配置文件

您现在还可以添加自定义网络限制配置文件。如果您想要以特定速度更准确地测试，这可能是有益的。要添加自定义配置文件，请单击“网络”面板并进入“限制”下拉列表。然后，您可以单击“添加自定义配置文件...”并输入名称，吞吐量和延迟。

24.安全面板

Chrome在开发人员工具中添加了另一个很棒的功能，称为安全面板。这对于调试HTTPS迁移和快速修复混合内容警告非常有用。要运行此单击，请单击“安全”面板，然后按Ctrl + R（Cmd + R）刷新页面。然后，它将以红色显示绿色和非安全脚本中的安全脚本。

25.在Google Chrome中使用Firefox开发人员工具

您是否知道可以在Google Chrome中运行Firefox开发者工具？ Valence是Firefox团队的一个实验性附加组件，它使Firefox Developer Tools能够调试更多种类的浏览器。 Valence需要Chrome 37.0或更高版本。

—— 完 ——