How can I use modules in the browser, but also refer to variables and functions from within DevTools?

I have my HTML setup like this:

<script type="module" src="main.js"></script>

and all the ES6 modules work fine. The only problem is I now can’t refer to anything from within DevTools (like using the Console and typing in a variable to see it’s value or using a function manually). How do I import modules whilst being able to use the DevTools? Thanks!

Answer

For anyone else interested, if you’re comfortable with it, use a bundler like Webpack. I don’t believe (at least at this point) that the browser will by itself be able to use the DevTools on modules (the other solutions are quite janky, and aren’t fantastic to work with).

Hopefully in the future, when all major browsers will be able to support ES6 modules without a bundler, we’ll be able to use DevTools.