常用浏览器调试器打开方式
平时写网页、调样式，或者发现某个页面加载异常，最直接的办法就是打开浏览器的调试器。不同浏览器和系统下，打开方式略有差异，但大多数都支持快捷键。
在 Windows 或 Linux 电脑上，按下 F12 是最快的方式，几乎所有主流浏览器（Chrome、Edge、Firefox）都会立即弹出开发者工具。如果你用的是 Mac，可以按 Command + Option + I，效果一样。
右键菜单打开更精准
有时候你只想查看某一段文字或图片的代码，可以直接鼠标右键点击目标元素，选择“检查”或“审查元素”。这个方法能直接定位到对应 HTML 节点，省去手动查找的麻烦。
通过菜单栏进入
如果键盘坏了或者习惯用鼠标操作，也可以走浏览器菜单。比如在 Chrome 中，点击右上角三个点 → 更多工具 → 开发者工具，一样能打开。虽然慢一点，但适合新手熟悉路径。
移动端怎么调试？
手机上没法按 F12，但也能调试。Android 的 Chrome 可以开启 USB 调试，连接电脑后在桌面版 Chrome 输入 chrome://inspect，就能远程查看页面情况。iOS 用户可以在 Safari 设置里开启“Web 检查器”，然后用 Mac 上的 Safari 连接设备调试。
命令行也能触发
某些特殊场景下，比如自动化测试脚本中，可以通过启动参数强制打开调试界面。例如运行 Chrome 时加上 --auto-open-devtools-for-tabs 参数，每次新建标签页都会自动弹出开发者工具。
比如这行命令：
google-chrome --auto-open-devtools-for-tabs适合需要频繁调试的开发环境。
小技巧：快速切换面板
打开调试器后，用 Ctrl + Shift + C（Mac 是 Command + Shift + C）可以快速进入元素选择模式，鼠标移到页面上会高亮各个模块，点一下就能选中对应的 DOM 元素，特别方便改样式。
再配合顶部的面板切换按钮，Elements 看结构，Console 查错误，Network 监控请求，谁用谁知道。