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

相关推荐
AI_Auto6 小时前
AI Agent系列(八) -基于ReAct架构的前端开发助手(DeepSeek)
人工智能·react·ai agent
YiHanXii1 天前
Axios 相关的面试题
前端·http·vue·react
百锦再2 天前
Reactive编程:应用场景和传统比较
运维·开发语言·javascript·python·flask·react·tornado
冴羽yayujs4 天前
SvelteKit 最新中文文档教程(12)—— 高级路由
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
shmily_yyA5 天前
Nextjs15 - 什么是CSR、SSR、SSG和ISR
前端·react
小周不摆烂5 天前
React 揭秘:从新手到高手的进阶之路
前端框架·react
渴望成为python大神的前端小菜鸟6 天前
2025前端面试题(vue、react、uniapp、微信小程序、JS、CSS、其他)
前端·javascript·vue.js·面试·微信小程序·uni-app·react
冴羽yayujs11 天前
SvelteKit 最新中文文档教程(6)—— 状态管理
前端·javascript·vue.js·前端框架·react·svelte·sveltekit
任磊abc15 天前
在react当中利用IntersectionObserve实现下拉加载数据
前端·react·observer·下拉加载·intersection
HaanLen17 天前
React19源码系列之createRoot的执行流程是怎么的?
react·react19源码