nextjs debug(client and server side)

已于 2023-12-01 11:07:46 修改 · 1.7k 阅读

文章标签：

#前端 #node.js

于 2023-12-01 11:02:46 首次发布

试了很多方法，发现只有这种好似：

一、修改package.json

package.json

{
  "scripts": {
    "debug": "cross-env NODE_OPTIONS='--inspect' next dev"
  }
}

二、下载cross-env

note：不下载，Node_options 不识别

参考：cross-env - npmRun scripts that set and use environment variables across platforms. Latest version: 7.0.3, last published: 3 years ago. Start using cross-env in your project by running `npm i cross-env`. There are 6088 other projects in the npm registry using cross-env.https://www.npmjs.com/package/cross-env

pnpm i cross-dev -D

pnpm list 

输出：
....
cross-env 7.0.3    
.....

三、启动服务

pnpm debug
******************
输出
*****************
> next-template@0.0.2 debug /data2/nextjs/petai_liu
> NODE_OPTIONS='--inspect --inspect-port=9229' next dev

Debugger listening on ws://127.0.0.1:9229/a4d9b95d-918f-4087-8393-a9a8575bf2ff
For help, see: https://nodejs.org/en/docs/inspector
Starting inspector on 127.0.0.1:9229 failed: address already in use
   the --inspect option was detected, the Next.js router server should be inspected at port 9229.
Starting inspector on 127.0.0.1:9229 failed: address already in use
  ▲ Next.js 13.5.6
  - Local:        http://localhost:3000
  - Environments: .env
  - Experiments (use at your own risk):
     · serverActions

 ✓ Ready in 4.3s

note：关注“NODE_OPTIONS='--inspect --inspect-port=9229' next dev” 这部分输出，因为我运行的环境是linux，在windwos环境，会启动多个进程（4个）; 下面需要关联进程id与vscode源码关联的时候，需要选择主进程，即包含上面信息的进程。

四、关联主进程

按住组合键：ctrl + shift + P ，选择Debug：Attach to Node Prcess

然后在进程i列表中选择主进程，port：9229，进程信息包含（NODE_OPTIONS='--inspect --inspect-port=9229）

选择主进程之后，选择vscode左边的debug按钮，查看

五、进行代码调试

1、打开浏览器，输入地址，一般为：http://localhost:3000

2、在代码进行打断点，开始调试

参考

Command-line options

The following table lists the impact of various runtime flags on debugging:

Flag	Meaning
--inspect	Enable inspector agent; Listen on default address and port (127.0.0.1:9229)
--inspect=[host:port]	Enable inspector agent; Bind to address or hostname host (default: 127.0.0.1); Listen on port port (default: 9229)
--inspect-brk	Enable inspector agent; Listen on default address and port (127.0.0.1:9229); Break before user code starts
--inspect-brk=[host:port]	Enable inspector agent; Bind to address or hostname host (default: 127.0.0.1); Listen on port port (default: 9229); Break before user code starts
node inspect script.js	Spawn child process to run user's script under --inspect flag; and use main process to run CLI debugger.
node inspect --port=xxxx script.js	Spawn child process to run user's script under --inspect flag; and use main process to run CLI debugger. Listen on port port (default: 9229)