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

相关推荐
柯北(jvxiao)4 天前
Vue vs React 多维度剖析: 哪一个更适合大型项目?
前端·vue·react
袋鼠云数栈前端5 天前
扣子 Coze 产品体验功能
大数据·ai·react
Casta-mere8 天前
React SSR 水合问题
前端·react.js·前端框架·ssr
想你依然心痛10 天前
React 表单处理:移动端输入场景下的卡顿问题与防抖优化方案
react
aiguangyuan12 天前
Vue 服务端渲染 Nuxt 使用详解
vue·前端开发·ssr
亦世凡华、14 天前
React--》实现 PDF 文件的预览操作
经验分享·pdf·react·pdf预览
技术路上的探险家16 天前
Web3:在 VSCode 中使用 Vue 前端与已部署的 Solidity 智能合约进行交互
vscode·web3·区块链·交互·react·solidity·ethers.js
友莘居士21 天前
Dify中的Agent和发现和调用mcp工具两个节点调用的异同
agent·react·dify·functioncalling·mcp
aiguangyuan22 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
叶 落1 个月前
Component cannot be used as a JSX component
typescript·react