This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Recent Selection History" Lesson
[00:00:00]
>> Jon Kuperman: I mentioned there's this cool relationship between the elements and the console. And one of the things about that is you'll often select something visually and you want to play with it. You want to see what API's are available on it, or whatever. So open up the dev tools, go to the Elements panel, select any element that you want.
[00:00:15] And then you can either go to the console manually or you can hit escape to open up the console drawer. Just for visibility I will go to the console manually. So with nav selected I go to the console, I hit dollar zeros. That's my currently selected item and that brings up the nav in here.
[00:00:32] And it goes a few numbers back, I think maybe three. So if I go back to elements I select a new element wrapper. I go back to console, dollar zero will be wrapper, but dollar one is still nav. And so this is kind of a way that you can just, the thing that you want to do is bring something into the console and call something on it, right?
[00:00:52] Call add class on it, or get element by ID, or something like that on it. And so the way to kind of do that is click on an element and then you can use that custom dollar zero, dollar one.
>> Speaker 2: You can wrap, if you've already jQuery injected, you can just wrap it with another dollar sign.
[00:01:08]
>> Jon Kuperman: Yeah, another cool thing is, yeah, dollar, dollar, dollar. Another cool thing that actually reminds me of is that the Dev Tools provide jQuery-like selectors on every page, even if you don't have jQuery. I have this "class" equals "nav", and then I can see that this provides me with that normal dollar sign that I'm used to.
[00:01:27] So I can do ".nav" and it actually gives me the thing, which is pretty cool. So, you can do jQuery, I guess jQuery is sort of falling out of fashion sadly. But if anybody really likes their jQuery selectors you can use them in Dev Tools on any page.
[00:01:40] Even if it's not serving jQuery you can still get those. So, there's a couple of custom little shortcuts that we'll learn. These are just two of them so you can do the jQuery style selectors and you can do the $0 to bring in element from elements into the console.