重复的映射Javascript源无法保存Chrome开发工具上的更改 [英] Duplicated Mapped Javascript Source not Saving Changes on Chrome's Dev Tools

问题描述

我正在制作一个加载了.js文件的本地网页(.html)，并且在使用Google Chrome浏览器的开发人员工具时遇到了麻烦.

I'm making a local web page (.html) that loads a few .js files and am having trouble using Google Chrome's Developer Tools.

定义

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

The problem I'm having has to do with the Source Panel: I have one source tab open with a specific file and when I open this file by clicking the console or the source file at the left, randomly a duplicate is created instead of just redirecting it to the one already open.

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

Both will have the same file-path:

两者都允许我写入和保存文件(甚至正确显示/隐藏星号)
其中只有一个会正确地将内容保存到磁盘.

Both will allow me to write and save the file (even showing/hiding the asterisk correctly)
Only one of them will correctly save the contents to disk.

我必须通过关闭两个文件然后再次打开来修复它，但是有时我看不到有重复的文件，这使我解决了一个问题，只是发现文件并未真正保存，完全恢复了我在刷新页面时对该文件所做的所有更改.

I have to fix it by closing both files and opening it again, but sometimes I can't see that there is a duplicated file and it causes me to fix a problem only to find out that the file wasn't actually saved, reverting completely every change I made to that file when I refresh the page.

问题示例

该错误的最常见出现是当我执行以下操作时:

The most common appearance of the bug is when I'm doing the following:

1. 我在控制台中标识了console.warn/console.error/syntax error日志
2. 我单击导致该日志的行(在控制台的最右侧)，然后重定向到源"面板，在该面板上将打开一个新的源文件"选项卡，然后开始对其进行编辑.
3. 源"选项卡中的某个位置是同一文件(具有相同文件路径)的另一个源文件:该选项卡应该是我正在编辑的选项卡:只有此原始选项卡才能正确保存对该文件所做的更改.
4. 我通过单击控制台解决了导致文件随机出现的JavaScript问题.
5. 我按Ctrl + S(或右键单击>保存")，表示未保存文件的星号消失了.当时，Chrome希望已经成功保存了文件，但没有成功(我可以通过在记事本中打开文件进行检查)
6. 我按F5键刷新页面.
7. Chrome会加载未保存的旧文件，从而删除我在源文件中所做的所有更改.

1. I identify a console.warn / console.error / syntax error log in the console
2. I click the line that caused that log (at the rightmost of the console) and I'm redirected to the source panel, where a new source file tab opens and I begin editing it.
3. Somewhere in the source tabs is another source file of that same file (with the same filepath): That tab should be the one I was editing: only this original tab will correctly save changes made to the file.
4. I fix the random javascript problem in the file that I was lead to by clicking the console.
5. I hit Ctrl+S (or Right Click > Save), the asterisk that indicates a unsaved file disappears. At that point Chrome expects to have saved the file successfully, but it didn't (I can check by opening the file in Notepad)
6. I hit F5 to refresh the page.
7. Chrome loads the old, unsaved file, erasing all the changes I made in the source file.

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

Sometimes the very same steps doesn't create a duplicate file, but all I have to do is refresh and try again until it does. Recreating this bug is a matter of chance, I can't predict or pinpoint its causes either.

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

When refreshing the page with the Dev Tools open, there's a small chance that it will creates a broken mapping, where the mapped project becomes only partially mapped

即使现在还好几秒钟:(仅重新启动chrome修复程序)

even though it was fine seconds before: (only restarting chrome fixes that)

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

This last paragraph may or may not have something to do with the problem but I can clearly select and open the "fake" file and the "real" file even though they have the same file path.

我制作了此gif文件，以显示开发工具中的文件路径如何彼此相同:http://i.imgur.com/ULlbskO.gif

I made this gif to show how the file paths are identical to each other in the Dev Tools: http://i.imgur.com/ULlbskO.gif

设置的详细信息

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

I'm using the local file system (file:///) strictly, there is no localhost or server being used to host my application, it is pure HTML + Javascript.

我正在使用Windows Chrome浏览器57(没有任何扩展名)，但是自2016年12月以来一直存在该问题.

I'm using Google Chrome 57 for Windows without any extensions, but I've been having that problem since December, 2016.

通过将文件夹添加到工作区并将其映射到过去曾经使用过的本地文件来映射我的项目.

My project was mapped by adding the folder to the workspace and mapping it to a local file, which used to work in the past.

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

Here's a picture of my configurations: http://i.imgur.com/IEmE3zG.png

我尝试过的事情

1. 清除Chrome的缓存
2. 从源面板"工作区中删除项目，然后再次添加
3. 重新安装Chrome
4. 将项目路径移动到其他地方
5. 在Google上搜索
6. 放手/接受失败(我对工具的依赖度过高)
7. 等待2个月，让某人也遇到此问题并将其发布到互联网上的某个地方

我需要帮助的问题

我可以通过任何方式最小化/修复此问题吗?

Can I minimize/fix this problem in any way?

以前有人处理过吗?

有人知道这是Chrome的错误还是我的工作流程有问题?

Does someone know if this is a Chrome bug or am I doing something wrong with my workflow?

推荐答案

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

Found the answer myself after several months working with web development.

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

The duplicated file has been fixed in Chrome since the time I made this question, but files keep loosing "connection" with the local file system (green dot that marks them as sync'd with local) randomly, which made me investigate and I finally found the reason:

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

What's happening is that Dev Tools is trying to save the file and, when it retrieves it it loads from cache (because my local web server was sending cache-specific headers), which makes the browser think that file file is not actually the one it saved, so it stops its syncronization!

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

To solve it, all I had to do is ensure my local web server is disabling any form of cache for my javascript files, which I can check from the network panel:

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

My local web server was sending cache headers for 1 hour, which made chrome open the cached file, which was different from my edited file which was an indication that the file is not the one it saved.

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

After changing the server to serve static content without the cache headers, everything went smoothly and files kept sync'd correctly!

这篇关于重复的映射Javascript源无法保存Chrome开发工具上的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！