Question

据我了解，如果创建ES6模块，则只能从本身就是模块的代码中导入它。这意味着非模块代码（即内联Javascript）或Chrome开发工具控制台永远无法访问模块中的代码。

是真的吗？有什么办法可以解决，因为这似乎是一个极端的限制。

Answer 1

您可以在Chrome的控制台中使用dynamic import。

import('path/to/module.js').then(m => module = m)

// [doSomething] is an exported function from [module.js].
module.doSomething()

Answer 2

您可以使用诸如window.myFunction = myFunction或window.myVariable = myVariable这样的行在全局名称空间中注册函数或变量。您可以在声明myFunction或myVariable的模块中进行此操作，也可以在已导入它们的单独模块中进行此操作。

完成此操作后，您就可以在Chrome DevTools控制台中使用myFunction和myVariable。

例如：

import myModule from '/path/to/module.js';
window.myModule = myModule;

// in the console:
myModule.foo();

（感谢@Evert在评论中提供此解决方案，尽管以一种相当round回的方式花了我一段时间才能弄清楚。）

Answer 3

您只能从其他模块导入一个模块，因为import是一个模块功能。

您是如何在ES6模块之前“导入”的？您没有，因为它不存在。实际上，您可以与E6模块进行交互，就像您在两个独立的非模块脚本之间进行交互一样。

Answer 4

将模块文件拖放到chrome开发者控制台中。
确保将其拖动到控制台的输入行部分（在>之后）。

（这适用于Windows 10下的Chrome 78）

Answer 5

这在node.js 12.12.0中使用typescript为我工作：

在我的main.ts中，导入permalink to specific version并将其设置在wtfnode名称空间上：

import * as wtf from 'wtfnode';
(global as any).wtfm = wtf;

在调试器控制台中，我现在可以访问wtfm：

wtfm.init();
wtfm.dump();

Answer 6

如果您使用 VSCode 和 Javascript Debugger for Chrome，则可以通过 ES6 模块使用 Chrome 开发工具。我在让它工作时遇到了一些麻烦，但这是值得的。 https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

VSCode 调试器启动一个新的 chrome 窗口，该窗口连接到 VSCode 调试器。您也可以像往常一样在此窗口中使用 Chrome Dev Tools (F12)。它适用于 ES6 模块，您可以设置断点、使用控制台、检查变量等...

如果您在设置调试器时遇到问题，这对我来说是这样的：

转到 VSCode 调试窗口 (CTRL+SHIFT+D) -> 从下拉列表中选择 Add Configuration -> 选择 Chrome Launch 或 Chrome Launch Legacy 以更改“launch.json”

我的launch.json：

{
  "name": "Launch Chrome Legacy",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:5000/auth/login",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true
},
{
  "name": "Launch Chrome",
  "request": "launch",
  "type": "pwa-chrome",
  "url": "http://localhost:5000/auth/login",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true
},

关键是使用"sourceMaps": true 和"url": "http://localhost:5000/auth/login" 而不是http://localhost:5000/blog"，这是我真正想要调试的页面。但是，当调试器打开新的 chrome 窗口时，我的页面被重定向到 /auth/login，所以我不得不使用这个 url。

您可以尝试禁用新调试器的预览版本并改用 Legacy 版本：在 VSCode 设置中关闭 Debug › JavaScript: Use Preview。
然后从 VSCode 的调试窗口运行 Launch Chrome Legacy
要在 VSCode 中设置断点，请从 Loaded Scripts 中打开 javascript 模块

如何通过开发工具控制台使用ES6模块

6 个答案: