JavaScript Debugging Elements inspector


Clicking the enter image description here 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 inspector can be used in variety of ways, for example:

  1. You can check if your JS is manipulating DOM the way you expect it to,
  2. You can more easily debug your CSS, when seeing which rules affect the element
    (Styles tab in Chrome)
  3. You can play around with CSS and HTML without reloading the page.

Also, Chrome remembers last 5 selections in the Elements tab. $0 is the current selection, while $1 is the previous selection. You can go up to $4. That way you can easily debug multiple nodes without constantly switching selection to them.

You can read more at Google Developers.