How/where 在 NextJS 应用程序中设置断点？

Question

我正在使用 nextjs，但不知道如何或在何处设置浏览器中的断点。

使用 Chrome 开发工具，当我扩展 sv.moxne.net（我的开发域）时，我看到的是编译资产，而不是源资产。

当我在 webpack:// 下查看时，我可以看到一个类似于我的源树的文件夹结构，但是展开它会显示每个文件中的 2 个。每个名字都有不同的哈希值。

这对我来说很陌生。过去，我从未 运行 使用支持 SSR 的 React 应用程序。

我怎么知道在哪里设置断点？

Answer 1

你有两个选择：

1. 在devtools的Sources窗格中，按CTRL-P并写下你要调试的文件名，如果你有两个版本选择最后带[sm]的那个看看你写的原始代码。添加断点并刷新页面

2. 在您的文件中，在要调试的行前添加关键字 debugger

someCode(); debugger theCodeIWantToDebug();