[FIXED] How to debug JavaScript modules using the browser console?

Issue

I am using my JavaScript file as a module:

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

but, when my HTML is loaded, any object inside the main.js is not accessible from the browser debugging console, saying that the variable is not defined.

main.js:

var MyVar = 10;

When putting a breakpoint in main.js I can access the objects fine. But then the program is stopped, and I want to manipulate some while everything is running.

How can I access (global) objects in the JavaScript files I have included as module?

Solution

You can put the breakpoint in the module, then when the program is stopped, inspect the scope to find the object that you are looking for, then right-click and store as global variable. Even after continuing execution, the object will be available in the global scope under that variable. You can also do this manually by putting an assignment window.myGlobal = interestingObject either directly in the module code or enter it in the console while stopped at a breakpoint.

Answered By - Bergi

Answer Checked By - Gilberto Lyons (PHPFixing Admin)