Web 开发指向标 | Chrome 开发者工具学习资源 (二) - 详解

Chrome 开发者工具是一套 Web 开发者工具，直接内置于 Google Chrome 浏览器中，帮助您即时修改页面和快速诊断问题，让您能够更快地构建更好的网站。

• Chrome 开发者工具

  https://developer.chrome.google.cn/docs/devtools/ai-assistance?hl=zh-cn

• Google Chrome

  https://www.google.com/chrome/?hl=zh-cn

在上一篇文章中您了解了 Chrome 开发者工具的基础概览，本文是学习资源的第二篇，将为您介绍打开 Chrome 开发者工具的多种方式，请继续阅读，也欢迎您持续关注 #Chrome 开发者工具标签下的更多文章。

您可以借助以下两种方式访问开发者工具:

• 使用 Chrome 菜单: 在 Chrome 界面中点击下拉菜单；

• 使用专用快捷键: 打开元素、控制台或上次使用的面板。

此外，您还可以了解如何为每个新标签页自动打开开发者工具。

通过 Chrome 菜单

打开开发者工具

如果您更喜欢在界面中进行操作，可以通过 Chrome 中的下拉菜单访问开发者工具。

打开 "元素" 面板

以检查 DOM 或 CSS

如需进行检查，请右键点击网页上的元素，然后选择检查。

开发者工具会打开元素面板，并在 DOM 树中选择相应元素。在样式标签页中，您可以看到应用于所选元素的 CSS 规则。

从 Chrome 的主菜单中

打开上次使用的面板

如需打开上次使用的开发者工具面板，请点击地址栏右侧的三点按钮，然后依次选择更多工具 > 开发者工具。

或者，您也可以使用快捷键打开上次使用的面板。

使用快捷键打开面板:

元素、控制台或上次使用的面板

如果您更喜欢使用键盘，请根据您的操作系统在 Chrome 中选择相应的快捷键:

下面介绍了关键按键代表的意义:

• C 表示 CSS

• J 表示 JavaScript

• I 表示您选择的选项

C 快捷键会在检查器模式下打开元素面板。当您将光标悬停在网页上的元素上时，此模式会显示实用工具提示。您还可以点击任何元素，在元素 > 样式标签页中查看其 CSS。

如需查看开发者工具快捷键的完整列表，请参阅键盘快捷键。

• 键盘快捷键

  https://developer.chrome.google.cn/docs/devtools/shortcuts?hl=zh-cn

在每个新标签页中

自动打开开发者工具

从命令行运行 Chrome 并传递 --auto-open-devtools-for-tabs 标志:

1. 退出所有正在运行的 Chrome 实例。

要点: 此标志仅适用于您打开的第一个 Chrome 实例。如果此方法不起作用 (例如在 Windows 上)，请务必通过任务管理器终止所有驻留的 Chrome 进程。

2. 运行您喜爱的终端或命令行应用。

3. 根据您使用的操作系统，运行以下命令: 

• macOS:

open -a "Google Chrome" --args --auto-open-devtools-for-tabs

• Windows:

start chrome --auto-open-devtools-for-tabs

• Linux:

google-chrome --auto-open-devtools-for-tabs

在您关闭 Chrome 之前，系统会为每个新标签页自动打开开发者工具。

如需获得更具实操性的学习体验，请参阅如何自定义开发者工具。

• 自定义开发者工具

  https://developer.chrome.google.cn/docs/devtools/customize?hl=zh-cn

想了解更多 Chrome 开发者工具的实用技巧吗？请持续关注我们的系列文章，敬请期待更多精彩内容！

---