最可靠的打开方式是快捷键F12或Ctrl+Shift+I/Cmd+Option+I；右键“检查”在全屏、禁用右键、页面未解析时会失效；file://协议下调试受限，需用http-server启动本地服务；移动端调试需USB调试授权及正确连接模式。
直接按快捷键是最可靠的打开方式
绝大多数现代浏览器（Chrome、Edge、Firefox、Safari）都支持用快捷键直接唤出开发者工具，无需依赖页面是否本地打开、是否带服务器、甚至是否能正常加载。最通用的是 F12 或 Ctrl+Shift+I（Windows/Linux） / Cmd+Option+I（macOS）。注意：某些笔记本键盘需配合 Fn 键；部分国产浏览器（如 360、QQ 浏览器）可能默认禁用此快捷键，需在设置里手动开启“允许快捷键打开开发者工具”。
右键“检查”有时会失效，原因很具体
右键菜单里的“检查”选项在以下情况会灰掉或不响应：
- 页面处于全屏模式（比如播放视频时按了
F11），此时右键被系统级全屏拦截 -
上绑定了oncontextmenu="return false"或通过 CSS 设置了pointer-events: none - 页面尚未完成解析（比如刚双击打开一个空白
.html文件，标签都还没被解析完）
遇到这种情况，别反复右键，直接按 F12 更省事。
用 file:// 协议打开本地 HTML 文件时的限制
双击打开的 file:///xxx/index.html 页面，在 Chrome/Edge 中默认禁用部分调试功能：
立即学习“前端免费学习笔记（深入）”；
- 无法使用
fetch()或XMLHttpRequest加载本地 JSON/JS/CSS（会报net::ERR_FILE_NOT_FOUND或跨域错误） - Service Worker 不会被注册
- 某些安全相关的 API（如
navigator.permissions）返回空或拒绝访问
解决方法不是“强行启用”，而是启动一个最小本地服务。推荐用 Node.js 自带的 http-server：
npm install -g http-server http-server -c-1 ./my-project
然后访问 http://localhost:8080，所有调试功能就恢复正常了。不要试图用 Chrome 启动参数绕过（如 --unsafely-treat-insecure-origin-as-secure），那只是临时补丁，且新版 Chrome 已逐步废弃这类 flag。
移动端真机调试需要双向确认
想在 PC 上调试手机上打开的 HTML 页面，光连 USB 不够，必须同时满足：
- 安卓手机开启“开发者选项”和“USB 调试”（连续点击“版本号”7 次）
- Chrome 浏览器地址栏输入
chrome://inspect，勾选“Discover USB devices” - 手机端浏览器必须是 Chrome（或基于 Chromium 的 Edge），且已打开目标页面
- 首次连接时，手机会弹窗提示“允许 USB 调试吗？”，必须点“允许”——很多人卡在这步，以为没反应
如果列表里看不到设备或页面，先检查 USB 连接模式是否为“文件传输”（MTP），而非“仅充电”。iOS 设备只能通过 Safari + macOS 的 Web Inspector 调试，且需在 iOS 设置中开启“Web 检查器”（设置 → Safari → 高级）。
实际调试中最容易忽略的，是把“打开开发者工具”和“能完整调试”当成一回事——前者只是界面弹出来，后者依赖协议、权限、运行环境三者同时就位。
