10

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!

NeuronButter
  • 709
  • 1
  • 8
  • 24
  • can you show some example code with an example of the problem you are having – Bravo Nov 03 '19 at 10:48
  • 2
    It's not code, that all works fine. The problem is not being able to debug the code using DevTools when it's type is a module. – NeuronButter Nov 03 '19 at 10:50
  • You can set breakpoints where the module is called and then "Step Into" via the debugger. Also if you want to just checkout the API of a module [look here](/q/63784737). – cachius May 07 '22 at 15:28

4 Answers4

5

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.

Bjørn Reemer
  • 490
  • 6
  • 8
  • But wouldn't this be difficult if you're trying to debug long files? – NeuronButter Nov 03 '19 at 10:57
  • 1
    Depends on your needs. If you only need to debug a small portion of a large file, I would go with the 'window' method, but if you need to debug all the code, I would take place a breakpoint where you know all variables are available and debug from there. – Bjørn Reemer Nov 03 '19 at 11:02
4

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>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
2

Using a Helper

I personally use a little helper function in development that allows me to expose a bunch a variables in a single expression. For example, it makes the following two blocks equivalent:

window.playerOne = playerOne;
window.someClass = someClass;
window.localData = localData;

globalize({playerOne, someClass, localData});

The helper looks like this:

const globalize = function(variables) {
    Object.entries(variables).forEach(([name, value]) => window[name] = value);
};
0

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.

NeuronButter
  • 709
  • 1
  • 8
  • 24