Chrome DevTools: Learn more about JavaScript function scope with this inspection technique

If you log a function in DevTools with console.log, DevTools gives you some contextual information for that function. One useful piece of information exposed to you is the Function Scope, an important concept in JavaScript. You can inspect the scope without setting a breakpoint.

Try logging this in your console:

const variable1 = 1;
const variable2 = 2;

console.log({
    myFunction() {

    }
});

If you inspect myFunction and then <function scope>, DevTools displays all scopes the current function has access to, including those on the global scope.

Side note - Inspect event listeners on DOM nodes with the Event Listeners Pane. You can also see Function Scope in this pane.