使用bundle.js

工具時作出反應，瀏覽器調試：Chrome開發人員工具，ReactJs和的WebPack使用bundle.js

也許是當我切換到使用的WebPack捆綁，但最初的時候，我開始我的項目，我能夠捆綁我的js到一個bundle.js文件中，但仍然可以訪問瀏覽器調試工具中的文件。現在，我在我的js文件夾中的瀏覽器中看到的所有內容都是bundle.js

使用webpack如何恢復在瀏覽器調試器中查看所有Javascript文件，以便可以執行插入斷點等操作？

來源

2015-09-28 Nick Pineda

經過很長時間的毫無意義地使用一堆打印語句，我終於回去瞭解如何做到這一點。

這裏是你如何讓你的再次使用斷點能力以後，捆綁：

1）

轉到您的webpack.config.js文件和設置從「真」到devtools 「源地圖」或@MichelleTilley在她的回答中解釋的其他選項之一。

webpack.config.js（這裏有一個例子）

module.exports = { 
    entry: "./js/app.js", 
    output: { 
    filename: "js/bundle.js" 
    }, 
    debug: true, 
    devtool: "#eval-source-map", 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel' 
     } 
    ] 
    } 
};

2）

也像@MichelleTilley在她的答案說明你可能需要啓用在Chrome的devtools選項。

3）

這個時候你去調試，你將不得不尋找剛剛任命了新的文件夾後「」這是超級難以注意！

感謝下面的發佈圖像的Stackoverflow答案，我終於找到了該文件夾的位置。

Configure webpack to allow browser debugging

來源

2015-12-13 01:33:47

Can任何人都可以告訴哪些「Chrome中的devtools選項」能夠使這項工作成爲可能？我在FireFox中使用了它，但在Chrome中，我可以以明文形式查看JavaScript，但我的中斷點並未停止。在Firefox中，捆綁的腳本非常混亂，所以我喜歡Chrome將它們顯示在文件夾中的方式，但我必須先讓它工作。 – newman

啊，我現在在Chrome devtools中看到「啓用JavaScript源代碼地圖」和「啓用CSS源代碼地圖」，並且默認都選中。有趣的是，經過一段時間後，Chrome現在也在工作。去搞清楚。 – newman

您可以使用the devtool option讓webpack生成源地圖，其中（when enabled in the Chrome devtools options）將允許Chrome將代碼bundle.js（甚至可能會縮小）轉換爲原始源代碼。

對於開發，我將此選項設置爲eval-source-map或cheap-eval-source-map，對於生產，我可以將其關閉或生成單獨的源地圖文件source-map。

來源

2015-09-28 15:35:54

記得有人建議高「源貼圖」我要去嘗試一下，讓你知道如何去！ –

我將這些添加到我的webpack.config.js文件中：debug：true， devtool：「＃eval-source-map」，並且在開發工具中爲js啓用了源映射，但我仍然只能看到bundle.js –

回答

相關問題