除錯

在對核心儲存庫做出貢獻、撰寫載入程式/外掛程式，甚至處理複雜專案時，除錯工具可能是你的工作流程的核心。無論問題是大型專案的效能低落還是無助的追蹤，下列公用程式都可以讓找出問題變得不那麼痛苦。

• 透過 Node 和 CLI 提供的 stats 資料。
• Chrome DevTools 和最新 Node.js 版本。

統計資料

無論是要手動篩選 這些資料 或使用工具來處理它，stats 資料在除錯建置問題時都非常有用。我們在此不會深入探討，因為有一個 專頁說明其內容，但要知道你可以使用它來尋找下列資訊

• 每個模組的內容。
• 每個區塊中包含的模組。
• 每個模組的編譯和解析統計資料。
• 建置錯誤和警告。
• 模組之間的關係。
• 還有更多...

此外，官方 分析工具 和 其他各種工具 會接受這些資料，並以各種方式將其視覺化。

DevTools

雖然 console 陳述在直接的場景中可能運作良好，但有時需要更強大的解決方案。正如大多數前端開發人員已經知道，Chrome DevTools 在除錯網路應用程式時是救命稻草，但它們不必就此打住。從 Node v6.3.0+ 開始，開發人員可以使用內建的 --inspect 旗標在 DevTools 中除錯節點程式。

讓我們從使用 node --inspect 呼叫 webpack 開始。

請注意，我們無法執行 npm 指令碼，例如 npm run build，所以我們必須指定完整的 node_modules 路徑

node --inspect ./node_modules/webpack/bin/webpack.js

應該會輸出類似以下內容

Debugger listening on ws://127.0.0.1:9229/c624201a-250f-416e-a018-300bbec7be2c
For help see https://node.dev.org.tw/en/docs/inspector

現在跳到瀏覽器中的 chrome://inspect，你應該會在 遠端目標 標題下看到你已檢查的任何活動指令碼。按一下每個指令碼下的「檢查」連結以開啟專用除錯器，或按一下 為 Node 開啟專用 DevTools 連結以進行會自動連線的階段。你也可以查看 NiM 擴充功能，這是一個便利的 Chrome 外掛程式，每次你 --inspect 一個指令碼時，它會自動開啟一個 DevTools 標籤。

我們建議使用 --inspect-brk 旗標，它會在指令碼的第一個陳述中中斷，讓你能夠瀏覽原始碼以設定中斷點並隨意開始/停止建置。此外，別忘了你仍然可以將參數傳遞給指令碼。例如，如果你有多個組態檔，你可以傳遞 --config webpack.prod.js 來指定你想要除錯的組態。