Quick Edits: CSS, HTML, & Scroll Into View

[00:00:00]
>> It's worth noting that there's a really cool feature that the DevTools offer. Which is if you own an Android device like an Android tablet or an Android phone, you can actually plug it into your computer and you can test your local apps on that Android device. It's not covered in this course but I do have a link to a really good doc on how to get that set up and going.

[00:00:18]
That can be really good because, I think we've all seen it before where we use an emulator or like we control the screen to the right size and it looks perfect. And then it actually gets out on a user's device and it's not quite the same, they render a little bit differently.

[00:00:32]
So being able to render your web app on a real android phone or Android device can be really valuable. And a lot of big companies will have device labs of some sort. Well, they have a bunch of old phones and stuff like that. So that can be really good.

[00:00:44]
So quick edits, I'm going to go ahead and open my DevTools again. And this time, I'm gonna pin them back down to the bottom of my screen. So we've kind of seen this one already. We can go ahead and we can edit any CSS we want. So if we wanna change like the font color to red, or if we want to change the font family.

[00:01:06]
Let me change this back to black so you can read it, I'm gonna change the font family to Arial or something like that. Anything we do over here will get reflected here. We can add new CSS rules. So I did show this already a little bit, but you can click this plus and you can make any rule you want.

[00:01:22]
So you could do body nav or something like that. Or you could do a new ID of foo or a class of foo. You can do anything like that. You can edit the HTML. So we saw in the beginning that you can edit the tags by double clicking, you can edit the ID by double clicking.

[00:01:41]
You can even edit the content here though by double clicking. So if we scroll up to the top here, I can change, Hello world, and I can hit enter on that, and that'll change. You can even for sometimes because you'll have a lot of content, you can right click on it and you can click Edit as HTML.

[00:01:57]
And that will take the current element and it will give you this like really nice text editor. So maybe that's more comfortable and you can move around, add new lines, things like that. Depending on what you wanna do. Scroll into view is one of my favorite ones. So I work on a lot of infinite scrolling applications, right?

[00:02:16]
And they get really long. And sometimes we'll have a bug, I'll be able to use the DevTools to figure out which, let's say we're working on Twitter, or we've got 100 tweets on the screen. And I can figure out the ID of the tweet. That's a problem, but I don't know where it is yet.

[00:02:33]
So for an example, I'll use this inspector and I'll click on the Scroll into view, list item. And so here I have it in DevTools. So if I was to scroll all way down and I really wanted to mess with it, I can hover on it and I know this is subtle unfortunately can't make it larger.

[00:02:49]
But, let me move to a clear area, when you hover on it, it will either show. If you put your eye up here, where my mouse is, it will show either a little arrow saying the items above where we are. Or if I was to go too far and hover on it, you'll get another little arrow here saying the items below where we are.

[00:03:09]
So this used to be the best way we had to deal with it as you would hover it in DevTools and you would listen to the instructions. You scroll a little bit. It's still low, you'd scroll a little bit like I went too far. It's high now, all that.

[00:03:19]
But now what we can do, let's say we're all the way at the bottom of the page is we can right click on a DevTool. And then click Scroll into view. And it'll actually move the view part right around the element that we have, which can be really helpful.

[00:03:31]
Again, if you work on either just long or infinite scrolling websites. Console shortcuts, so I did cover $0 already. So if you click on an item and you go into the Console and you $0, it also keeps some history. So we clicked on article, then we'll click on nav.

[00:03:48]
So if we go back to the console $0 has now become nav, that's the thing that we clicked on most recently. But $1 will stay article. So it goes back through three so you can kind of keep some history of the different elements that you're working on. You can hide and show elements, which is kind of cool.

[00:04:03]
So if I scroll up to this, Hello World, and I hit h it will hide or show the element, this can be really nice when you're kind of doing some design. You wanna move some stuff around, but the text is in the way or something like that. You can hide it.

[00:04:16]
You can also, there's just times where you can just right click and just delete the item, right? And that will actually take it out of the DOM. So you notice the difference. Let me refresh the page. When I go to this h1, and I hit h, it sets it to display or visibility hidden, which means it stays so the space around it stays.

[00:04:34]
But when I either hit the delete key or right click delete, it actually plucks it from the DOM and the DOM adjusts. Refresh again. You can simulate state. This is another cool one. So if we take this and we go find one of my links like this Quick Edits, so we've got Quick Edits down here.

[00:04:51]
You can click this colon hov and you can simulate a lot of different state like hover active focus, all these things. This is really funny because I pair program a lot and sometimes I'll be pairing with someone who's working on a hover state. And they'll be like doing like this, like they'll be hovering over it.

[00:05:08]
And then they'll be looking down here in the style section trying to see what's changing. So you can really just put the hover state on it. And now I can fully see what hover CSS is applied and I can edit it.