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 这里主要的问题还是端口,端口配置正确之后,一切问题迎刃而解。

相关推荐
Mebius19165 天前
开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工具
前端·react.js·typescript·开源·github·tailwindcss·nextjs
放逐者-保持本心,方可放逐9 天前
react 框架应用+总结+参考
前端·前端框架·react
白泽来了9 天前
我开源了一个短视频应用(Go+React)|DouTok2.0 项目介绍
微服务·开源·go·react
星辰大海141210 天前
react 基础学习笔记
前端·javascript·笔记·学习·react·1024程序员节
canonical-entropy11 天前
从React Hooks看React的本质
前端·前端框架·react·hooks·1024程序员节
不知名靓仔11 天前
React常用前端框架合集
前端框架·react
廖秋林12 天前
Vite React 项目绝对路径配置
javascript·typescript·react
长河13 天前
React18-useEffect函数
前端·react·1024程序员节
努力挣钱的小鑫18 天前
Nuxt3 SSR 服务端渲染部署 PM2 全流程(Nest.js 同理)
开发语言·javascript·ecmascript·ssr·ssr部署
Casta-mere20 天前
【Next.js 项目实战系列】08-数据处理
typescript·react·next.js·issue tracker