Chrome DevTools Sources面板空白求助：localhost调试JavaScript无源码显示

我之前在调试本地JS项目时也碰到过这个糟心的情况，折腾了好一会儿才搞定，给你分享几个亲测有效的排查和解决方法，你可以挨个试试：

• 强制刷新清除缓存：浏览器缓存经常会搞出这类幺蛾子，按Ctrl + Shift + R（Windows/Linux）或者Cmd + Shift + R（Mac）强制刷新页面，再切换到Sources面板看看能不能加载出源码。
• 调试时禁用缓存：打开DevTools的Network面板，勾选左上角的「Disable cache」选项（记得要保持DevTools打开状态才生效），然后刷新页面，这样调试过程中就不会读取旧缓存了。
• 检查Sources面板的过滤设置：有时候不小心误触了过滤规则，导致源码被隐藏。在Sources面板左侧的文件树上方，看看有没有输入过滤关键词，或者勾选了「Hide excluded files」「Show only content scripts」这类选项，把这些过滤条件都重置掉试试。
• 重启Chrome和DevTools：别小看这个简单操作，有时候DevTools的进程卡住了，关闭所有Chrome窗口再重新打开，然后重新启动DevTools访问localhost，大概率能解决问题。
• 验证本地服务和JS文件的可访问性：先确认你的localhost服务正常运行，然后在浏览器地址栏直接输入JS文件的完整URL（比如http://localhost:8080/app.js），看看能不能正常打开。如果JS文件本身访问失败，那Sources面板肯定看不到内容。
• 重置DevTools配置：如果上面的方法都没用，可能是DevTools的配置出了问题。打开DevTools，按F1或者点击右上角的三个点图标→「Settings」，滚动到页面最底部，点击「Restore defaults and reload」，重置后再重新调试看看。
• 排查Chrome扩展的干扰：有些扩展（比如广告拦截器、脚本注入类工具）可能会干扰DevTools的正常工作。你可以先打开Chrome的隐身模式（默认不加载扩展），然后访问localhost并打开DevTools，如果隐身模式下正常，就逐个排查已安装的扩展，找到干扰的那个禁用它。

内容的提问来源于stack exchange，提问作者John81