NextJS 服务器端代码调试

NextJS 中如何调试服务器端代码,根据官方文档设置 Chrome 调试,这里有个坑,来看下面配置:

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

启动成功,有两个端口 9229、9230,需要监听在 9230,官方文档并没有提到。

打开 Chrome 浏览器输入网址,点击 Inspect

没有看到我们自己代码,根据官方文档说明,应该可以看到我们自己的应用名。

问题出现在端口上,需要打开 9230。

创建成功后点击新添加的 Inspect,可以我们的代码已经显示出来了。

这样可以正常 Debug 了,可以通过 VSCode Debug,添加一个 Attach 类型的 Debugger。

{
    "name": "Attach",
    "port": 9230,
    "request": "attach",
    "skipFiles": ["<node_internals>/**"],
    "type": "node",
    "cwd": "${workspaceFolder}"
},

总结

Debug 这里主要的问题还是端口,端口配置正确之后,一切问题迎刃而解。

相关推荐
大得36921 小时前
css水平居中+垂直居中
vue.js·react
亦世凡华、5 天前
React--》如何高效管理前端环境变量:开发与生产环境配置详解
react·vite·环境变量·env·env配置
Mebius191620 天前
开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工具
前端·react.js·typescript·开源·github·tailwindcss·nextjs
放逐者-保持本心,方可放逐24 天前
react 框架应用+总结+参考
前端·前端框架·react
白泽来了24 天前
我开源了一个短视频应用(Go+React)|DouTok2.0 项目介绍
微服务·开源·go·react
星辰大海141225 天前
react 基础学习笔记
前端·javascript·笔记·学习·react·1024程序员节
canonical-entropy1 个月前
从React Hooks看React的本质
前端·前端框架·react·hooks·1024程序员节
不知名靓仔1 个月前
React常用前端框架合集
前端框架·react
廖秋林1 个月前
Vite React 项目绝对路径配置
javascript·typescript·react