javascript - 如何在浏览器中使用模块，同时从 DevTools 中引用变量和函数？

Question

我的 HTML 设置如下:

<script type="module" src="main.js"></script>

并且所有 ES6 模块都可以正常工作。唯一的问题是我现在无法从 DevTools 中引用任何内容(例如使用控制台并输入变量以查看其值或手动使用函数)。如何在能够使用 DevTools 的同时导入模块？谢谢!

Answer 1

在 DevTools 中使变量可访问的一种方法是在窗口对象上创建它:

// Variable in your module
var importantNumber = 1;

window.importantNumber = importantNumber;

如果您只有几个变量，此方法效果很好，但如果您需要访问 DevTools 中的更多变量，我建议您转到 DevTools 中的源选项卡，搜索您的模块并添加一个断点。当执行暂停时，您可以在 DevTools 控制台上访问该模块内的所有变量。