重復映射的Javascript源不能保存Chrome開發工具的更改

Question

我正在制作一個本地網頁（.html），它會加載一些.js文件，並且無法使用Google Chrome的開發人員工具。

定義

我遇到的問題與源面板有關：我打開了一個帶有特定文件的源選項卡，當我通過單擊左側的控制台或源文件打開此文件時，隨機創建一個副本而不是僅創建將其重定向到已經打開的那個。

兩者都將具有相同的文件路徑：

兩者都允許我編寫並保存文件（甚至正確顯示/隱藏星號）
只有其中一個會正確地將內容保存到磁盤。

我必須通過關閉兩個文件並再次打開來修復它，但有時我看不到有重復的文件，它導致我修復問題只是發現文件實際上沒有保存，完全恢復刷新頁面時我對該文件所做的每一個更改。

問題的例子

這個bug最常見的外觀是我正在做以下事情：

1. 我在console.warn識別console.warn / console.error / syntax error日志
2. 我單擊導致該日志的行（在控制台的最右側），然后我被重定向到源面板，在該面板中打開一個新的源文件選項卡，然后我開始編輯它。
3. 源選項卡中的某個位置是同一文件的另一個源文件（具有相同的文件路徑）：該選項卡應該是我正在編輯的選項卡：只有此原始選項卡才能正確保存對文件所做的更改。
4. 我通過單擊控制台修復了我所導致的文件中的隨機javascript問題。
5. 我按下Ctrl + S（或右鍵單擊>保存），指示未保存文件的星號消失。 那時Chrome希望成功保存文件，但它沒有（我可以通過在記事本中打開文件來檢查）
6. 我按F5刷新頁面。
7. Chrome會加載舊的未保存文件，刪除我在源文件中所做的所有更改。

有時，相同的步驟不會創建重復的文件，但我所要做的就是刷新並再試一次，直到它完成。 重新創建這個bug是偶然的，我也無法預測或查明其原因。

在打開開發工具的情況下刷新頁面時，它很可能會創建一個損壞的映射，其中映射的項目僅部分映射

即使它在幾秒鍾前很好:(只重新啟動chrome修復）

最后一段可能與問題有關，也可能沒有，但我可以清楚地選擇並打開“假”文件和“真實”文件，即使它們具有相同的文件路徑。

我創建了這個gif來展示Dev Tools中文件路徑是如何相互的： http://i.imgur.com/ULlbskO.gif ： http://i.imgur.com/ULlbskO.gif

設置細節

我嚴格使用本地文件系統（ file:/// ）， 沒有 localhost或服務器用於托管我的應用程序，它是純HTML + Javascript。

我使用谷歌Chrome 57 for Windows沒有任何擴展，但我自2016年12月以來一直遇到這個問題。

我的項目是通過將文件夾添加到工作區並將其映射到過去常用的本地文件來映射的。

這是我的配置圖片： http://i.imgur.com/IEmE3zG.png ： 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打開緩存文件，這與我編輯的文件不同，這表明該文件不是它保存的文件。

更改服務器以提供沒有緩存標頭的靜態內容后，一切順利，文件保持正確同步！