Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Use Chrome DevTools console utilities to make debugging easier

    Tomasz ŁakomyTomasz Łakomy
    chrome-devtoolsChrome DevTools

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss