debugging 如何使用Next.js从客户端页面查看Console.log()?

vfhzx4xs  于 2023-11-22  发布在  其他
关注(0)|答案(2)|浏览(239)

我尝试使用console.log()调试我的客户端渲染(如果有一种简单的方法可以使用调试工具,请告诉),但我只能查看服务器渲染conole.logs()。
我想看看这个负责人的信息流

const statusHandler = async () => {
   console.log("TRYING TO SEE STUFF HERE BUT UNABLE TO")
    try {call an API
    .....
      });
    } catch (err) {
      console.log(err);
    }

字符串
这个函数statuslogic是从一个react组件调用的。
该页确实有getServerSideProps()来初始呈现包含数据库信息的页。
我试过使用浏览器开发工具,但页面刷新,我不能跟踪信息流。

5us2dqdw

5us2dqdw1#

您可以查看您的console.log()在CSR(客户端渲染)在浏览器中按F12或右键单击并单击检查和检查控制台选项卡。
对于SSR(服务器端渲染),您可以在终端中检入

kxeu7u2r

kxeu7u2r2#

要在客户端进行调试,您只需在浏览器中打开开发人员控制台。在Chrome和Safari中,您可以通过页面上的right-clicking并选择“检查”选项来完成此操作。
在这里,您将能够看到在客户端执行的代码中的任何console.log语句。
要使用debugger语句、breakpointsconsole.log在服务器端进行调试,您可以参考此Stack Overflow帖子中的答案:如何在Next.js中调试getStaticProps(和getStaticPaths)。
这是Chrome DevTools的官方文档

相关问题