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

相关推荐
whltaoin2 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
PyAIGCMaster6 天前
我的项目开发的一般流程,供交流
react·nextjs
aesthetician7 天前
ReactFlow:构建交互式节点流程图的完全指南
前端·流程图·react
fcm198 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
知识分享小能手9 天前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react
知识分享小能手10 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
知识分享小能手19 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
lypzcgf20 天前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
是罐装可乐21 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
知识分享小能手24 天前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react