如何通过Chrome REPL调试React变量

Question

我有一个React TypeScript应用程序，它定义了以下内容：

index.tsx

import './initDefaultAccessContext';

然后在initDefaultAccessContext.ts中定义了一些内容。

const appName = 'something123';

如果要在chrome中调试应用程序，如何从REPL访问appName。

> appName 
and
> window.appName

以上两个均未定义。

如何访问变量/以这种方式在代码中定义的任何内容？

Answer 1

> window.appName

您无法在控制台window.appName中编写并期望它返回值，因为appName的作用域是内部只是IIFE的模块（而不是全局对象） ，查看运行时appName的值的唯一方法是在文件内的一个断点添加到所需的特定行，并在其中查看其值。

Answer 2

如果启用了源映射，则可以转到chrome dev工具，在Mac中按Command + O或Command + P，或者在Windows / Linux中按Control + O或Control + P打开源代码文件（您可以可以按源面板中的源文件名搜索）。找到并打开文件后，您需要找到要查找的行，然后通过单击行号列来添加断点。 （请访问此链接以获取有关chrome breakpoint的更多信息）

设置断点后，重新加载页面，您会看到浏览器在断点处暂停javascript执行。现在，您可以在devtools中切换到控制台选项卡，然后输入变量名appName或window.appName

还有另一种设置断点的方法，而无需实际进入devtools中的源映射。只需在源代码中要设置断点的行上添加语句debugger;。但是，如果您采用这种方法，则应该非常小心，并确保在调试后记得删除该语句。如果您忘记删除debugger;语句，并且代码进入了生产环境，则JavaScript将在用户使用您的应用程序时暂停执行。