Use Chrome DevTools console utilities to make debugging easier
Chrome DevTools provide many handy utility functions that we can use to make debugging faster and easier so we can fix the bug and move on.
In this lesson we are going to learn how to use $, $$ utilities built-in in Chrome DevTools to get references to single and many DOM elements and how to use $0 - $4 variables to reference object selected using Inspect Element tool.
Instructor: [00:00] There are many utilities that we can use in Chrome DevTools to make debugging easier. In this simple example, we have an app with two buttons, first button and the second button. If we would like to get the first button on the console, one way we could do that is to go var element = document.getElementById('first-button').
[00:20] The easier way to achieve the same effect is to use the dollar sign. Dollar sign as a function, if we can pass in a selector to this function, and it's going to return the first button. Note, that this dollar sign does not mean that the page requires jQuery. It is a built in feature of Chrome DevTools.
[00:36] In this case, I was searching for the tongue button, and this function has returned only the first button. In order to get all elements that satisfy a given selector, use the double dollar sign function, like this: $$. This way, we're going to get both the first, and the second button.
[00:53] The dollar function behaves like document.getquery selector. If I were to do $.button#second-button, it's going to return only the second button. We can also use dollar signs to get reference to the last element we selected, using the inspector tool.
[01:10] For instance, if I were to click on this "Don't click me" button, I'm going to see it cited in elements tab in DevTools. If I do $, I'm going to get the reference to this very element. If I'm going to cite the next one, it's going to be operating as $, but the previous element is still accessible by doing $1. You can save up to five elements this way, from $ to $4.