Kayce Basques

Jecelyn Yeen

Sofia Emelianova

您可以通过多种方式打开 Chrome 开发者工具。从这份全面的参考资料中选择您喜欢的方式。

您可以使用 Chrome 界面或键盘访问开发者工具：

通过 Chrome 中的下拉菜单。

借助可打开元素、控制台或您上次使用的面板的专用快捷键。

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

通过 Chrome 菜单打开开发者工具

如果您偏好使用界面，可以通过 Chrome 中的下拉菜单访问开发者工具。

打开“元素”面板以检查 DOM 或 CSS

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

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

通过 Chrome 的主菜单打开您上次使用的面板

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

或者，您也可以使用快捷键打开最后一个面板。如需了解详情，请参阅下一部分。

使用快捷键打开面板：“元素”“控制台”或上一个面板

如果您更喜欢使用键盘，请在 Chrome 中按快捷键，具体取决于您的操作系统：

操作系统

元素

控制台

您的上一个面板

Windows 或 Linux

Ctrl + Shift + C

Ctrl + Shift + J

F12Ctrl + Shift + I

Mac

Cmd + Option + C

Cmd + Option + J

Fn + F12Cmd + Option + I

下面提供了一种简单的方法来记忆快捷键：

C 表示 CSS。

J 表示 JavaScript。

I 表示您的选择。

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

如需查看 DevTools 快捷键的完整列表，请参阅键盘快捷键。

在开发者工具处于打开状态时，重新加载网页（使用或不使用缓存）

在开发者工具处于打开状态时，您可以通过以下三种方式重新加载网页。在 Chrome 窗口的主操作栏中，长按刷新 重新加载按钮，然后选择以下选项之一：

正常重新加载。使用缓存来缩短重新加载时间。

快捷键：Cmd+R (macOS) 或 Ctrl+R (Windows/Linux)。

注意： check_box在“网络”面板中停用缓存会强制所有正常重新加载不使用缓存。

硬重新加载。绕过缓存，但不清空缓存。

快捷键：Cmd+Shift+R (macOS) 或 Ctrl+Shift+R (Windows/Linux)。

清空缓存并硬性重新加载。在重新加载之前，清空所有网站的缓存。

在每个新标签页中自动打开开发者工具

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

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

要点：此标志仅适用于您打开的第一个 Chrome 实例。如果此方法对您无效（例如在 Windows 上），请务必从任务管理器中结束所有驻留的 Chrome 进程。

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

根据您的操作系统，运行以下命令：

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 之前，开发者工具将自动为每个新标签页打开。

接下来怎么做？

成功：恭喜！您已成功解锁 Chrome 开发者工具的强大功能。

接下来，观看以下视频，了解一些有用的快捷方式和设置，以便更快地浏览 DevTools。

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