Chrome for Developer 第一章（打开 Chrome 开发者工具）

Chrome 开发者工具是前端开发者的得力助手，它集调试、测试和代码优化于一身。下面是如何打开和使用这一工具的步骤，以及每个面板的基本功能介绍。

打开方法：

1. 通过菜单打开：

• 在 Chrome 中，点击右上角的三个垂直点来打开菜单。
• 选择“更多工具”，然后点击“开发者工具”。

2. 使用右键菜单：

• 在网页上右键点击你想要检查的元素。
• 在弹出的菜单中选择“检查”。
• 会打开开发者工具，并高亮显示元素的 DOM 树位置和对应的CSS 规则。

3. 键盘快捷方式：
   根据你的操作系统，你可以使用以下快捷键：

• Windows 或 Linux: 使用 Ctrl + Shift + C 打开“元素”面板，Ctrl + Shift + J 打开“控制台”，或者 F12 / Ctrl + Shift + I 打开你上次使用的面板。
• Mac: 使用 Cmd + Option + C 打开“元素”面板，Cmd + Option + J 打开“控制台”，或者 Fn + F12 / Cmd + Option + I 打开你上次使用的面板。

注意：快捷键 Ctrl + Shift + C 会在检查器模式下打开 元素面板。当您将鼠标悬停在页面上的元素上时，此模式会显示对应的提示。