Chrome开发者工具不再显示所有的JavaScript文件

Question

并非所有JavaScript文件都能在Chrome开发者工具中看到。

谷歌浏览器已经更新至最新版本44.0.2403.130 m。 应用程序的调试版本。 脚本位于头部。

<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/jquery.validate.js"></script>

...

<script src="/Client/Statics/GuiContainers.js"></script>
<script src="/Client/ClientDAL.js"></script>
<script src="/Client/ClientLayoutUpdater.js"></script>
<script src="/Client/ClientRenderer.js"></script>
<script src="/Client/ControllerLocator.js"></script>

脚本的第一部分在Chrome开发者工具中的“Sources”菜单下可见，路径为localhost/Scripts/*。自昨天以来，脚本的第二部分不可见了。开发者工具出了什么问题吗？

JavaScript控制台中没有错误。我可以在网络选项卡中看到JavaScript文件请求成功。所有JavaScript都已加载。应用程序正常工作。

开发者工具出了什么问题？有人有什么想法吗？

如果将localhost“文件夹”添加到工作区，一切都可见，甚至是服务器端源文件。

- Fosna

---

使用开发者工具中的网络选项卡并刷新页面，以确定在页面加载时是否实际加载了js文件。 - Seano666

@Seano666 我已经做了。你的评论澄清了问题的解释。谢谢。 - Fosna

在源文件中加入console.log，刷新页面，你将获得console.log并可以从控制台中点击"source"。 - SilentTremor

如果没有控制台日志，这意味着您的源文件未从预期位置加载。 - SilentTremor

@SilentTremor 很好的想法。谢谢。从console.log()参数旁边的文件名为VM254 DdiClientMain.js:17的消息，我想知道这是什么意思？ - Fosna

Answer 1

打开开发者工具的网络选项卡，然后按下F5刷新 - 感谢@Seano666在问题中提供的评论

- abiNerd

---

这个方法对我也奏效了。在重新加载时打开网络选项卡似乎会影响这个错误。 - CodeToad

打开开发者工具对我来说很好用，不需要打开网络选项卡。 - Surjith S M

这个漏洞在77.0.3865.90版（官方版本）（64位）上仍然存在。 - Markus Zeller

这个选项在网络选项卡中显示，但我无法在此设置断点，所以它真的没有帮助。我需要在源代码选项卡中看到文件，以便我可以设置断点。 - inliner49er

在Win10上升级到Chrome 95后，我刚遇到了这个错误，所以它仍然没有被修复。@inliner49er 在切换到网络选项卡并刷新后，您应该能够按ctrl-P并在打开的文件菜单中搜索任何已加载的文件。 - jdunning

Answer 2

对于我来说，我只需要打开开发者工具的设置并点击第一个选项卡中的"恢复默认值并重新加载"按钮。

然后，我的所有本地脚本都再次显示出来，调试也恢复正常。

- Brendan

Answer 3

将debugger;指令添加到脚本的任何部分，调试器将在此处停止并显示脚本，即使脚本是动态加载的。

                onSuccess: function (result) {
                    debugger;
                    combo.empty();
                    $(result).each(function () {
                        var option;

                        option = document.createElement('option');
                        option.value = this.Id;

                        $(option).appendTo(combo);
                    });
                }

- 0x777

---

这段代码完美地解决了一个通过 AJAX 调用加载的脚本无法在源面板中显示的问题。由于 Chrome 将其运行在某种 VM 文件中，加入 debugger; 语句会强制 Chrome 打开该 VM 文件。 - James Haug

@JamesHaug 确实，这是我调试动态加载脚本的唯一方法，无论它们是通过框架加载还是注入。 - 0x777

这对我有用，但如果我没有“调试器”，它仍然不会显示。 - Steve Smith

本以为它能正常工作，但后来它停止了工作，甚至显示旧的JS，尽管明显正在运行新的JS。在设置菜单底部按F1键，然后按重置按钮似乎更可靠（尽管我不得不这样做几次）。 - nmz787

Answer 4

尝试在开发者工具中右键单击reload按钮。
您将获得一个菜单，可以选择：清空缓存并硬重载。
这对我很有用。

- Southern Fire

---

这对我也有效。而且，即使在刷新之前，我也可以在“应用程序”选项卡下找到缺失的脚本。 - knopch1425

Answer 5

问题：我已经开发/调试了一段时间，然后遇到了类似的问题。尽管我的控制台日志显示了行号，但当我单击它们时，我被带到空白页面的第1行。我的脚本嵌入在html中，所以我可以在元素选项卡中看到它们，但是当我在源选项卡中打开文件时，它就是空白的。

解决方案：对我来说，解决方法是复制URL地址并粘贴到一个新标签页中，然后重新打开开发工具。原始标签页出现了某些问题。

- Marcus

---

确实。我也遇到了完全相同的问题。重启Chrome解决了这个问题。 - Rustem Zinnatullin

Answer 6

我也遇到了同样的问题，使用“清空缓存并强制刷新”对我很有帮助。

- koshy6252

Answer 7

我遇到过一个文件夹加载不出来的问题，我通过以下方式解决了它：

1. 在 Sources 模式下，点击蓝色高亮的按钮：

   

2. 选择 打开文件。

3. 在搜索框中输入所需文件的名称。

4. 从结果列表中选择文件。

- NiVeR

Answer 8

这个问题是由于网络映射和取消映射引起的。 Chrome开发工具中存在一些奇怪的错误，会导致这种问题。 有时候你甚至会在侧边栏看到旧的CSS文件， 而当你从左侧边栏打开CSS文件时，它可能会变成空白， 甚至更糟的是，它可能完全不可见。

我已经尝试了所有选项，重启、清除所有缓存、映射取消映射、隐身模式等等。 但最终不得不重新安装才能解决这个问题。

所以请进行新的Chrome安装，一切应该都没问题了。

- Tarandeep Singh

Answer 9

我曾经遇到同样的问题，尝试了提供的答案，但后来发现是 Google Chrome 在默默地更新，需要重新启动浏览器，然后一切都正常了。

在 Chrome 地址栏中输入 chrome://settings/help，检查是否需要重新启动。

- Shiko

Answer 10

在我的情况下，这是Chrome缓存问题。刷新对我无效。映射下面的文件后，问题得到解决。

1- 在浏览器中打开文件，例如 http://example.com/script.js 2- 添加版本，例如 http://example.com/script.js?v=2 这将清除缓存，并使文件开始显示为可编辑状态。

- Onur Kocatas