我正在尝试调试一个React组件的getStaticProps()方法，该组件包含在我使用console.log()的页面中，如下所示：
export default class Nav extends React.Component {
render() {
return <nav></nav>;
}
async getStaticProps() {
console.log('i like output, though');
}
}然而，我既不能在提供应用程序的控制台上看到任何输出，也不能在浏览器的控制台上看到任何输出。我还尝试重新启动yarn dev并运行yarn build，看看它是否会产生输出。唉，没有雪茄。
那么，从getStaticProps()和getStaticPaths()生成和读取调试输出的正确方法是什么呢？
5条答案
按热度按时间svgewumm1#
因此，经过进一步的研究和测试，我发现
getStaticProps()只在页面组件上被调用。这就是为什么我看不到任何输出。当我将该方法添加到pages目录中的组件时，我能够在手动刷新浏览器页面时，在运行yarn dev的控制台中看到使用console.log()生成的调试输出（但不是在修改页面组件后的自动刷新上）以及在yarn build期间。ne5o7dgx2#
您可以轻松地调试下一个应用程序的服务器端代码。
1.要启用它，您需要将
NODE_OPTIONS='--inspect'传递给您的节点处理器。最好将它放在您的package.json文件中，您可以在其中以dev mode =〉"dev": "NODE_OPTIONS='--inspect' next dev"运行应用。1.现在在你的chrome浏览器中打开一个新的标签页，然后访问
chrome://inspect。这将打开chrome开发工具inspect，你可以在这里看到你的nextJs服务器在远程目标下。只需点击ìnspect。点击它将打开一个新的inspect窗口。1.现在，只需将调试器放入getStaticProps函数并重新加载客户端应用程序，您将在服务器端代码中看到断点。
我希望这能有所帮助。参考：https://nextjs.org/docs/advanced-features/debugging#server-side-code
qeeaahzv3#
getStaticProps在服务器端而不是客户端运行。
getStaticProps only runs on the server-side. It will never run on the client-side. It won’t even be included in the JS bundle for the browser.参考：https://nextjs.org/learn/basics/data-fetching/getstaticprops-details
fbcarpbf4#
使用当前的下一个版本（11.x），您可以使用console.log打印出getStaticProps（）函数中的任何数据。
您将在运行的终端中看到该输出
gjmwrych5#
您的console.log将在您的应用终端的控制台中工作，而不是在浏览器的控制台中。在那里您可以检查您的消息。
同样，如果你得到了数据[Object]，那么就在那个控制台中，使JSON.stringify（yourValue）。
如果它是一个比stringify更大的对象，你可以写JSON.stringify（yourValue，null，2），它将以JSON的方式显示。