使用快捷键（最快）
- Windows / Linux 系统：按
F12键。 - Mac 系统：按
Command + Option + I键。
这是最推荐和最快捷的方法。
通过右键菜单
- 在网页的任意位置点击鼠标右键。
- 在弹出的菜单中,选择 “检查”。
通过浏览器菜单栏
- 点击浏览器窗口右上角的 三个点 菜单图标。
- 将鼠标悬停在 “更多工具” 上。
- 在下级菜单中选择 “开发者工具”。
使用自定义快捷键
- 仅打开“元素/检查”面板：
- Windows / Linux：
Ctrl + Shift + C - Mac：
Command + Option + C
- Windows / Linux：
- 仅打开“控制台”面板：
- Windows / Linux：
Ctrl + Shift + J - Mac：
Command + Option + J
- Windows / Linux：
开发者工具主要面板简介
打开后,你会看到窗口底部或右侧（可调整位置）出现一个面板，顶部有一排选项卡，每个都有不同功能：
- 元素：查看和编辑网页的 HTML 和 CSS，这就是通过右键“检查”打开的面板。
- 控制台：查看日志信息、运行 JavaScript 代码和调试。
- 源代码：调试 JavaScript，设置断点。
- 网络：查看所有网络请求（如图片、文件加载），分析性能。
- 应用：管理本地存储、缓存等。
- 性能 / Lighthouse：分析网页运行性能、进行性能评分。
提示：
- 可以点击开发者工具右上角的 三个点 图标，选择停靠位置（底部、右侧、左侧、独立窗口）。
- 再次按相同的快捷键（如
F12）或点击开发者工具右上角的 “X” 可以关闭它。
F12 或 右键 -> 检查 这两个最常用的方法就足够了！
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
