如何在VSCode中設置Next.js Debugger

web nextjs

透過vscode將debbugger attach到專案上

在開發Next.js項目時，當出現錯誤時，時常會使用console，但在有些情況下我們希望能停駐並查看目前的變數值，或者是執行順序，這時候console就不太好用了。我們能使用Debugger來進行偵錯並獲取更多的訊息。

本文將說明如何使用使用 Visual Studio Code (VS Code) 的內置工具，來為項目設置Debugger。

步驟一: 創建 launch.json 文件

在vscode的根目錄中有一個 .vscode 文件夾。如果沒有，請手動創建。並且現在在 .vscode 文件夾中創建一個名為 launch.json 的文件，並將以下配置添加到其中：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node-terminal",
      "name": "Debug Nextjs (Chrome)",
      "request": "launch",
      "command": "yarn next dev -p 3535",
      "serverReadyAction": {
        "action": "debugWithChrome",
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}",
        "killOnServerStop": false
      },
      "skipFiles": ["<node_internals>/**", "**/node_modules/**", "**/.next/**"]
    }
  ]
}

配置說明

  • type: 指定偵錯類型，這裡使用 node-terminal 來啟動一個新的終端運行命令。
  • name: 偵錯配置的名稱，您可以根據需要修改。
  • request: 請求類型，這裡使用 launch 表示啟動偵錯會話。
  • command: 要運行的命令，這裡使用 yarn next dev -p 3535 啟動開發伺服器並指定端口為 3535。
  • serverReadyAction: 配置在伺服器準備好後自動在 Chrome 中啟動偵錯。
    • action: 指定操作類型，這裡是 debugWithChrome。
    • pattern: 用於匹配伺服器啟動消息的正則表達式。
    • uriFormat: URI 格式化字符串。
    • webRoot: 設置為 ${workspaceFolder} 以指定項目的根目錄。
    • killOnServerStop: 設置為 false 以避免在伺服器停止時自動終止偵錯。
  • skipFiles: 配置要跳過的文件或目錄，這裡跳過 Node.js 內部文件、node_modules 和 .next 文件夾。

步驟二: 啟動偵錯

  1. 打開 VS Code，按 F5 或使用快捷鍵 Ctrl+Shift+D 打開偵錯面板。
  2. 在偵錯配置下拉菜單中選擇 "Debug Nextjs (Chrome)"。
  3. 點擊綠色的啟動按鈕或按 F5 開始偵錯。

現在，我們現在已經VSCode將Next.js的項目完成配置，我們現在能在 VS Code 中進行偵錯。當啟動偵錯會話時，VS Code 將自動啟動開發伺服器並在 Chrome 瀏覽器中附加偵錯。