如何/在哪里设置 NextJS 应用程序中的断点？

Question

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

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

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

这对我来说很陌生。我过去从未在启用 SSR 的 React 应用中遇到过这种情况。

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

Answer 1

你有两个选择：

1. 在 devtools 的 Sources 窗格中，按 CTRL-P 并写入要调试的文件的名称，如果您有两个版本，请选择末尾带有 [sm] 的一个以查看您的原始代码写道。添加断点并刷新页面

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

someCode(); debugger theCodeIWantToDebug();