打开 Chrome 开发者工具
可以通过多种方式打开 Chrome 开发者工具。
Chrome 右键菜单
在页面右键单击调出Chrome菜单，选择检查。
DevTools 会打开元素面板，并在 DOM 树中选择相应元素，在样式标签页中，可以看到应用于所选元素的 CSS 规则。
此方法适合快速查看 DOM 或 CSS。
Chrome 主菜单
点击地址栏右侧的 more_vert 按钮，然后依次选择 更多工具 > 开发者工具。
此方法会打开上次使用的 DevTools 面板。
快捷键
如果你更喜欢使用键盘，可以根据操作系统在 Chrome 中使用相应的快捷键来打开不同面板：
|操作系统|元素|控制台|您上次使用的面板|
| ———— | ———— | ———— | ———— |
|Windows 或 Linux|Ctrl + Shift + C|Ctrl + Shift + J|F12 或 Ctrl + Shift + I|
|Mac|Cmd + Option + C|Cmd + Option + J|Fn + F12 或 Cmd + Option + I|
下面介绍了一种记忆快捷键的简单方法：
C 代表 CSS。
J 表示 JavaScript。
I 表示上次选项。