Closure編譯器源map =空（Chrome）或錯誤（Firefox）代碼窗口

Question

我在' src '文件夾中有一組JavaScript文件，由Closure Compiler在' src / comp '中的單個文件cw-around.js中編譯，生成的源映射cw-around.js.map也在' src / comp '中。

“//＃sourceMappingURL = xxx”位於編譯文件cw-around.js的末尾 。 xxx是cw-around.js.map的完整HTTP鏈接（本地Web服務器），並在瀏覽器中成功測試。 {“version”：3，“file”：“cw-around.js”是cw-around.js.map文件的開頭

在開發模式/源文件列表中，我可以看到Chrome和Firefox中的相關文件（當我輸入錯誤的xxx時，我只能看到已編譯的cw-around.js文件）。

在那里，當我雙擊相關文件（ cw-demodata.js ，其中一個包含在編譯文件中的JavaScript文件名）時：

1. 在Chrome 58或61 （“啟用了JavaScript源地圖”+“檢測到源地圖”）中， 會顯示一個空代碼窗口 。

2. 在Firefox 54 （“show original sources”+“devtools.source-map.locations.enabled; true”）中， 顯示我的調用網頁的HTML代碼 。

怎么了？ 如何調查以找出什么是錯的？

Answer 1

我剛才遇到了同樣的問題，它來自sourceMapLocationMappings未正確設置。 在源映射中，（ "version"和"file"旁邊）有一個"sources": []條目，它告訴瀏覽器在哪里找到實際的源文件（不是源映射）。

就像我一樣，從子文件夾編譯資產，子文件夾路徑在這個sources數組中（即它是"sources": ["src/comp/foo.js"]而不是"sources": ["foo.js"] ）。 瀏覽器試圖從我的網絡服務器請求src/comp/foo.js ，它顯然不存在，因為foo.js直接存在。

解決方案是設置正確的sourceMapLocationMappings 。 使用closure-compiler cli，你可以使用--source_map_location_mapping "\\"src/comp/foo.js^|foo.js\\"" 。 使用ant任務，將sourceMapLocaionMapping="src/comp/foo.js|foo.js"到任務調用中。

這將"sources"調整為直接指向["foo.js"] ，然后由您的網絡服務器提供，並可由開發工具找到。

編輯：根據http://stackoverflow.com/a/29542669在--source_map_location_mapping添加雙引號

Answer 2

我找到了解決問題的方法：編譯js文件並在與js文件相同的目錄中生成源映射。 相關的js文件現在可以在Chrome和Firefox中正確顯示。

以前，在成功打開已編譯的js文件和源映射之后，似乎瀏覽器無法找到並加載未編譯的js文件。 在控制台中有一條錯誤消息可以很快發現問題...