Mastering Chrome Developer Tools DOM Break Points, Color Formats, & Code Specificity

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jon Kuperman: Another thing that's really neat is being able to set these breakpoints on the actual document. So basically what you can do, I'm trying to think of a good example of this is if you are working on an application that, I’m trying to think of one. I guess, let me go to somebody's website.

[00:00:31] Let me think for example, if we go to Twitter and I'm trying to find anything that's like changing. But basically what you can do is, all right here we go. So we've got this video and if you click play on the video, it starts playing. And so let's say this is really handy when you're on a brand new code base and you don't necessarily know how the code works but you know where the bug is visually.

[00:00:54] What you're allowed to do is you can open up the developer tools. Let me scroll down just a little bit. You can find the parent element. So like in this case, it looks like, I don't know, we've got this Tweet, right. And then you can right-click on it, and you've got this break on menu here.

[00:01:13] And so it allows you to basically find the code that does one of these three things, removes that note if it ever gets removed, changes any of the attributes like if you've got a class changing on something or modifies anything in it's subtrees or anything underneath it. So this is really great.

[00:01:32] I’ve had a lot of times you've got like an image slide or something like that there's a bug in it and you're pretty new to the code base. You’re not sure where that bug is coming from. So you can right click on the container and you can say get break on sub-tree modifications when that image changes out.

[00:01:47] And what it will do is intellectually I'm not totally sure if this will work. Let's let's give it a try. Maybe on attribute removal. I wonder if it's getting play. Well, I'm gonna come back to the example. But basically what it'll do is it'll pop you into the sources tab at the line of JavaScript that's changing that.

[00:02:07] Here we go. Okay Something changed. Give it a second. So basically I think it’s just cuz Twitter is a really big app is why it's going a little bit slow. So basically, you set that break on and then you let whatever change happen and it'll pop you into the sources tab at the exact line that's causing whatever the changes.

[00:02:24] And so then what you can do here, and we'll get into sources more in a little bit, is you can hit Prettyprint and it'll keep that line number. Again this is probably going to take a while, because it's a huge JavaScript file. Here we go. So you can see I don't know, something's being removed here.

[00:02:38] But this is a really cool way to kind of go from the outside in. So if you're not familiar with the code base but you are familiar with where the bug is visually, you can set one of those. They're called Dom breakpoints and you can get the change.

[00:02:49] Does that make sense? I know, it was a little bit of a sloppy example. Okay cool.
>> Jon Kuperman: All right, the next thing which is pretty neat is color formats. So, depending on the project that you're working on, you might be doing your code your colors in hex codes.

[00:03:08] You might be doing them HSLA, you might be doing them an RGB anything like that. And converting between them can get kind of annoying sometimes. So what it allows you to do with the dev tools, let's go find something that's colored. I'll find this navigation bar here and I'll see that it's got this background of these blues and let's say that I need RGB or something like that.

[00:03:34] You can shift click on any color value, and it'll transform it between it's HSL, it's RGB and it's hex code. That's pretty handy.
>> Jon Kuperman: Yeah, along with the color, there's a lot of really cool stuff. So, you can click on this little box preview here and you get a bunch of different things.

[00:03:56] There's kind of a lot happening here. One is a color picker, which is really nice. So you could change the color of something. So if I go and I find this gradient, and then I go to the color picker, I can like move into reds or whatever. So this is like an easy way to kind of visually design right on your site.

[00:04:12] Again, here, allows you. This is like another UI for changing the format between. And then this is kind of the big one. This is new in Canary, these color palettes. So what it gives you are basically three different options. You can upload a custom color palette, which can be really, or build one here, which can be really handy if you have your brand identity, your colors.

[00:04:33] You can let Google parse the page and give you what it thinks your color palette should be. So this is the colors that I was able to find on the page. Or if you have no color palette skills like I do, you can use Google's open source material design color scheme.

[00:04:48] This is basically how it is on my sites because I don't know how to pick great colors but it's pretty cool. So it gives you access to all of their for those that aren't familiar, they released like this big U-I kit a few years ago including this material color scheme.

[00:05:00] So you can kind of like do all your designing right in here. Also worth noting on these which is pretty cool, they have if you hold a long click on any of them they have like all these different shades that are all included in their color panel. So it's stuff on colors.

[00:05:17]
>> Speaker 2: Could you, there's a question on the when you click on an element it has the dollars zero. I don't know if you can demonstrate that?
>> Jon Kuperman: Yeah, so that's really great. So basically, and we'll get into this for sure when we cover the console tab, but basically Chrome has added these really cool ways to interact between elements and console.

[00:05:38] So you can imagine, like sometimes you're looking at, I don't know, like you're looking at an element and you want to kind of take it into the console and play with it basically. And so what they allow you to do is, they allow you to use these like very jQuery like selectors right that's like dollar sign.

[00:05:54] And so what it allows you to do, okay so we'll click on an element like nav class nav bar. And then I'll go into the console and then I'll type dollar sign zero and I'll hit Enter and you see nav class nav bar. So you can bring it into the console that way.

[00:06:08] And what's even cooler is they allow you to keep a history of four the last clicked elements. So from nav navbar, I'll click on container-fluid and I'll go back into the console. So now $0 is container-fluid, but now $1 is nav class navbar. And you get four of them, five of them, zero through four.

[00:06:28] You get five of them, sorry. Yeah so that's like a pretty cool thing just for taking elements in. And it gives you like, you take the element and it gives you the entire subtree that you can click through there. That adequately answer the question. It also will see some other stuff from time to time but basically these comments, you'll see I'm a lot when we go into the sources tab.

[00:06:52] They're just like Google experimenting with UI's to try to help you with stuff you can do with it basically. So in the sources tab, we'll start seeing comments that are like what global variables are declared. You'll see a little comment that's like remember foo is set to bar right now, things like that.

[00:07:09] So those are these comments over here. CSS specificity. This isn't really Dev Tools related but I just wanted to bring it out. So I usually get questions on items that are crossed out over here in the styles tab. So for those that aren't familiar with CSS specificity, basically it's like the what the CSS rendering engine uses to resolve conflicts.

[00:07:28] So if you have like a body, all text should be colored blue. But then you have like anchor tags texture be colored yellow, something like that. How does it resolve should be blue, should be yellow? And more importantly, if you have like an element that has a class and an ID and those conflict, how do you solve that dispute?

[00:07:46] So the crossed out means it lost the dispute and it is not an applied style which is where it can get really messy. Because I give you using a CSS framework like I am with bootstrap it's gonna have all of its selectors that it's applying that I'm going to override slowly but surely as I customize my site.

[00:08:02] So you'll see a bunch of crossed out stuff all over the place. That’s where the computed styles comes in really handy cuz you only see the ones that are actually applying. And just a quick if anybody didn't know, this is like the order that things go in for specificity.

[00:08:16] So if you ever dealing with something crossed out you don't want it, the least specific thing you can do is specify an element like anchors or buttons or divs. And then you can go into class selectors. Those are trumped by ID selectors and then all the way to direct inline styles.

[00:08:30] So if you have like divs style equals color blue that's the final trump specificity.