Chrome浏览器的开发工具

Question

我正在制作一个加载一些.js文件的本地网页（.html），并且无法使用Google Chrome的开发人员工具。

定义

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

两者都有相同的文件路径：

两者都允许我编写并保存文件（甚至正确显示/隐藏星号）
只有其中一个会将内容正确保存到磁盘。

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

问题示例

最常见的错误是我正在执行以下操作：

1. 我在控制台中识别出console.warn / console.error / syntax error日志
2. 我点击导致该日志的行（位于控制台的最右侧），然后我被重定向到源面板，新的源文件选项卡打开，我开始编辑它。
3. 源选项卡中的某个位置是同一文件的另一个源文件（具有相同的文件路径）：该选项卡应该是我正在编辑的选项卡：只有此原始选项卡才能正确保存对文件所做的更改。
4. 我通过点击控制台修复了我所导致的文件中的随机javascript问题。
5. 我按Ctrl + S（或右键单击＆gt;保存），指示未保存文件的星号消失。那时Chrome希望成功保存文件，但它没有（我可以通过在记事本中打开文件来检查）
6. 我按F5刷新页面。
7. Chrome会加载旧的未保存文件，删除我在源文件中所做的所有更改。

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

在开放Dev Tools的情况下刷新页面时，很可能会创建一个损坏的映射，其中映射的项目仅部分映射



即使之前的时间很短:(仅重新启动Chrome修复程序）

这最后一段可能会或可能不会与问题有关，但我可以清楚地选择并打开＆＃34;假的＆＃34;文件和＆＃34;真实＆＃34;文件，即使它们具有相同的文件路径。

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

设置详情

我严格使用本地文件系统（file:///），没有 localhost或服务器用于托管我的应用程序，它是纯HTML + Javascript。< / p>

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

我的项目是通过将文件夹添加到工作区并将其映射到过去常用的本地文件来映射的。

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

我尝试过的事情

1. 清除Chrome缓存
2. 从“源面板”工作区中删除项目并再次添加
3. 重新安装Chrome
4. 将项目路径移至其他地方
5. 在Google上搜索
6. 放手/接受失败（我已经过分依赖于工具）
7. 等待2个月的时间让某人也有这个问题并将其发布在互联网的某个地方

我需要帮助的问题

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

以前有人处理过这个吗？

有人知道这是Chrome错误还是我的工作流程出错？

Answer 1

在使用Web开发几个月后，自己找到了答案。

自从我提出这个问题以来，重复的文件已在Chrome中得到修复，但是文件不断随机丢失与本地文件系统的“连接”（将其标记为与本地同步的绿点），这使我不得不进行调查我终于找到了原因：

发生的事情是Dev Tools正在尝试保存文件，并且在检索文件时会从缓存中加载文件（因为我的本地Web服务器正在发送特定于缓存的标头），这使浏览器认为文件文件实际上不是保存的那个，所以它停止了同步！

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

我的本​​地Web服务器发送了1个小时的缓存头，这使chrome打开了缓存的文件，这与我编辑过的文件不同，这表明该文件不是保存的文件。

将服务器更改为可提供不带缓存头的静态内容后，一切运行顺利，文件保持正确同步！