⚠️ This lesson is retired and might contain outdated information.

Use Chrome DevTools console utilities to make debugging easier

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 2 years ago

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.

~ 18 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today