你之前一直隻用控制台調試嗎？你是否對其輸出的順序頭疼不已？用很長時間才發現丢失了對象？讓我們面對現實...幾乎每個人都不得不重複這種方法，包括我自己。console.log 不是且永遠不是調試的銀彈
調試器是一個伴随我們多年但因為種種原因人們不再Node世界中使用。我們來自NodeJS，VSCode和Jetbrains的朋友建立了大量工具，幫助我們“停止”應用程式，并在那個時刻獲得應用程式的目前狀态。NuxtJS，另一方面，嘗試啟動和運作調試器一直很痛苦，難以搞定，是以人們就傾向于放棄并開始使用console.log。
好吧，恐懼不是我的朋友。事實上我有一個快速，安全并且好用的方案來解決你所有的問題！其實，NuxtJS的調試比大家想象中的更容易，我想讓你了解它，因為幾乎沒有關于這個主題的文檔，希望這讓你的生活更輕松。
項目配置
打開你的nuxt.config.js并轉到build屬性，因為我們要修改extend方法。extend(config, ctx) {
// Added Line
config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map'
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
這行什麼意思？
config.devtool是Webpack的一個屬性，它允許我們配置如何生成JS的SourceMap(參考)
eval-source-map是一個與行号完全比對的SourceMap，這有助于我們在用戶端進行調試。(更多資訊)
inline-source-map與上一個非常相似，但有一個例外，即在bundle中添加為DataUrl。 它幫助我們在伺服器中調試我們的NuxtJS應用程式。 (更多資訊)
注意：判斷開發環境，不建議在生産中使用它。
使用nodemon運作NodeJS調試器
我們将使用一個名為nodemon的優秀開發工具，它基本上讓我們可以觀察項目中的任何變化并自動重新開機伺服器。
要使用nodemon運作NodeJS調試器，隻需添加标志--inspector即可！{
"scripts": {
"dev": "nodemon --inspect node_modules/.bin/nuxt",
}
}
WebStorm
配置服務端
正常配置npm run dev項目即可
配置用戶端
添加 Javascript Debug，URL應該是Nuxt将運作的URL，但我建議使用Chrome并啟用“確定在加載腳本時檢測到斷點”選項并儲存！
如何同時運作
首先以調試模式🐞運作服務端，項目正确加載後，選擇用戶端運作配置并單擊相同的圖示。它應該打開一個新的chrome執行個體。
現在我們完全準備好調試我們的程式了！🎉