Chrome for Developer 第一章（打开 Chrome 开发者工具）
Chrome 开发者工具是前端开发者的得力助手，它集调试、测试和代码优化于一身。下面是如何打开和使用这一工具的步骤，以及每个面板的基本功能介绍。
打开方法：
1. 通过菜单打开：
- 在 Chrome 中，点击右上角的三个垂直点来打开菜单。
- 选择“更多工具”，然后点击“开发者工具”。
-
使用右键菜单：
- 在网页上右键点击你想要检查的元素。
- 在弹出的菜单中选择“检查”。
- 开发者工具会打开，并高亮显示元素的 DOM 树位置和应用的 CSS 规则。
-
键盘快捷方式：
根据你的操作系统，你可以使用以下快捷键：- Windows 或 Linux: 使用
Ctrl + Shift + C打开“元素”面板，Ctrl + Shift + J打开“控制台”，或者F12 / Ctrl + Shift + I打开你上次使用的面板。 - Mac: 使用
Cmd + Option + C打开“元素”面板，Cmd + Option + J打开“控制台”，或者Fn + F12 / Cmd + Option + I打开你上次使用的面板。
- Windows 或 Linux: 使用
快捷键 Ctrl + Shift + C 会在
检查。 检查器模式下打开 Elements 面板。当您将鼠标悬停在页面上的元素上时，此模式会显示有用的提示。您还可以点击任何元素，在元素 > 样式窗格中查看其 CSS。