調試使用 ES6 模塊的 JavaScript 代碼

Question

TL;DR：如何從調試器訪問 ES 模塊中定義的變量/函數/名稱？

更多背景信息：我是一個相對有經驗的 JavaScript 程序員，但對模塊很陌生。 我在這里遵循了 MDN 上的教程： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules 。 他們在這里有一組很好的例子： https://github.com/mdn/js-examples/tree/master/modules

In that collection, say in the "basic-modules" example, (live code here: https://mdn.github.io/js-examples/modules/basic-modules/ ) there is, for example, a function called random在文件modules/square.js中。 假設我想在調試器中執行 function，只是為了嘗試一下，或者因為它是我的代碼並且我想測試/調試它，或者我想向另一個編碼器演示 function 的作用。 您希望在 REPL 或調試器中做的所有事情。 有沒有辦法做到這一點？ 我已經嘗試過 Firefox 調試器和 Chrome 調試器，但都沒有成功。

回到模塊之前的時代，該代碼將被放入全局命名空間（使訪問變得容易），或者被鎖定在 IIFE 中（使訪問變得不可能），或者可能在一些自制的模塊系統中（訪問取決於）。 我希望新的模塊系統仍然允許調試器訪問模塊內的名稱。

謝謝。

Answer 1

它在文檔中說：

最后但同樣重要的是，讓我們明確一點——模塊功能被導入到單個腳本的 scope 中——它們在全局 scope 中不可用。 因此，您將只能在它們被導入的腳本中訪問導入的功能，而您將無法從 JavaScript 控制台訪問它們。 您仍然會收到 DevTools 中顯示的語法錯誤，但您將無法使用您可能希望使用的一些調試技術。

以你之前的例子為例，你需要從 scope 中調用 function ，它是可見的，即它被導入的地方：

import { random } from 'path/to/square.js'

debugger; // you should be able to invoke random() from here