Javascript 如何从开发工具控制台使用ES6模块

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

---

这是真的吗？有没有办法解决这个问题，因为这似乎是一个相当极端的限制。

您只能从其他模块导入一个模块，因为

import

是模块的一项功能

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

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

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

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

---

您可以在全局命名空间中使用类似于

window.myFunction=myFunction

或

window.myVariable=myVariable

的行注册函数或变量。您可以在声明了

myFunction

或

myVariable

的模块中执行此操作，也可以在已导入它们的单独模块中执行此操作

完成此操作后，您将能够从Chrome DevTools控制台使用

myFunction

和

myVariable

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

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

例如：

从'/path/to/module.js'导入myModule；
window.myModule=myModule；
//在控制台中：
myModule.foo（）；

---

（感谢@Evert在一篇评论中提供了这个解决方案，尽管这是一种相当迂回的方式，我花了一段时间才弄明白。）

按住模块文件并将其拖到chrome开发控制台中。
确保将其拖到控制台的输入行部分（在

之后）

---

（这在Windows 10下的Chrome 78上运行。）

这在

node.js 12.12.0

中对我有效，使用

typescript

：

在my

main.ts

中，我导入并将其设置在名称空间：

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

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

wtfm

：

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

---

您可以使用import从Chrome开发者控制台调用Javascript模块中包含的函数，如@Kin的回答所示

如果出现错误“TypeError:解析模块说明符失败”，请尝试使用模块文件的完整URL。例如，在本地运行IIS的Windows 10和Chrome 87上，这对我来说是可行的：

// Call doSomething(), an exported function in module file mymodule.js
import('http://localhost/mysite/myfolder/mymodule.js').then((m) => { m.doSomething(); });

---

如果使用VSCode和Chrome的Javascript调试器，有一种方法可以将Chrome开发工具与ES6模块一起使用。我费了点劲才让它工作起来，但这是值得的。

VSCode调试器将启动一个新的chrome窗口，该窗口连接到VSCode调试器。您也可以像往常一样在此窗口中使用Chrome开发工具（F12）。它与ES6模块一起工作，您可以设置断点、使用控制台、检查变量等

---

如果您在设置调试器时遇到困难，我的工作原理如下：

• 转到VSCode调试窗口（

  CTRL+SHIFT+D

  ）->从下拉列表中选择

  Add Configuration

  ->选择

  Chrome Launch

  或

  Chrome Launch Legacy

  以更改“Launch.json”

my 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

• 您可以尝试禁用新调试器的预览版本，并改用

  旧版

  版本： 关闭

  Debug›JavaScript：在VSCode设置中使用Preview

• 然后从VSCode中的调试窗口运行

  Launch Chrome Legacy

• 要在VSCode中设置断点，请从加载的脚本打开javascript模块

---

啊，如果我想从非模块代码中使用模块，我基本上会从

中删除

type=“module”

？你不需要。如果你以前在模块之前有两个javascript函数。你会如何从另一个调用一个？全局。好的……那么我如何加载模块（或从模块中加载函数）进入全局？如果您无法控制正在加载的模块，您可以编写一个单独的es6模块文件，导入您感兴趣的模块，并再次将其成员注册为全局成员。啊，我明白了，这就是我一直在寻找的解决方案，谢谢！对于带有

节点的网页包环境，需要使用什么路径dules

目录？我不能让任何东西组合工作。你想导入什么？一个ES6模块或一个由webpack创建的输出脚本？如果是后者，它不是ES6模块，我认为它不会工作。ES6模块。在这种情况下，只是尝试使用

不可变的
测试想法，它安装在
节点的本地e_modules
。我只是不知道在
import
功能中使用什么路径。这是一个小小的改进，在现代浏览器中，您可以执行
const m=wait import（'path/to/module.js'）；
要清楚，请编写
import
（和
window.myModule
）HTML文件中的语句。导航到该页面。然后打开控制台并使用
myModule
。这是我喜欢的。感谢您提交它。我无法使用
window。myModule
我必须使用数组语法才能工作。
import*作为“rxjs/operators”中的运算符；window['operators']=operators；