Comment utiliser les modules ES6 à partir de la console des outils de développement

Question

D'après ce que je comprends, si je crée un module ES6, je ne peux l'importer qu'à partir d'un code qui est lui-même un module. Cela signifie que le code non-modulaire, c'est-à-dire le Javascript en ligne, ou la console des outils de développement de Chrome ne peuvent jamais accéder au code qui se trouve dans un module.

Est-ce vrai ? Existe-t-il un moyen de contourner ce problème, car cela semble être une limitation assez extrême.

Answer 1

Vous pouvez utiliser importation dynamique dans la console de Chrome.

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

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

Answer 2

Vous pouvez enregistrer la fonction ou la variable dans l'espace de noms global avec une ligne telle que window.myFunction = myFunction o window.myVariable = myVariable . Vous pouvez le faire dans le module où myFunction o myVariable sont déclarés ou le font dans un module séparé où ils ont été importés.

Une fois que vous avez fait cela, vous serez en mesure d'utiliser myFunction y myVariable à partir de la console Chrome DevTools.

Par exemple :

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

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

(Crédit à @Evert pour avoir fourni cette solution dans un commentaire, bien que d'une manière plutôt détournée qui m'a pris un certain temps à comprendre).

Answer 3

Il existe un moyen d'utiliser les Chrome Dev Tools avec les modules ES6, si vous utilisez VSCode y el Débogueur Javascript pour Chrome . J'ai eu un peu de mal à le faire fonctionner, mais cela en valait la peine. https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Le débogueur VSCode lance une nouvelle fenêtre chrome qui est connectée au débogueur VSCode. Vous pouvez également utiliser Chrome Dev Tools (F12) dans cette fenêtre comme d'habitude. Il fonctionne avec les modules ES6 et vous pouvez définir des points d'arrêt, utiliser la console, inspecter les variables, etc...

---

Au cas où vous auriez des difficultés à configurer le débogueur, voici comment cela a fonctionné pour moi :

• Allez dans la fenêtre de débogage de VSCode ( CTRL+SHIFT+D ) -> sélectionner Add Configuration dans la liste déroulante -> Sélectionner Chrome Launch o Chrome Launch Legacy pour changer "launch.json"

mon 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
},

La clé était d'utiliser "sourceMaps": true y "url": "http://localhost:5000/auth/login" au lieu de http://localhost:5000/blog" qui est la page que je veux réellement déboguer. Cependant, lorsque le débogueur ouvre la nouvelle fenêtre de chrome, ma page a été redirigée vers /auth/login J'ai donc dû utiliser cette url.

• Vous pouvez essayer de désactiver la version de prévisualisation du nouveau débogueur et utiliser la fonction Legacy à la place : Éteindre Debug › JavaScript: Use Preview dans les paramètres du VSCode.
• Ensuite, courez Launch Chrome Legacy à partir de la fenêtre de débogage dans VSCode
• Pour définir des points d'arrêt dans VSCode, ouvrez le module javascript à partir de Loaded Scripts

Answer 4

Vous pouvez appeler les fonctions contenues dans les modules Javascript à partir de la console du développeur de Chrome en utilisant l'importation, comme dans la réponse de @Kin.

Si vous obtenez l'erreur "TypeError : Failed to resolve module specifier", essayez d'utiliser l'URL complète du fichier du module. Par exemple, sur Windows 10 avec IIS fonctionnant localement, et Chrome 87, cela fonctionne pour moi :

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

Answer 5

Vous pouvez uniquement importer un module à partir d'autres modules, car import est une caractéristique des modules.

Comment "importer" avant les modules ES6 ? Vous ne le faisiez pas, parce que cela n'existait pas. En fait, vous pouvez interagir avec un module E6 de la même manière que vous interagissez avec deux scripts indépendants non-modulaires.