Tutorial by Examples

Breakpoints pause your program once execution reaches a certain point. You can then step through the program line by line, observing its execution and inspecting the contents of your variables. There are three ways of creating breakpoints. From code, using the debugger; statement. From the brow...

Once you've paused execution on a breakpoint, you may want to follow execution line-by-line to observe what happens. Open your browser's Developer Tools and look for the Execution Control icons. (This example uses the icons in Google Chrome, but they'll be similar in other browsers.) Resume: Unpau...

In Google Chrome, you can pause execution without needing to place breakpoints. Pause on Exception: While this button is toggled on, if your program hits an unhandled exception, the program will pause as if it had hit a breakpoint. The button can be found near Execution Controls and is useful for ...

Note that these only work in the developer tools of certain browsers. $_ gives you the value of whatever expression was evaluated last. "foo" // "foo" $_ // "foo" $0 refers to the DOM element currently selected in the Inspector. So if &l...

Clicking the Select an element in the page to inspect it button in the upper left corner of the Elements tab in Chrome or Inspector tab in Firefox, available from Developer Tools, and then clicking on a element of the page highlights the element and assigns it to the $0 variable. Elements inspecto...

Let's say you have an object like this: var myObject = { name: 'Peter' } Later in your code, you try to access myObject.name and you get George instead of Peter. You start wondering who changed it and where exactly it was changed. There is a way to place a debugger (or something else) on e...

For named (non-anonymous) functions, you can break when the function is executed. debug(functionName); The next time functionName function runs, the debugger will stop on its first line.

In many environments, you have access to a global console object that contains some basic methods for communicating with standard output devices. Most commonly, this will be the browser's JavaScript console (see Chrome, Firefox, Safari, and Edge for more information). // At its simplest, you can 'l...