javascript - 在 next.js 中调试获取操作

Question

所以我想调试我的 next.js 应用程序。问题是很大一部分不会调试。所以我添加了 chrome 附加调试器(在 launch.json 中):

        {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:3010",
        "webRoot": "${workspaceFolder}"
    }

所以我使用它的方式是在终端中运行:“npm run dev”，然后在 vscode 中按 F5。 这在一定程度上起作用，因为 react 组件和 next.js 页面将被调试。问题是使用 getStaticProps() 进行的提取调用不会的。

所以我查看了 next.js 和 there 的文档它是写的，使用像这样的脚本: "dev": "NODE_OPTIONS='--inspect' 下一个开发者" 然后，当我在终端中使用“npm run dev”运行 next 时，出现构建错误:命令“NODE_OPTIONS”写错或找不到。

那么我该如何调试像 getStaticProps() 这样的 next.js 函数呢？ 我还应该给 next.js 写一张问题单吗？

编辑:还应该提到 API 是 asp.net 核心 API，而不是 next.js API。

编辑 2:现在我通过使用 SWR 绕过了这个问题包。

Answer 1

我认为你可以利用 Preview Mode .它在请求时间而不是构建时间呈现页面，以便您的调试器/日志应该工作。您必须更新 getStaticProps 函数以使用 context.preview 才能使其正常工作:

export async function getStaticProps(context) {
  // If context.preview is true, append "/preview" to the API endpoint
  // to request draft data instead of published data. This will vary
  // based on which headless CMS you're using.
  const res = await fetch(`https://.../${context.preview ? 'preview' : ''}`)
  // ...
}