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

Question

I have my HTML setup like this:

and

Answer 1

If you want to be able to refer to variables created within the module from the console's global scope, you'll have to deliberately expose each such variable that you want to be visible from the console. Either assign each variable to window (probably not a good idea - the whole point of modules is to make things more modular, without global pollution), or perhaps assign a single object to window, to which you assign module variables. For example:

// in the console:

setTimeout(() => {
  window.myModule.foo();
  console.log(window.myModule.bar);
});