前端除錯專案時，專案是基於webpack打包的，所以在谷歌瀏覽器中，只能找到打包後的檔案，而不是打包之前的專案原始檔，這樣不便於前端的除錯。怎麼在Source下開啟想要除錯的檔案呢，有如下解決辦法。

　　一 、非webpack構建的專案下，快速檢視相關的程式碼

　　　　F12開啟除錯面板、開啟source欄、點選open file（或者ctrl+p）、輸入需要除錯的檔名，然後就可以開始進行除錯了。

　　　　

 

　　二、webpack構建的專案下，快速檢視相關的程式碼　　　

　　　　在webpack打包的專案中，因為程式碼都被壓縮混淆了，所有我們除錯有時候也是無從下手。不過，chrome也為我們完整的保留了壓縮混淆前的程式碼結構。在Page下面的 webpack://. 欄目下。我們可以完整的看到原始專案的結構以及元件了。我們就可以針對需要的元件進行除錯了。不過，值得注意的是，當我們修改這些元件的程式碼之後再執行，會發現還是執行原來的。因為chrome正在執行還是壓縮混淆之後的程式碼。而你修改的只是副本之類的。 　　　　 　　　　不過有時候開啟谷歌除錯時，發現Page下沒有 webpack://.這一欄，而只有Wasm，這時候是不能通過Ctrl+p搜尋出想要除錯的原始檔的。 　　　　 　　　　接下來就需要在專案的webpack.config.js進行配置，加入這行程式碼：devtool: "cheap-module-eval-source-map", 　　　　

 

　　　　重新執行專案後，再進行除錯，就可以通過Ctrl+P搜尋到需要除錯的檔案了。