在 next.js 中调试 fetch 操作答案

【问题标题】：Debugging fetch operations in next.js在 next.js 中调试 fetch 操作
【发布时间】：2021-06-13 18:51:23
【问题描述】：

所以我想调试我的 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。这部分工作是因为反应组件和 next.js 页面将被调试。问题是 getStaticProps() 的 fetch 调用不会。

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

那么如何调试这些 next.js 函数，例如 getStaticProps() ？我还应该给 next.js 写一个问题单吗？

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

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

【问题讨论】：

getStaticProps/getStatcPath/getServerSideProps 都在服务器上运行，因此它们的任何输出都将在您启动服务器的终端上可用，而不是在浏览器/调试器控制台上.
@juliomalves 我知道。那就是带有“NODE_OPTIONS='--inspect' next dev”的 2. 部分开始发挥作用。问题是，它根本不起作用。
一个快速而肮脏的解决方案是将调试值附加到返回的道具return: { props: { post, debugValue }} ，然后将其记录在接收该道具的 React 组件中（可能不涵盖所有情况）。

标签： javascript node.js reactjs next.js

【解决方案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' : ''}`)
  // ...
}

【讨论】：