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

我在用 NetBeans 和 Google Chrome 做 CHrome 调试教程。所有东西，包括扩展，看起来都正常工作，但是当我进入 Use the Debugger部分时，我看不到插入断点的 html 代码。

在浏览器上选择查看弹出窗口之后，它会在 Console 中打开，不显示任何内容，Elements 会显示 popup.html 并添加图像。当我转到 Source 时，文件 popup.html 可以打开，但是唯一的一行，第1行，是空白的。如果我打开 js 文件，js 文件就在那里，可以进行编辑(断点)。

我很抱歉-可能是一些基本的东西，但是我对这个不是很有经验。我尝试过重新装载和刷新所有的东西。

跟进: 通过在控制台提示符中输入 location.reload(true)，popup.html 文件变成了可见的源代码! 为什么? 不知道。

I hope this saves someone the full day I spent stumbling around.

51102 次浏览
小开

这似乎是一个带有 Chromium DevTools 的 已知问题。基本上，HTML 和其他非脚本内容在 DevTools 打开之前就已经刷新了，而且没有可靠的方法可以恢复它。用 DevTools 打开刷新页面可以“更正”问题。

小开

我注意到一些严重的 javascript 问题会导致这样的问题。在我的例子中，由于打印错误，我错误地覆盖了整个文档。

如果您在 Chromium WebTools 调试器中得到一个空白的 html 页面，请仔细查看您的 javascript，以确保它没有做任何奇怪的事情。

小开

我遇到过这个问题，并且刚刚发现从检查器设置窗口(F1)禁用“启用 Javascript 源地图”解决了这个问题

我重新创建了 js.map，重新启用了设置，源代码仍然可用。

所以我认为我的问题是，我提供的是未缩小的 js (dev 设置) ，但是 map (为 prod 设置构建的)仍然存在并且过时了。

小开

In my case there was an extension in chrome causing the debugger to give the blank index page under a "no domain" section of the debugger. After disabling all non-essential extensions in chrome, the debugger showed the correct source again.

小开

I fixed my problem by using a brand new session with command line argument "--user-data-dir", and disabling "Enable Javascript Source Maps". 我的代码在 Firefox 调试器中显示良好，所以看起来像是由 Chrome 错误引起的。

小开

我也有同样的问题，即使是刷新页面也不起作用。

打开 chrome://help并刷新浏览器 + 重启对我来说很有用。

你也可以通过菜单更新 Chrome:

enter image description here

小开

In my case, I was unable to access the console as it's tab also displayed a blank page. My solution is to use the CTRL+SHIFT+I combination with the blank debugger screen in focus, then type parent.location.reload(true) in the console of the popup debugger.

小开

在我的情况下，它发生得很突然，在我感染恶意软件并重置浏览器删除的缓存/应用程序数据之后。

解决方案: 删除在我的情况下可能影响 Js 的扩展

我删除/关闭了下面的扩展并工作 Https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje?hl=en

奇怪的是，在我使用这个插件之前，我觉得它就像心肺复苏术一样。 :)

小开

在我的案例中，我运行了几天的浏览器同步服务，我反弹了一下，解决了我的问题。

小开

当我有一个巨大的 java 脚本文件时，我也遇到了这个问题，我有这样一行代码

                points.push({
location: new google.maps.LatLng(46.5376919, 4.5425704),
date : "5/8/2017 5:11:00 PM",
free : true
});

在一个循环，它是计数3000项，所以文件在脚本中变大，文件是空白的铬源。(我觉得我达到了一些限制)

在通过删除100个项目使文件变小之后，它工作得很好。

小开

在我的情况下，顺序帮助是

  1. close the blank tab in sources
  2. close dev tools
  3. 打开开发工具
  4. 打开源代码中的选项卡(仍然是空白的)
  5. 刷新页面
小开

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

小开

我遇到了同样的问题，我的 HTML 文档在“来源”选项卡中是空白的。我尝试了这里推荐的几个修复程序，但都不管用。这个建议甚至导致所有本地脚本消失。唯一对我有用的就是从检查窗口按 F5键。归功于 这么回答。

小开

在我的例子中，我在 Filessystem 选项卡而不是 Page 选项卡中。 从“ Page”选项卡中，选择您正在使用的源代码并执行 F5(刷新)。它应该为您加载源代码。

小开
  1. Dev Tools (CTRL+SHIFT+I ) or (F12)
  2. 检查器设置窗口(F1)
  3. 恢复默认值并重新加载[底部或右侧底部的按钮]

我没问题！


提交答案