/dev tips

(116) The Box Shadow Editor and Text Shadow Editor Cloud Vision API and Speech Synthesis for image detection in JavaScript (118)

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

14 Oct 2016
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.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.