How to use VS Code to debug Next.js applications All In One

xgqfrms發表於2024-07-25
JSAPP

How to use VS Code to debug Next.js applications All In One

difficulty: Medium / 難度: 中等

debug your Next.js frontend and backend code

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

image

https://nextjs.org/docs/pages/building-your-application/configuring/debugging

  1. Visual Studio Code

image

https://code.visualstudio.com/docs/editor/debugging

  1. Chrome DevTools

image

https://developer.chrome.com/docs/devtools?hl=zh-cn

demos

(🐞 反爬蟲測試！打擊盜版⚠️）如果你看到這個資訊, 說明這是一篇剽竊的文章，請訪問 https://www.cnblogs.com/xgqfrms/ 檢視原創文章！

refs

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 釋出文章使用：只允許註冊使用者才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

相關文章