How to use ES6 modules from dev tools console
You can use dynamic import within Chrome's console.
import('path/to/module.js').then(m => module = m)
// [doSomething] is an exported function from [module.js].
module.doSomething()
There is a way to use the Chrome Dev Tools with ES6 modules, if you use VSCode and the Javascript Debugger for Chrome. I had some trouble to get it to work, but it was worth it. https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
The VSCode debugger launches a new chrome window which is connected to the VSCode debugger. You can also use Chrome Dev Tools (F12) in this window as usual. It works with ES6 modules and you can set breakpoints, use the console, inspect variables, etc...
In case you have trouble to set up the debugger, this is how it worked for me:
- Go to the VSCode Debug Window (
CTRL+SHIFT+D
) -> selectAdd Configuration
from dropdown -> SelectChrome Launch
orChrome Launch Legacy
to change "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
},
The key was to use "sourceMaps": true
and "url": "http://localhost:5000/auth/login"
instead of http://localhost:5000/blog"
, which is the page I actually want to debug. However, when the Debugger opens the new chrome window, my page was redirected to /auth/login
, so I had to use this url.
- You can try to disable the Preview Version of the new debugger and use the
Legacy
version instead: Turn offDebug › JavaScript: Use Preview
in the VSCode settings. - Then Run
Launch Chrome Legacy
from the Debug Window in VSCode - To set breakpoints in VSCode, open the javascript module from
Loaded Scripts
You can register the function or variable in the global namespace with a line like window.myFunction = myFunction
or window.myVariable = myVariable
. You can do this in the module where myFunction
or myVariable
are declared or do it in a separate module where they have been imported.
Once you've done this, you will be able to use myFunction
and myVariable
from the Chrome DevTools console.
For example:
import myModule from '/path/to/module.js';
window.myModule = myModule;
// in the console:
myModule.foo();
(Credit to @Evert for providing this solution in a comment, albeit in a rather roundabout way that took me a while to figure out.)
You can await a dynamic import within Chrome's console:
const Module = await import('./path/to/module.js')
Module.doSomething()
That dynamic import is roughly equivalent to:
import * as Module from './path/to/module.js';
Module.doSomething()