Chrome's DevTools (and its Firefox counterpart) is undoubtedly one of the most used debugging platforms and since most developers are using it I figured to make a list of a few time saving features that I wish I knew about when I started.

1. $0 through $4

   This very simple feature acts like a history of the selected elements inside the Elements tab. Where, if you use it inside the integrated console you can have fast and direct access to the current element you have selected up to the 5th last element you have selected.

   As an example, I have used this to get the Scope of the selected DOM element in AngularJS like so:

   $($0).scope();

2. $_

   Ever felt like it is a drag to save the last executed statement's result inside a variable to use it in the next one? Fear not! With $_ you can get the result of the last executed statement without needing any copy and paste.

   Let's see an example:

   getDiamonds('some function', 'with many long arguments'); for (let diam of $_) { console.log(diam.name); } // Prints out every diamond's name returned by the getDiamonds function

3. clear()

   Ever wanted to clear the console programatically, not just from the clear console button? With this function you can do just that and have the console return to its clear state once you have refresh parts of your application.

4. monitor()

   If you have a function that gets called many times (an event handler for example) and you are not 100% if the arguments it gets passed are correct. Adding a monitor to it would help identify that fairly quickly.

   monitor(getDialogue); getDialogue('main'); console out: "function getDialogue called with arguments: main"

5. $() and $$()

   CSS selector implemented natively in the console. Simple and straightforward. Want to select a button inside the main div?

   $('.main .btn-submit');

   Or would you like to get all links inside a list? No problem, the selectors got you covered!

   $$('ul.links a');

Aside from the monitor function every other feature we talked about here is also available in the Firefox Debugger.

Check out the video for more details on this:

What do you guys think? Do you have any features you wish you knew before starting as a web developer? Comment down below!