使用调试器映射作用域功能

此功能在调试源映射代码时非常有用。它使您可以查看原始源中的变量。还可以检查生成的作用域中的变量（例如，包含所有连接模块文件的捆绑文件）。

让我们看看它是如何工作的。如果您想一起学习，请使用此示例。

1. 打开示例页面，然后使用**工具 > Web 开发人员 > 调试器**打开调试器（或按Ctrl + I，然后选择调试器）。

2. 在左侧的“源”面板中选择“bundle.js”文件，然后在increment函数的第 102 行设置断点。

3. 当您单击页面上的“递增”按钮并命中断点时，会在右侧面板的“调用堆栈”下方添加一个额外的部分，以显示从原始作用域映射的变量，如下所示

4. 尽管这很有用，但如果您能够查看原始代码（在它打包到“bundle.js”文件之前），那就更好了。右键单击源代码，上下文菜单现在包含一个“跳转到原始位置”选项，如下所示。

5. 单击“跳转到原始位置”。调试器将打开文件“increment.js”，以便您可以查看原始代码。请注意，您的断点已在此处设置在原始代码中，就像它在“bundle.js”文件中对应的行中一样。并且，由于“作用域”面板中已选中“映射”，您还可以看到原始代码中的变量符号。

使用此功能在资源方面代价很高，但在您必须调试使用 webpack 或类似工具打包的源代码时，它确实可以让您的生活更轻松。