Chrome开发者工具:html脚本是空白的(在源代码中)调试教程

Question

我正在使用NetBeans和谷歌浏览器进行C hrome调试教程.包括扩展在内的所有内容似乎都能正常工作,但是当我进入section时Use the Debugger,我看不到html代码插入断点.

在浏览器上选择了inspect popup后,它会在Console中打开,什么都不显示,Elements会显示popup.html并添加了图像.当我转到Sources时,可以打开文件popup.html,但唯一的第1行是空白.如果我打开js文件,js文件就在那里并且可以编辑(断开指向).

对不起 - 可能是基本的东西,但我对此并不是很有经验.我已经尝试重新加载并刷新一切.

后续行动:通过进入location.reload(true)控制台提示符,popup.html文件变为Source!为什么？不知道.

我希望这可以节省一些人在我磕磕绊绊的一整天.

Answer 1

这似乎是Chromium DevTools的一个已知问题.基本上,HTML和其他非脚本内容在DevTools打开之前已经被刷新,并且没有可靠的方法来恢复它.使用DevTools刷新页面会"纠正"该问题.

Answer 2

我遇到了这个问题,刚刚发现从Inspector设置窗口(F1)中禁用"启用Javascript源地图"解决了它

我重新创建了我的js.map,重新启用了设置,源仍然可用.

所以我认为我的问题是我正在提供未经通知的js(开发设置),但地图(为prod设置而构建)仍然存在并且过时了.

Answer 3

在我的情况下,订单帮助是

1. 关闭源中的空白选项卡
2. 关闭开发工具
3. 开放开发工具
4. 打开源中的选项卡(它仍为空白)
5. 刷新页面

Answer 4

在我的情况下,我无法访问控制台,因为它的选项卡也显示一个空白页面.我的解决方案是使用CTRL + SHIFT + I组合与焦点的空白调试器屏幕,然后键入parent.location.reload(true)弹出调试器的控制台.

Answer 5

开发工具 (F12) -> 检查器设置窗口 (F1) -> 恢复默认值并重新加载 [底部按钮] 对我有用！

Answer 6

在我的情况下,chrome中有一个扩展名,导致调试器在调试器的"无域"部分下给出空白索引页面.在禁用chrome中的所有非必要扩展后,调试器再次显示正确的源.