VSCode 和 Stencil (tsx)：`debugger` 语句不会将浏览器置于调试模式
VSCode and Stencil (tsx): `debugger` statement doesn't put browser into debug mode
我对调试 JavaScript 很陌生，更不用说 Typescript，更不用说使用 tsx 文件（我假设是某种类型的反应式 Typescript 文件）的 Stencil 项目了。
我希望通过在代码中添加 debugger 语句，在 Chrome 中使用刷新，调试工具会出现。但是没有任何反应。如果我在同一个地方添加 console.log ，它会按预期运行。但是 debugger 语句没有任何反应。
怎么办？我不想到处调试大量 console.log。
顺便说一下，我正在使用 VSCode。不知道这是否相关。我在 https://github.com/microsoft/vscode-js-debug 中读到 JavaScript 调试应该内置到 VSCode 中。我不在乎我是在 VSCode 内部调试还是在 Chrome 内部调试 - 只要我能够以某种方式进行调试。
这里是存储库，如果有人想试一试或检查配置文件：https://github.com/NothingAG/adg-components
非常感谢。
显然构建工具 (nx) 运行生产构建，这就是 debugger 语句被自动过滤掉的原因。
要修复它，您可以 explicitly instruct Stencil to run a development build:
npm start -- --dev
您可以随时在 Chrome 开发人员工具中添加断点，而不是在代码中添加 debugger 语句。
- 在浏览器中加载您的应用程序
- 在 Chrome 中打开开发人员工具（例如在页面上 right-click 并选择“检查”）
- 在 Developer Tools 中选择选项卡“Sources”
- 点击 command-P 打开您要调试的文件。将出现一个输入字段，您可以在其中输入要调试的文件的名称
- 通过单击装订线中的行号添加断点
下次您的应用遇到断点时，调试器就会出现。
我对调试 JavaScript 很陌生，更不用说 Typescript，更不用说使用 tsx 文件（我假设是某种类型的反应式 Typescript 文件）的 Stencil 项目了。
我希望通过在代码中添加 debugger 语句，在 Chrome 中使用刷新，调试工具会出现。但是没有任何反应。如果我在同一个地方添加 console.log ，它会按预期运行。但是 debugger 语句没有任何反应。
怎么办？我不想到处调试大量 console.log。
顺便说一下，我正在使用 VSCode。不知道这是否相关。我在 https://github.com/microsoft/vscode-js-debug 中读到 JavaScript 调试应该内置到 VSCode 中。我不在乎我是在 VSCode 内部调试还是在 Chrome 内部调试 - 只要我能够以某种方式进行调试。
这里是存储库，如果有人想试一试或检查配置文件：https://github.com/NothingAG/adg-components
非常感谢。
显然构建工具 (nx) 运行生产构建，这就是 debugger 语句被自动过滤掉的原因。
要修复它，您可以 explicitly instruct Stencil to run a development build:
npm start -- --dev
您可以随时在 Chrome 开发人员工具中添加断点，而不是在代码中添加 debugger 语句。
- 在浏览器中加载您的应用程序
- 在 Chrome 中打开开发人员工具（例如在页面上 right-click 并选择“检查”）
- 在 Developer Tools 中选择选项卡“Sources”
- 点击 command-P 打开您要调试的文件。将出现一个输入字段，您可以在其中输入要调试的文件的名称
- 通过单击装订线中的行号添加断点
下次您的应用遇到断点时，调试器就会出现。