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

// Variable in your module
var importantNumber = 1;

window.importantNumber = importantNumber;

如果你只有几个变量，这个方法可以很好地工作，但是如果你需要访问DevTools中的更多变量，我建议你去DevTools中的sources-tab，搜索你的模块并添加一个断点。当执行暂停时，你可以在DevTools控制台上访问该模块中的所有变量。

如果希望能够从控制台的全局作用域引用模块中创建的变量，则必须特意公开每个希望在控制台中可见的变量。（可能不是个好主意--模块的全部意义就是让东西变得更加模块化，没有全球污染），或者将一个对象赋给window，您可以将模块变量赋给window。

// in the console:

setTimeout(() => {
  window.myModule.foo();
  console.log(window.myModule.bar);
});

<script type="module">
  function foo() {
    console.log('doing foo');
  }
  const bar = 'a string bar';
  
  const thisModule = { foo, bar };
  window.myModule = thisModule;
  // If you ever reassign variables, you'll have to reassign them on thisModule too
  // or, only reference and reassign properties of thisModule, rather than create independent variables
</script>

对于其他感兴趣的人，如果你对它感到舒服，使用像Webpack这样的捆绑包。我不相信（至少在这一点上）浏览器本身能够在模块上使用DevTools（其他解决方案相当糟糕，而且使用起来也不太好）。
希望在将来，当所有主要的浏览器都能够支持ES6模块而不需要捆绑器时，我们将能够使用DevTools。

使用助手

我个人在开发中使用了一个小的帮助函数，它允许我在一个表达式中暴露一堆变量，例如，它使下面两个块等价：

window.playerOne = playerOne;
window.someClass = someClass;
window.localData = localData;

globalize({playerOne, someClass, localData});

辅助对象如下所示：

const globalize = function(variables) {
    Object.entries(variables).forEach(([name, value]) => window[name] = value);
};