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);
});

<script type="module">
  function foo() {
    console.log('doing foo');
  }
  const bar = 'a string bar';
  
  const thisModule = { foo, bar };
  window.myModule = thisModule;
  // If you ever reassign variables, you'll have to reassign them on thisModule too
  // or, only reference and reassign properties of thisModule, rather than create independent variables
</script>

Answer 2

One way to make a variable accessable within DevTools is to create it on the window object:

// Variable in your module
var importantNumber = 1;

window.importantNumber = importantNumber;

This method works fine if you just have a couple of variables, but if you need to have access to a lot more variables within DevTools, I would recommend you go to the sources-tab in DevTools, search for your module and adding a breakpoint. When the execution pauses, you have access to all the variables within that module on the DevTools console.