除錯與開發輔助工具 - daniel-qa/Vue GitHub Wiki

語法檢查

npm run lint

• debugger

handleClick(val) {
  // eslint-disable-next-line no-debugger
  debugger
  console.log('點擊了:', val)

  this.button1 = this.button1 === val ? '' : val
}

// eslint-disable-next-line no-debugger

只針對這一行禁用規則

適合測試或暫時排查問題

• _加底線 (忽略宣告未使用變數)

ESLint 會檢查 「定義了卻沒用到的變數」：

chainWebpack: config => {
  // 你沒有用到 config
}


ESLint 就會噴錯：

'config' is defined but never used  no-unused-vars


✅ 解決方法之一：把變數改成 _config

chainWebpack: _config => {
  // 沒有用，但 ESLint 不會再抱怨
}

分組顯示 log

• Consol Group

console.group('測試群組')
console.log('這是第一條訊息')
console.log('這是第二條訊息')
console.groupEnd()

輸出

▼ 測試群組
    這是第一條訊息
    這是第二條訊息

• console.groupCollapsed

console.groupCollapsed('🧪 偵錯細節')
console.log('這裡是超多細節訊息')
console.groupEnd()