Cómo usar módulos ES6 desde la consola de herramientas de desarrollo

Según tengo entendido, si creo un módulo ES6, solo puedo importarlo desde un código que es en sí mismo un módulo. Esto significa que el código que no es de módulo, es decir, Javascript en línea, o la consola de herramientas de desarrollo de Chrome nunca puede acceder al código que está en un módulo.

¿Es eso cierto? ¿Hay alguna forma de evitar esto porque parece una limitación bastante extrema?

Puedes usar importación dinámica dentro de la consola de Chrome.

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

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

Puede registrar la función o variable en el espacio de nombres global con una línea como window.myFunction = myFunction o window.myVariable = myVariable. Puedes hacer esto en el módulo donde myFunction o myVariable están declarados o hacerlo en un módulo separado donde han sido importados.

Una vez que hayas hecho esto, podrás usar myFunction y myVariable desde la consola de Chrome DevTools.

Por ejemplo:

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

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

(Dé crédito a @Evert por proporcionar esta solución en un comentario, aunque de una manera bastante indirecta que me llevó un tiempo descubrir).

Puede esperar a importación dinámica dentro de la consola de Chrome:

const Module = await import('./path/to/module.js')
Module.doSomething()

Esa importación dinámica es más o menos equivalente a:

import * as Module from './path/to/module.js';
Module.doSomething()

Hay una manera de usar Chrome Dev Tools con módulos ES6, si usa Código VSC y el Depurador de Javascript para Chrome. Tuve algunos problemas para hacerlo funcionar, pero valió la pena.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

El depurador de VSCode abre una nueva ventana de Chrome que está conectada al depurador de VSCode. También puede usar Chrome Dev Tools (F12) en esta ventana como de costumbre. Funciona con módulos ES6 y puedes establecer puntos de interrupción, usar la consola, inspeccionar variables, etc…

En caso de que tenga problemas para configurar el depurador, así es como funcionó para mí:

• Vaya a la ventana de depuración de VSCode (CTRL+SHIFT+D) -> seleccionar Add Configuration del menú desplegable -> Seleccionar Chrome Launch o Chrome Launch Legacy para cambiar “lanzamiento.json”

mi lanzamiento.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
},

La clave estaba en usar "sourceMaps": true y "url": "http://localhost:5000/auth/login" en lugar de http://localhost:5000/blog", que es la página que realmente quiero depurar. Sin embargo, cuando el Depurador abre la nueva ventana de Chrome, mi página fue redirigida a /auth/loginasí que tuve que usar esta url.

• Puede intentar deshabilitar la Versión de vista previa del nuevo depurador y usar el Legacy versión en su lugar: Apagar Debug › JavaScript: Use Preview en la configuración de VSCode.
• Entonces corre Launch Chrome Legacy desde la ventana de depuración en VSCode
• Para establecer puntos de interrupción en VSCode, abra el módulo javascript desde Loaded Scripts

Puede llamar a las funciones contenidas en los módulos de Javascript desde la consola de desarrollo de Chrome mediante la importación, como en la respuesta de @Kin.

Si obtiene el error “Error de tipo: no se pudo resolver el especificador del módulo”, intente usar la URL completa para el archivo del módulo. Por ejemplo, en Windows 10 con IIS ejecutándose localmente y Chrome 87, esto funciona para mí:

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

Solo puede importar un módulo desde otros módulos, porque import es una característica de los módulos.

¿Cómo ‘importabas’ módulos antes de ES6? No lo hiciste, porque no existía. En realidad, puede interactuar con un módulo E6 de la misma manera que usó interactuar entre dos scripts independientes que no son módulos.

Mantenga presionado y arrastre el archivo del módulo a la consola de desarrollo de Chrome.
Asegúrese de arrastrarlo a la sección de la línea de entrada (después de >) de la consola.

(Esto funciona en mi Chrome 78 bajo Windows 10).