background.js的console.log不显示，是因为其运行在独立Service Worker环境，日志需在“Application → Service Workers”中打开专属控制台查看，且需勾选“Update on reload”并触发事件激活休眠的Worker。
Chrome DevTools 是你唯一需要的调试入口，其他浏览器的开发者工具只是它的影子——别花时间学多套界面，先吃透它。
为什么 console.log 不显示？检查执行时机和上下文
最常见的情况是脚本在 DOM 加载前就执行了，console.log 看似没输出，其实是执行了但没地方可打。另一个高频原因是把代码写在 popup.html 或 content script 里却没打开对应面板，导致日志输出到错误的控制台标签页。
- 在页面脚本中，用
document.addEventListener('DOMContentLoaded', () => { ... })包裹日志，确认 DOM 就绪后再执行 - 在扩展的
content script中，右键页面 → “检查” → 切换到 “Console” 标签页，再刷新页面；此时日志才可见 - 在
popup.html中调试，必须右键点击浏览器右上角插件图标 → “弹出窗口检查”，否则日志会消失在后台 - 避免在
background service worker中用console.log—— 它不持久，且需在 “Application → Service Workers” 页面勾选 “Update on reload” 才能实时看到
Elements 面板改了样式却没生效？盯住 computed 和 override
CSS 优先级不是靠猜的，而是靠看。你写的 .btn { color: red } 没生效，大概率不是语法错，而是被更高权重的规则覆盖了，或者被 !important 锁死，又或者根本没加载成功。
- 在 Elements 面板中选中元素，右侧 “Styles” 标签页里，被划掉的属性就是被覆盖的；带小箭头的属性名点开能看到来源文件和行号
- 直接在 “Computed” 标签页搜
color，看最终计算值从哪来，是否来自用户代理样式（user agent stylesheet） - 临时禁用某条 CSS 规则：鼠标悬停在该行左侧方块上，点击灰色方块即可关闭；这是比删代码更快的验证方式
- 如果用了 Shadow DOM，普通 Elements 面板看不到内部结构，需勾选右上角三个点 → “Settings → Preferences → Elements → Show user agent shadow DOM”
Network 面板卡在 pending？先查 CSP 和资源路径
HTML 页面里 <script src="js/main.js"></script> 显示 pending，90% 不是网络问题，而是路径错了或被 Content Security Policy 拦截了。尤其在浏览器扩展里，相对路径默认指向扩展根目录，不是当前 HTML 所在目录。
- 在 Network 面板中点击 pending 的请求，看 “Headers” 里的 “Request URL” 是否拼错，比如实际是
/scripts/main.js却写了js/main.js - 查看 “Preview” 或 “Response” 标签页，如果是空或报 404，说明路径无效；如果是 “Blocked by CSP”，说明 manifest.json 里没声明
content_security_policy允许该资源类型 - 扩展中推荐用绝对路径：
<script src="/scripts/main.js"></script>，避免因注入位置不同导致解析路径歧义 - jQuery 或其他第三方库若通过 CDN 引入，在 Manifest V3 下默认被 CSP 拒绝，必须显式声明
"script-src 'self' 'unsafe-eval';"（不推荐）或改用本地副本
断点调试进不去？确认 source map 和 script 注入方式
你在 main.js 第 12 行打了断点，刷新后却跳过不进——可能是因为代码被压缩、source map 没加载，或是脚本根本没执行（比如被 if (false) 包着），也可能是你断点打在了未加载的模块里。
- 确保开发时禁用代码压缩：Vite 默认 dev 模式不压缩，但若用了
build.minify = true，请关掉；Webpack 查mode: 'development' - 在 Sources 面板左侧树状图中找对文件：扩展的 content script 会出现在
top → your-extension-id → scripts/main.js，不是localhost下 - 使用
debugger语句替代手动断点更可靠，它会在运行时强制暂停，不受 sourcemap 缺失影响 - 动态插入的 script（如通过
document.createElement('script')）不会自动出现在 Sources 面板，需在 Network 面板找到后右键 “Open in Sources panel” 才能设断点
真正卡住新手的，从来不是“怎么打开 DevTools”，而是分不清 log 输出在哪、样式改了为何看不见、network pending 是不是网卡了、断点为什么不触发——这些都源于对运行上下文缺乏感知。多看一眼 “Sources” 左上角当前环境（top / iframe / service worker）、多点一次 “Computed”、多翻一下 “Headers”，比重写十遍代码更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
