vscode调试next本文主要介绍如何在vscode里快速调试next的代码(包括服务端代码调试和客户端调试，及代码段

在日常调试js、ts代码时，一般常规都是快速使用console.log去打印日志调试。使用console.log会存在有一些问题(上线要设置去除日志的打印、增加无效代码、泄露些关键信息、console.log被改写等)。除了这种常规调试方式，本文主要介绍如何在vscode里快速调试next的代码(包括服务端代码调试和客户端调试)。

1、`vscode 调试模式`

vscode的调试器与目标应用程序之间的链接方式：Launch(启动)、Attach(附加)

Launch(启动)
- vscode 将启动一个新的进程作为目标应用程序，并在该进程中附加调试器
Attach(附加)
- 通过为一个已经在运行且还不支持调试的程序注入一个调试器，让这个程序从不支持调试变成支持调试

演示案例：

创建一个next 项目
```
npx create-next-app@latest
```

在工作区.vscode里新增launch.json文件，如下配置以Launch(启动)调试next

{
  "configurations": [
    {
      "type": "node-terminal",
      "request": "launch",
      "name": "调试服务端",
      "command": "npm run dev"
    },
    {
      "type": "chrome",
      "name": "调试客户端",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "type": "node-terminal",
      "name": "调试服务端和客户端",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

Screenity video - Jul 7, 2024.gif 可以查看最终是在服务端调试还是客户端调试。是ssr触发|rsc触发|csr触发,其中一种触发

2、`Code Runner`运行部分代码

在next中如果要运行部分代码，但是这时候又不想直接用vscode的调试模式，这时候可以使用Code Runner，可以直接运行对应代码

Screenity video - Jul 7, 2024 (1).gif

vscode调试next

1、vscode 调试模式

2、Code Runner运行部分代码

参考

1、`vscode 调试模式`

2、`Code Runner`运行部分代码