重复的映射 Javascript 源代码未在 Chrome 开发工具上保存更改

Question

我正在制作一个加载一些 .js 文件的本地网页 (.html)，但在使用 Google Chrome 的开发人员工具时遇到问题。

定义

我遇到的问题与源面板有关：我打开了一个包含特定文件的源选项卡，当我通过单击控制台或左侧的源文件打开此文件时，会随机创建一个副本，而不仅仅是创建一个副本将其重定向到已经打开的页面。

两者将具有相同的文件路径：

两者将具有相同的文件路径

两者都允许我写入和保存文件（甚至正确显示/隐藏星号），
只有其中之一可以正确地将内容保存到磁盘。

我必须通过关闭两个文件并再次打开它来修复它，但有时我看不到有重复的文件，这导致我修复问题却发现文件实际上并未保存，完全恢复当我刷新页面时对该文件所做的每一次更改。

问题示例

该错误最常见的情况是当我执行以下操作时：

//我在控制台中识别了一个console.warn登录console.errorsyntax error
我单击导致该日志的行（位于控制台的最右侧），然后我被重定向到源面板，其中打开一个新的源文件选项卡，我开始编辑它。
源选项卡中的某处是同一文件的另一个源文件（具有相同的文件路径）：该选项卡应该是我正在编辑的选项卡：只有这个原始选项卡才能正确保存对文件所做的更改。
我通过单击控制台修复了文件中的随机 javascript 问题。
我按 Ctrl+S（或右键单击 > 保存），指示未保存文件的星号消失。此时 Chrome 预计已成功保存文件，但事实并非如此（我可以通过在记事本中打开文件来检查）
我按F5刷新页面。
Chrome 加载旧的、未保存的文件，删除我在源文件中所做的所有更改。

有时，相同的步骤不会创建重复的文件，但我所要做的就是刷新并重试，直到创建重复的文件。重现这个错误是一个偶然的问题，我也无法预测或查明其原因。

在打开开发工具的情况下刷新页面时，有很小的可能会创建损坏的映射，其中映射的项目仅部分映射

仅部分映射

即使几秒钟前还好：（只有重新启动 chrome 才能解决这个问题）

最后一段可能与问题有关，也可能无关，但我可以清楚地选择并打开“假”文件和“真实”文件，即使它们具有相同的文件路径。

我制作了这个 gif 来展示开发工具中的文件路径如何彼此相同：http://i.imgur.com/ULlbskO.gif

设置详情

file:///我严格使用本地文件系统 ( )，没有使用本地主机或服务器来托管我的应用程序，它是纯 HTML + Javascript。

我使用的是 Windows 版 Google Chrome 57，没有任何扩展，但自 2016 年 12 月以来我一直遇到这个问题。

我的项目是通过将文件夹添加到工作区并将其映射到本地文件来映射的，这在过去是有效的。

这是我的配置的图片：http://i.imgur.com/IEmE3zG.png

我尝试过的事情

我需要帮助的问题

我可以以任何方式最小化/解决这个问题吗？

以前有人处理过这个吗？

有人知道这是 Chrome 的 bug 还是我的工作流程出了问题吗？

Answer 1

经过几个月的网络开发工作后，我自己找到了答案。

自从我提出这个问题以来，重复的文件已在 Chrome 中修复，但文件不断失去与本地文件系统的“连接”（绿点将它们标记为与本地同步），这让我进行了调查，最后我找到了原因：

发生的情况是，开发工具正在尝试保存该文件，当它检索该文件时，它会从缓存中加载（因为我的本地 Web 服务器正在发送特定于缓存的标头），这使浏览器认为该文件实际上不是它所要的文件。已保存，因此它停止同步！

为了解决这个问题，我所要做的就是确保我的本地网络服务器禁用我的 javascript 文件的任何形式的缓存，我可以从网络面板检查：

我的本地网络服务器发送了 1 小时的缓存标头，这使得 chrome 打开缓存的文件，这与我编辑的文件不同，这表明该文件不是它保存的文件。

将服务器更改为在没有缓存标头的情况下提供静态内容后，一切都很顺利并且文件保持正确同步！