在NextJS应用中如何/在何处设置断点？

Question

我正在使用nextjs，但无法弄清楚如何或在哪里在浏览器中设置断点。

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

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

这对我来说很陌生。过去，我从未使用启用了SSR的react应用程序来遇到这个问题。

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

Answer 1

您有两个选择：

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

2. 在文件内，在要调试的行之前添加关键字function js_buildHTML(input_text) { var html = ''; html += 'some' + input_Text + 'content'; html += 'some content'; $('#id_myList').after(html); }

debugger