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

相关推荐
csj503 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
im_AMBER2 天前
React 03
前端·笔记·学习·react.js·前端框架·react
Lethehong2 天前
上下文工程实践:利用GLM-4.6和TRAE SOLO打造新粗野主义风格音乐创作网站
react·trae·glm我的编程搭子·glm-4.6
wanfeng_093 天前
stripe/paypal
react·ts·nextjs·paypal·stripe
zwjapple3 天前
react+springboot的Docker部署
docker·部署·springboot·react
董厂长4 天前
阅读:REACT: SYNERGIZING REASONING AND ACTING INLANGUAGE MODELS(在语言模型中协同推理与行动)
人工智能·语言模型·agent·react
csj509 天前
前端基础之《React(1)—webpack简介》
前端·react
千码君201614 天前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
前端OnTheRun20 天前
React18学习笔记(四) 路由案例--记账本
react·router
whltaoin23 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型