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

Posted 2023-02-22

【中文标题】Chrome 开发者工具不再显示所有 JavaScript 文件

【英文标题】：Chrome developer tools do not show all JavaScript files any more

【发布时间】：2015-10-29 23:46:02

【问题描述】：

并非所有 javascript 文件都在 Chorme 开发者工具中可见。

谷歌浏览器是最新的。版本 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>

脚本的第一部分在 localhost/Scripts/* 路径的 Sources 菜单下的 Chrome 开发人员工具中可见。从昨天开始，脚本的第二部分就看不见了。开发者工具有什么问题？

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

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

如果我将本地主机“文件夹”添加到工作区，所有内容都是可见的，甚至是服务器端源文件。

【问题讨论】：

使用开发者工具中的network选项卡，刷新页面，判断页面加载时js文件是否实际加载完毕。

@Seano666 我做到了。由于您的评论，问题解释得到了澄清。谢谢。

将console.log放到源文件中，刷新页面，你会得到console.log，你可以从console点击源。

如果没有控制台日志，则意味着您的源文件没有从您期望的位置加载。

@SilentTremor 好主意。谢谢。来自 console.log() 参数的消息旁边的文件名是 VM254 DdiClientMain.js:17。我想知道这意味着什么？

【参考方案1】：

我重新安装了 Chrome，但删除了 Chrome 配置文件数据。现在可以了。

【讨论】：

有没有什么地方可以选择性地删除 chrome 开发工具的配置文件数据？不想丢失完整的历史记录和书签等。

我偶然发现了这个答案，您可以有选择地重置开发工具设置，而无需删除整个 Chrome 配置文件。按 F12，然后按 F1，页面底部有一个按钮，用于重置开发工具。

非常感谢 Michael Tessel - 我的 chrome 开发人员由于不明原因开始只显示我的较少文件（这使得调试非常困难）。我重置了 devtool 设置，一切都恢复正常了！ :-)

【参考方案2】：

问题是由于网络映射和取消映射造成的。 chrome 开发工具中有一些奇怪的错误会导致这些问题。 有时您甚至可能会在侧栏中看到旧的 css 文件 当您从左侧栏中打开 css 文件时。它只是空白 甚至更糟，甚至不会被看到。

即使我已经尝试了所有选项。 重新启动，删除所有 chache，映射取消映射。隐身模式。 但最终不得不重新安装才能进行此修复。

所以继续进行全新的 chrome 安装。一切都应该没问题。

【参考方案3】：

我遇到了同样的问题，我所做的只是删除本地 AppData 中的所有 Temp 文件，在您的配置文件名称下，例如 C:\Users\userprofile\AppData\Local\Temp

【参考方案4】：

我遇到了同样的问题，“空缓存和硬重新加载”对我有用。

【讨论】：

为我工作，无需重新安装 chrome

【参考方案5】：

在开发人员工具中打开网络选项卡并按 F5 刷新 - 感谢 @Seano666 对问题的评论

【讨论】：

这对我也有用。在重新加载期间打开网络选项卡似乎会影响错误

专业提示：您可以通过按“类型”排序来对页面上加载的所有内容进行排序，这样所有脚本都会一起列出

打开 Devtools 对我来说很好。无需打开网络选项卡。

哇这工作。你是怎么想出这个解决方案的？ :P

这个错误在版本 77.0.3865.90（正式版）（64 位）上仍然存在

【参考方案6】：

对我来说也是一个“映射和取消映射”的问题。 我删除了所有映射，但网站下的文件夹不可见。

我的解决方案是：在开发工具的设置中转到“工作区”选项卡。 还有一些映射。我全部删除了。重新加载后就好了。

【参考方案7】：

尝试在开发者工具中右键单击reload 按钮。 您将获得一个可供您选择的菜单：Empty Cache & Hard Reload。 这对我有用。

【讨论】：

这也适用于我。此外，即使在刷新之前，我也可以在“应用程序”选项卡下找到丢失的脚本。

【参考方案8】：

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

然后我所有的本地脚本再次出现，调试恢复正常。

【参考方案9】：

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

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

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

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

【讨论】：

这对于通过 AJAX 调用加载的脚本非常有效，该调用将拒绝在源面板中显示。由于 Chrome 是在某种 VM 文件中运行它，因此添加 debugger; 行会强制 Chrome 打开 VM 文件。

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

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

【参考方案10】：

原因是您的脚本文件尚未加载，使用 f5 刷新页面，您将看到源代码中列出的脚本。 当您将脚本标签放在标签底部时会发生这种情况。

【参考方案11】：

就我而言，这是 Chrome 缓存问题。刷新对我不起作用。映射下面的文件后解决了我的问题

1- 在浏览器上打开文件，例如http://example.com/script.js

2- 添加一个版本，例如http://example.com/script.js?v=2

这会清除缓存并且文件开始显示为可编辑。

【参考方案12】：

我遇到了同样的问题并尝试了提到的答案，但结果是谷歌浏览器无声更新，需要重新启动，然后一切正常。

在您的 chrome URL 中输入 chrome://settings/help 并检查它是否需要重新启动。

【参考方案13】：

我遇到了相同的文件夹未加载问题，我通过以下方式解决了它：

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

选择Open file。

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

从结果列表中选择文件。

【参考方案14】：

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

解决方案：对我来说，解决方法是复制 url 地址并将其粘贴到新标签中，然后重新打开开发工具。原来的标签不知何故进入了糟糕的状态。

【讨论】：

确实如此。我有完全相同的问题。重新启动 Chrome 以解决问题。

【参考方案15】：

如果你在chrome中调试，添加调试器；在要让浏览器停止调试的 javascript 中的前后语句

【参考方案16】：

我遇到了这个问题，由于 javascript script 标签内的拼写错误。

<script type="text/javsscript" src="./../js/lib/darkmodejs.min.js"></script>

问题是属性type 中的拼写错误，然后我将其更改为：

<script type="text/javascript" src="./../js/lib/darkmodejs.min.js"></script>

它对我来说很顺利，有时问题很小但影响更大。

【参考方案17】：

在我的情况下，问题在于我加载的 JavaScript 文件需要更长的时间（大约 5 分钟），所以它给我的印象是它们根本没有被加载。 当我在很长一段时间后加载本地项目时，我已经看到了这种情况。加载后，即使我刷新页面，它们也会保留在内存中。

【参考方案18】：

所以我遇到了同样的问题，但我的解决方案是因为我有 <script> src="script.js"</script> 而不是 <script src="script.js">。一旦我解决了这个问题，文件就会正确加载。