DevTools 基本使用

打开 Chrome 开发者工具

可以通过多种方式打开 Chrome 开发者工具。

Chrome 右键菜单

在页面右键单击调出Chrome菜单，选择检查。

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

此方法适合快速查看 DOM 或 CSS。

Chrome 主菜单

点击地址栏右侧的 more\_vert 按钮，然后依次选择 更多工具 > 开发者工具。

此方法会打开上次使用的 DevTools 面板。

快捷键

如果你更喜欢使用键盘，可以根据操作系统在 Chrome 中使用相应的快捷键来打开不同面板：

下面介绍了一种记忆快捷键的简单方法：

• C 代表 CSS。
• J 表示 JavaScript。
• I 表示上次选项。