在Chrome中使用Browserify的代碼映射

Question

我只是試用了browserify，我無法使用源映射工作。在package.json我有：

"build": "browserify --debug myApp.js -o bundle.js"

我npm run build運行它，它生成一個bundle.js文件具有在底部這樣的線，其我假定是源圖：

//# sourceMappingURL=data:application/json;charset:utf-8;base64,eyJ2ZXJzaW9uIjozLCJz....

當我在Chrome中打開我的index.html時，它正在運行 - 所有myApp.js都被編譯爲bundle.js並且功能完整。但是在開發工具/源中，我只能看到編譯的bundle.js。我已啓用「啓用Javascript源地圖」，並且正在使用Chrome 45.我還有其他事情要做，以便讓代碼地圖工作？謝謝。

我也嘗試通過驅魔者來創建一個bundle.js.map來代替。仍然不起作用。

Answer 1

想通了。 Browserify工作正常 - //# sourceMappingURL=... 行是源地圖工作所需要的。但是，要使源地圖在Chrome（45）中可見，您需要在開發人員工具面板關閉的情況下加載頁面，然後您需要將其打開。如果您按照該順序執行操作，則會看到按源映射正確列出的原始源文件。

但是，如果您在開發人員工具面板已打開的情況下重新加載頁面，則只能看到已編譯的源文件。 我個人認爲這是一個錯誤。