Dev Tools Power — Elements Tab

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos.

Welcome to syntax, the podcast with the tastiest developer tools rid Treats. Today, we've got a banger for you on the dev tools elements tab. Specifically, one of our last episode was on rid A couple of the miscellaneous tabs in dev tools, what they do, where they're handy, that episode did really, really well. And we said we will go in And do an entire episode just on the elements tab because there's so much that you can do. So the idea behind this one is that we're gonna dive into the elements tab and talk about the features And more importantly, like, when you'd use them. Like, oh, this is handy if you ever have to do x, y, and z, because these are not necessarily things that you'll ready. Use every single day. But when you have an issue, it's very quick to solve. You you know how to use the the dev tools properly.

We are sponsored by Linode Linux cloud hosting, Sentry, error exception performance tracking, and mux rid Video and a p APIs and hosting for your video platform. Talk about them part way through the episode.

I'm West Boss. With me, as always, is mister Scott Talinski. How you doing?

Hey. I'm doing good. My computer is not, Though we we just recorded 2 episodes, I have not changed anything about my setup. And all of a sudden, my my, frames per second here of my mouse cursor is now

rid Dragon. So Is your battery low? Battery is not low. Did I ever tell you about that issue I had With the Canvas? With the Canvas? I was doing, like, Canvas drawing app, and all of a sudden, it was, like, rid. Buttery smooth, and then all of a sudden, it got, like, really jaggedy to the point where, like, the drawing didn't look good.

And I spent

Ever debugging it, and it turned out to be low battery in my mouse, and it was just not sending mouse move events of as frequently as it was. Oh, yeah. That is not this, but that happens all the I'm with this trackpad. You know what? One of the things I learned how to do, from West Boss was to get those braided cables with the 3 heads on it. So good. Rid I have one sticking out from underneath my laptop, so I never am searching for power for my trackpad or my my keyboard. I just alternate between keyboard or trackpad, which one's getting the juice. They're always fully juiced up. You know that. I honestly have no idea. It says Zoom is the Zoom is the culprit, so we'll see if, if it there's any issues here. But I don't think so. Maybe Discord too, Discord, Notion. Who knows? All of the stuff we're using right now except for maybe Discord. But but I'm doing good, man. I'm super sick. I can hardly talk. Not the good kinda sick. Yeah. Not the good kinda sick. Just so many things, and, it's all it's, Britney and Kevin chaotic over here, so that's how it is.

Alright. Well, let's ready. Get into it. Let's talk about the very basics of the elements tab, then we'll get into some of the styles, talk about the different panels rid. Within the elements tab, let's talk about some JavaScript DOM things that you can use to figure out and debug your JavaScript,

and then a couple more little things. You wanna kick it off with the elements tab? Yeah. The elements tab is the tab that, you know, you probably have spent the most time in. Because typically what happens, you either use the keyboard shortcut, you right click on something, or whatever, you inspect an element. Right? And in fact, so many people I've always referred to the developer tools as, like, the inspect element. Oh, I'm an inspect element, and that's what you do. Or even non developers. It's funny. Yeah. I listen to some podcasts where they'll be like, You know how to get around to this error about, you know, selling you your ad blockers off? You click on this thing and click inspect element and then click delete. Rid. Yeah. It's, like, funny to hear non web people talk about it. Even my my wife can do it, and she can get the URL of an image

Where it's set to a background,

because, you know, like, you can't sometimes you can't right click copy image on an image. She knows how to do it. I'm so proud. But so the element tab is really what's showing you it's believe it or not, it's not the DOM itself, but it's an HTML representation of the DOM.

So you get to see all of the HTML as it is in the DOM at the very moment that you are looking at the site at any given point. And you can click on any element. You can get their styles. You can, get there there anything in there, and you could actually believe it or not, some people don't know this, but you can manipulate this fairly easily.

So If we wanted to edit something, there's a whole host of options. If you have an individual div and you wanna move it, guess what? All you gotta do is click and drag it. Can put something inside of something. You can really go to town editing HTML here.

I know it's a it's a low key thing, and some people just may have never tried it. You can move and modify your DOM quite a bit. One thing that I use a lot is if you right click on any element, you can do edit as HTML.

What this does is it opens essentially a fairly decent sized text area, which isn't formatted super well. But, it allows you to edit the HTML as is or even just copy it if you wanted to copy it or change it. You can click it. You can edit it. You would then hit enter, And it saves it and updates the actual browser window. So you can get in there and really, really tweak that DOM, as much as you want. Did you say that you could drag and drop them as well? I did. Yeah. I find that handy when you're

using like, you're doing, like, a tricky layout, ready. And something needs to be like a direct child of something.

And instead of having to move it in your template because that maybe gets in the way or is annoying, can literally just drag and drop that up a level

and then to see, oh, okay. That's that's what I wanted. I had I had indented 1 level too deep. Yep. You can also delete things if you just highlight something and click the backspace button, it deletes it. I use that fairly frequently. Again, we just kinda mentioned it as something you can do To remove banners that, like, pop up and get in the way, it's like, or do you like to log in? No. Thank you. I do not want to log in to Pinterest just to see this image. I want to click The delete there. Oh, I hate that. Yeah. 1 my wife and I were just talking about, you know what's a killer web app? Just Pinterest that isn't crappy.

Just make Pinterest, and then give the users an option to import all of their Pinterest pins and then just make it better. That's that's right right there. Pinterest hasn't changed in a gazillion years.

Rid Yeah. Pinterest is awful. There's, like, a couple other apps like that where you try to use the, like, Reddit. Reddit Reddit mobile or not. Rid Yeah. Reddit mobile, every single time that you visit it, it's like, do you wanna open the desktop app? And then Seriously? You, like, click on a comment, rid. It loads, like, 3 comments, and then you have to click on, like, load more and, like, come on, guys. I know you're trying to, like, boost engagement and and whatever. There's some rid Big buck up top making you do all these things, but it's a awful experience.

Yeah. Totally. You're that's right right for the picking. In addition to, like, deleting things, you can also right click and add an attribute to add anything. You can click into the element to add an attribute or change a class name or anything like that. All that stuff is really pretty neat. And I don't know if you have I know you've been in in, in Firefox land for a little bit, but Chrome recently got a a whole host of really great Flexbox tools.

And now if you have a div that is a flex element in the elements tab, there'll be like a little label next to that div, and it just says flex. It's actually a button, believe it or not. And if you click on that button, it opens up the flex tools for this. And you can see the if you have it selected, it's like a toggle. What you can see is the actual flex grid, the same way that you have been able to in Firefox for quite some time, and that's, like, just Endlessly helpful. Whether you have a flex or a grid, you can toggle that on and you can see it. You can see the gap. And when I click the grid on something, rid. You get the size of all the segments. You get the numbers of all the segments, the gutters, the gap, all that stuff. The same way that you have in Firefox, and that's been so awesome there. Rid. Those little buttons

beside the element that tell you if something is flex grid has an event attached to it or, Firefox added one that tells you if it scrolls, which is handy because if you have, like like, 800 nested divs and you wanna know which one is rid Not causing the scrolling, but which one is scrolling, then it's really, really nice to see that. I I forever have wanted, rid. Tell me what thing is causing the scrolling, not which thing. People always have used Firefox to check the scroll thing. I'm like, no. No. No. No. That tells you which element is scrolling, but it doesn't tell you which one is making it scroll. For my website, I put this little border around my website, rid And I did some trickery with before and after, and I'm paying for that because I always have horizontal scroll issues pop up, especially with the Gatsby image that's flexible,

but it's worth it. I think I just have to keep figuring out what these little issues are. Yeah. You know, there there's a lot of neat stuff in here that you you don't even think about one cool thing, have you ever used this break on?

Yes. Yeah. A lot. The break on what is it? The with the possible options, break on

re Sub tree modifications, attribute modifications,

and node removal. And that's really handy because re If you want to insert a breakpoint into your JavaScript and you don't know what JavaScript is causing rid This thing to change or to be removed or to be added, you can just add those break on, and that's a breakpoint in your JavaScript that will freeze everything from running, And it will show you the actual code. So if you're jumping into an older code base or code base you haven't worked on before and you're saying, like, okay. I have no clue.

When I hover this thing, it, like, accidentally removes some HTML. What code is causing that? That's a great use case for that. Mhmm. Rid. We also have scroll into view. So if you are on an element, you can right click, scroll into view. You can also do this rid From the dev tools, if you have an element in your dev tools and you can run dot read. Scroll into Vue, and that is just a regular JavaScript API. Mhmm. So I'm assuming that the dev tools uses that, and that's a really, really handy one both ready. For your application, but also for debugging, if you wanna be able to say, okay, I'm working on this node, and it's in a list of a 1000 things. Where is this thing Without having to put a background color on it, you can scroll it into view. Another kinda cool thing is that if you're in your console And you have an element selected, you can right click on that in your console and say reveal in inspector, which is inspector is rid There's the word for the elements tab in Firefox, and then it will just select it. And the being able to go from inspector to console rid. With dollar 1, dollar 2, dollar 0, those will give you the most recently selected elements from your inspector tab in your console, and then being able to go back From your console to your inspector with that select in dev tools is so handy. I use that all the time. I I think we touched upon this in the console one. If you have an element selected in your elements tab And you wanna be able to access that DOM node in your console, you can use the dollar 0, and that will give you the actual element. And then if you want the second thing that you clicked, you can use dollar 1 and then dollar 2, dollar 3, dollar 4, and then it stops at dollar 4. So you get the 5 most recent elements that you have clicked on, and that could be handy if you wanna be able to quickly add an event listener or or be able to to check something out. Cool. Another thing you can do is an expand or

collapse recursively or just this one div, and that could be really helpful if you wanna just get things out of the way. You know, the it it does feel like this elements tab is very much a full featured part of the thing. But a lot of people just look at it as, Like, here's the dom. You can click on it to get the styles, but you can really do a lot more here than you might expect and and to navigate or or understand a little bit about your code base. Ready. Another little tip I have is we're talking about what is causing the the horizontal scroll or or what is causing this thing to to goof up. Rid. What I'll do in that case is literally just delete

DOM nodes. So Oh, yeah. Same. What's the name for this this type of Finding. There's, like, a special name for the finding where Something by removal.

Yeah. I'll take, like, the entire rid location, and I'll break it down into the top level header, content, footer, and I'll delete it. Mhmm. If that doesn't fix it, control z. It will put it back in. Delete the middle one. If that doesn't fix it, control z, and then delete the footer. And then when you find out, okay, it was part of 1 of these big rid Top 3, then you move into the one that actually caused it, and you go a little lower, and you you you sort of try to figure out that. Or you select, like, half the elements and delete those.

And then if it went away, then, okay, the issue is is in those first 8. So then then break that into the first 4 and the last 4, and then read. Break that into the first two, and then eventually, you're gonna find out what is the parent. And then you you keep drilling down more and more until you actually find the the actual element that you're having. So Being able to quickly delete items as well as reinstate them if you accidentally did delete them, that is something a lot of people don't know that you can do that instead of just rid. Display noneing

on the element. Oh, and one neat thing, Wes, about your little scroll view issue is that there's some tab called the layers tab. That's what I actually use Primarily for debugging, that type of thing. So if you go to the split window, the panel that's at the bottom, And you click the 3 little dots there right next to console.

Is it layers in here? What is it actually? It's layers in Firefox.

It might be rendering in Chrome. So, Wes, actually, one one way that I solve that error that you're talking about about scrolling and finding something that is, like, the overflow scroll like, maybe pushing that is I I use the layers panel. Now if you head to your developer tools in the very top right, you'll see 3 little dots. Click those 3 dots. There's a whole another thing called more tools where there's a handful of more tools. And we've talked about this panel in the last dev tools episode, and I've talked about The fact that there's all these other tools in here, but one of them that I really love to use is the layers tool. Oh, I've never used this. Layers gives you a d rendering of your site. And Firefox had this before Chrome did, and the Firefox version was fantastic. The Chrome version is definitely very good as well, but it can show you All of your paints that happen, it can show you any of your scroll rectangles.

It has a little, like, rid 3 d thing where you can click and drag and pull around and see the site in 3 d. And so when you see it in 3 d, not only do you see Any elements that are off Canvas or on Canvas, but you see their z index and how everything stacks on top of each other? Oh, yeah. I remember this from Firefox. I rid I don't think it's in Firefox anymore, is it? It's gotta be. Yeah. It's definitely in Firefox still. But either way, this thing allows you to see not only the z index in a three d context, which is rid helpful for those of us who are more visual, but also debug things that are hanging outside of the canvas and just see where everything is on the canvas. So that's what I primarily use for that because it honestly, when you when you use that that layer view and you see, like, your header is pushed off by 10 pixels. Oh, okay. That's rid problem. Right? Yeah. You can zoom right in. You can zoom right in. So that that's what I use for that. I I really enjoy that that style of debugging.

One thing I also enjoy is working with my own virtual private servers, and a good way to do that is to use a really, really, really good service provider, something like rid. Linode. Wes, do you wanna talk about Linode? I do. Linode is cloud computing that developers trust. So if you need

infrastructure ready. For your application, meaning you need some servers or you need somewhere to host your your images or you need a GPU or rid Like, what most people know Linode for is you can get a Linux server, for anywhere from $5 a month all the way rid to some really big ones where you're where it's dedicated.

But they have block storage, object storage, backups, Node balancers, DDoS production, firewalls, dedicated CPU, literally anything you need for your running your actual rid Structure is on Linode. So I'm I'm gonna tell you as the developer, you've got a node app, and you wanna host it somewhere.

Rid Linode is is where you can host that thing, and they're gonna give you a $100 to host your application so you can try it out. I want you to rid Fire up a Linode server, throw Node on there, throw PM 2 on there, and then throw maybe Nginx or Caddy server on there And figure out how you can run multiple apps on 1 server. That would be a really fun thing to learn. I I personally run that setup on my own servers as well. So check it out. Rid. Linode.comlinodeforward/ syntax, and that's gonna get you $100

of free credit, which that that's a lot. Thank you, Linode, for sponsoring. Cool. So let's get into the next most, I wanna say, tab, but it's not necessarily that basic because there's a lot of stuff in here, and that's the styles tab.

Now the styles tab has a lot of really interesting little features, things like rid The colon HOV, which is not a, you know what's that thing, the HOV lane? That's not an HOV lane. Yep. What this is, it allows you to trigger different states for the pseudo selectors for the given element. Right? Rid People often ask, how do I do trigger how do I, debug this when it's hovered or anything like that? This is how you select the thing in the elements tab, then you head over ready. The styles tab, and then you can select active focus, focus within target, hover visited, focus visible, and be able to force that element's state. That's how you that's the best and easiest way to check the styles on that. There's also this dot CLS, which allows you to add a class name to the given element.

This is really good if you are using a lot of maybe utility classes and you wanna see what something looks like with a bunch of utility classes thrown on. You can just Type them out here. Oh, I've not used this before. Yeah. You just type, type, type, hit enter. Type, type, type, hit enter. Oh, that's better. Yeah. It's much better than double clicking The class string and trying to type and then maybe having a typo. That's what I was doing. Yeah. Yeah. It's much better than that. I I'm I'm very familiar with that style as well. There's also a plus. Now the plus is interesting because it basically adds a new style rule. And if if you click plus, It just adds a new style roll with whatever you're selected. But if you click it and hold it just a little bit, it gives you the option to, like, what you want to In that sort of way, if I'm doing this, I'm just clicking the plus button. But it does seem like if you wanted to override 1 specific style sheet and you wanted to test some sort of cascade thing you could say, hey. Put it in this specific style sheet. That is cool. That is only on Chrome. Rid. That's not something that exists on Firefox. You can obviously add styles

to your CSS, but That's via the actual CSS tab, not via the adding a a quick class to it. So that's that's neat. I don't yeah. Like you said, I don't think I would use that all that often. But rid. If you are debugging some weird cascading issues, obviously, adding inline is going to override everything else. But if you wanna, like, actually See it and not just blow away everything, but fold it into the cascade. That would be really handy. Lastly, here is the the primary way that I'd, And not lastly in styles, but lastly in in terms of, like, right here is largely the way that I,

you know, try out styles. When I'm trying out Styles, I pretty much just click in the element style that's just below that. Element style is a basic way for you to add inline properties to your CSS. If you wanna add any CSS, it's gonna get treated as an inline style here. It's gonna be at the highest priority, and it's gonna override with the exception of something maybe marked important, Which is probably, another good reason to never use important unless you absolutely have to. Right? So this is pretty much what I do, and what's cool about this window is if you I'm used to designing in the browser a bit. So if you're used to writing a whole bunch of CSS, you get some nice auto completion, you click around here, you get some little helpers, some color widgets and stuff, Then you can just highlight this all, select it, copy, paste it right into your code. You're good to go. So if you're designing a browser, that's that's certainly one way to do it.

So there's also the computed tab here. The computed tab basically lets you know what style an element has.

This is this is the the ultimate list of what the final styles on this specific thing are, and there's a show All checkbox that show all checkbox just shows every single property, even the implicit ones that you have not assigned, but, like, box shadow none on something that doesn't have a box shadow. Right? So little things like that. So I usually leave that checkbox unchecked because that can be a giant PIA to have a giant list of styles, And then you can get only the ones that you want here, but you can also type in here and filter if you wanna see what specific font size is being computed.

And this gives you the computed values as in if you're using, like, percentages or rems or whatever, it gives you 2 it in pixels when you need it. There's also the layout tab. The layout tab, has all of the layout stuff for grid and Flexbox.

Is that how it is in Firefox too? Is there a layout tab right here, or is it like a flex tab or something? Nope. No. There's a layout tab,

where you can turn on and off your flex and grid overlays and as well as a couple of rid Options, I'm pretty sure that they're they're at parity now between Firefox and Chrome, which is awesome. And then it also shows you the the the computed box model, rid Which is really handy if you wanna be able to say, okay. Like, why is this thing becoming bigger? And you can you can say, oh, okay. It's because of the rid Padding or the border or the margin, it will show you exactly, okay, how that thing has been built up. But I I wanna talk real quickly about the computed tab though because It's super handy.

If you wanna know, like, why is this thing getting this style, even if you haven't directly applied the style, You don't have to, like, scroll down every inherited property.

You can just go to, okay, let me see where is it getting its color from. You click on the color, rid. And you say, okay. Here is exactly the line in the CSS where it has been applied. And then if you open at least in Firefox, if you open them up, It will show you every selector that has been applied to that, and then it will cross out the ones that have been overwritten with more

Specific styles. Oh, yeah. So is that in is that in Firefox as well? It's a great question, Wes. That's a question for our resident Firefox expert, Wes Boss. Rid. With more on Firefox's Wes. It is. It is.

Okay. Cool.

Yep. Yeah. So they are exactly the same, which is great. The dev tools have been Getting so good in all the browsers recently.

And, you know, when when Firefox got those those grid and Flexbox tools, it was like, Wow. This is this is the future of this stuff. And now that Chrome has it too, it's just a it's a party. You can head to the layout. You can show your rid Grid lines, your flex box columns, and everything. And I I don't know about Firefox, but Chrome recently added the same, like, You know, like in Figma or Illustrator, and you have, like, a line left, a line right, a line center, those little buttons with the logos on them? Yes. Yeah. Chrome's added those so you can now, If you're the type of person that has a hard time remembering, like, justify content or any of those types of things in Flexbox or grid, align self, align start, those kind of things, Then you can actually have real buttons to click on and test them out. It'll really create the CSS for you. Yeah. Oh, that's awesome. Let me open it up. I think it's in Canary right now.

Oh, that is so cool. Yeah.

Being able to, like it's like a nice balance between, like, a gooey and rid Actually, I've said this before. Flexbox and Grid are very hard to parse just looking at the code Yeah. And very easy to parse when you're using a visual tool like like, dev tools. So having, like, a little bit of extra buttons on those types of thing is key. Totally. I hear you. Ready. In Firefox, we recently got, toggle print styles, toggle light, and toggle dark buttons. Those always been available under a sort of a nested menu. It's like a rendering in the Chrome or something.

Yeah. Allows you to, like, emulate different, Like print style sheets or dark mode or light mode, or you can also often fake the GPS coordinates that are being reported from navigator.getusermedia, all kinds of stuff in there. And just like these little nice little things that Instead of having to dig deep for those, you can just turn on dark mode, light mode because that's something that a lot of websites are starting to have. And if you are trying to debug Light and dark mode. It's very simple now. Yeah. Which is great.

The next one I wanted to talk about was that little panel that's in the bottom. Now I've heard that you've been able to drag any of the tabs into the panel, but I am not able to do that.

I wonder if that's a canary thing. What is this panel you're talking about?

So okay. Panel. You're in your dev tools. You hit the escape key. The console pops up. The JavaScript console pops up. Oh, yeah. So they call that the panel. I believe they call it that.

I'm not positive about that. But you can They have this be several different things whether it's the animations tab, which is really neat, coverage, developer resources issues, network conditions, rendering, search sensors, web audio, web auth, And a lot of neat stuff, but you know what? I recently saw that you've been able to drag, like, the network tab down there, But I don't I'm not able to do it. Maybe I gotta fire up canary and see if that that happens.

If you are able to do that, let me know what you're doing because This little panel has always just been sort of the console to me, you know, and pretty much the only thing I use it for other than maybe some of the animation tools or rendering. But for the most part, this little panel here, you can get it back, hitting escape, hit it escape to open, close, whatever. Maybe you can talk about the next thing, and I'll hunt in canary here to see if I Figure out how to get it to drag. Hitting escape to pop the console up

while you are in the elements tab is really nice if you're trying to work with both of them.

Usually, what I'll do is I'll just switch between the elements tab and the console tab and go back and forth. Oh, wow. I usually leave the console open in the panel

And just hit use escape.

Interesting.

Yeah. It's interesting that you go back and forth. Yeah. I I almost always go back and forth unless I'm rid Specifically doing it. I mean, that's what I was gonna ask, what your workflow is. I find that, especially when I'm recording stuff, it gets too cluttered rid Because I bumped the font size up of my console to be massive. And then there's sometimes too much stuff, but it can be super handy. Firefox does not have the ability to put rid. Anything other than the console into this little pop up tab, I don't believe. Oh, wait. Yeah. I'm I'm right there. I'm just checking to make sure my,

Chrome Canary is up to date.

And then if it is, I've been using Brave primarily, which is fine, but, like, It doesn't, you know, it doesn't get all the latest and greatest, Chrome developer tools from Canary that I'm used to loving, you know? So Yeah. Yeah. But I I hear you on the font size thing, man. That's a that's a very real struggle. You get oops all consoles sometimes when you, you bump up the console size way too much or your font size way too much on that. Yeah. For the longest time, I went down the rabbit hole of trying to skin the dev tools

so that the The buttons would be small, but the the actual the code would be larger. Oh. And at least when I tried it, There was all kinds of, like I they got rid of the all the icons, though. There used to be all kinds of icons in between beside all these tabs. Rid. Yeah. And it would screw that up, and everything would be off, and and nothing would look good. So you it turned out you couldn't do it, without having to rewrite the entire rid Layout. But, it looks like they've probably rewritten the CSS to layout the dev tools tab because that's what I do in my rid Editor is that I bumped the text up very, very large, but then I leave, like, sidebar and tabs big enough to be readable, but not too big that it takes up, like, 10% of the screen, yeah, because it's so valuable when you were doing a tutorial.

So I figured it out. Okay. Here's what you do. You head to your whichever tab you want to move into the panel, The drawer, whatever you call it. Yeah. And then you right click on it, move to bottom, and then it pops it down there. So you can do network down there if you want. That way you could have the elements and network open at the same time if you want, and then you can move to top. Isn't that handy? That's handy.

That is especially for network. Yeah. Right. I wanna have my network and HTML open or yeah. Yeah.

Oh, that's that's a killer feature

Firefox doesn't have. I like that a lot. Yeah. It's pretty new. I remember when it got announced, you know, so I like it. You know what else I like? I like read. Century. I like Century because it tells me where my stuff is broken. If my stuff's broken, I don't wanna hear about it from a user. I wanna hear about it from Century.

And I wanted to say, hey. This stuff is broken. Maybe you should take a look at it. And guess what? This was introduced in the version 3.0.1, and it was reintroduced by none other than Scott Zelensky. Oh, crap. Okay. I gotta go fix this right now. Rid So I love Sentry. You could click on that, and then you can say, oh, make this into a GitHub issue. You can apologize to your team. Say, I introduced this bug. Here's the patch to fix it.

New new release version, click as resolved, and then, uh-oh, you get an email when that didn't actually fix it, and you get a regression alert. And so that's really great because you can fine tune all of that stuff to be, really just fit your developer workflow in the very best possible way, and I really do love that. So head rid on over to century at century.i0. Use the coupon code tasty treat, all lowercase, all one word, and you'll get 2 months for free. So thank you so much for Century for sponsoring all of our hasty errors and exceptions.

One other tab I really like is the fonts tab rid Inside of the inspector, and that will tell you which font it is using, the size of the font, the line height, rid. Spacing whether it's italic or not, and you can also turn those things on and off. So if you wanna be able to quickly visualize, what would this look like if it was a little bit rid. More line height and bold. You can just drag those sliders and see the values. And and, again, like, that's something I think is probably better UI than rid. Just hitting your up and down arrow keys to to change the actual values, especially because, like, things like weight go up by a100, rid And then your font size can go up by any number depending on how you're sizing it with rims or rams and pickles or or or really anything.

And what I really love about this fonts tab is that it will tell you if the font being used is a web font and which web fonts are installed on the page so that you can very clearly see, okay, this is using the web font that I loaded and not, rid Like, a font that's on my system because I've done that before where you're like, it looks good on my end, and then you forgot to actually install the web font,

And it's just using your system font that you have installed. Yeah. Yeah. This the same I don't think this exists in Chrome, but it is. I really like it. There is a new Chrome tab in the developer tools called CSS overview, and this has some of the same kind of features in there, but it's not necessarily the exact same. I do love that the fonts panel is just there, or am I being am I being off base here? Sorry. I don't see the the fonts thing in Chrome here at all. CSS overview does have that. What what's neat is that you can click ready. Capture overview from the CSS overview tab, and it tells you all about your style sheets. I'm on a website here. This is not my website. They're using 11 colors, it says, and 14 colors for text. But what's very funny is that they have 4 colors that are Extremely similar.

F f f, f 6, f 6, f 5, f 5, and they I mean, These things are not gonna be this is not zebra striping. They got a d a d 8 for zebra striping. So it allows you to see, like, really quickly at a glance all of the styles that are used. And maybe you can see CSS overview. Where do you get to that? Oh, you don't get CSS overview?

I don't think so. No. This sounds great.

See, this is why we do this episode because the things between Scott and I that we both don't know

and Well, there's too many things. Yeah. Yeah. There's probably a lot of, like, things that you're learning on this episode. There's just straight up too many things, and and people wanna be like, how do you know all this stuff? Well, you know, some of it's just playing around, but some of it's getting to talk to Wes here about it and see the way that he works. Another one is in settings. There's a little checkbox that says show me what's new, and that always ripped. Like a new window. So if you have that open, you can always be aware. Yeah. But this this, CSS overview, I'm gonna I'll I'll I'll run through it first, and I'll tell you what I can do to help you get it. It even pops up things with contrast issues, border colors, font info. It tells you, like, one occurrence of this font to, you know, 783 like, it it analyzes all of your CSS to tell you,

You know everything about it. Oh my gosh. I got it. I it's an experiment in Chrome. It is

very good. Oh, this is cool. But it's not, re You know, the it's not the font tab. It doesn't give you the option to toggle the fonts and whatever, but it does

tell you a whole lot about your CSS. Read. Media query. So it gives you a list of how many elements you have. Westboss.com has 349 elements. Read. The colors, I used 1, 2, 3, 4, 5 background colors, 3 text colors, 3 fill colors, and 3 border colors. And, man, I'm actually kinda proud of this. I I actually didn't drift any from, using

those types of things. Yeah. This is I love that, though. I'm I'm actually kinda proud of this. Yeah. That's pretty, it's a a great way to be. Like, it looks decent.

This is ready. So cool. All the different media queries, unused declarations.

Yeah. This is cool. So go turn rid on. So how you do this is you go to the cog item settings, or you just hit f one key if you're a Windows user. I know Macs have rid of keys. They're just hard to type.

Then you go to experiments tab in settings.

And in there, it will say CSS overview.

Rid You check that and then close your dev tools and open it up again, and there'll be a brand new tab that says CSS overview, and it will you'll be able to click a button and generate it. Yeah. It's it's neat. You know, for me, I don't remember doing any of that. I remember just showing up one day, but I I very well may have, could have. If you're the type of person who geeks out over writing, like, a good cascade and writing, you know, as optimized CSS in ways that you rid. And then this is a really, really handy tab to have. It really gives you a high level overview.

You might be at a at a glance at your code. It might just be rid to wear in a single Sass file or a single CSS file. It might just be tucked away somewhere. But when you have it all analyzed for you in front of you and say, hey. No. You're using, like, 15 different shades of very similar gray. What's going on? Are you alright? That actually should be, like, a little clippy. It's like, hey. I I noticed that, You good? You really, really like 8 colors that are just about the same. Everything okay?

Next up we have is the animations tab. Rid. This is really handy. You click on an element that has an animation, and it will list out every animation on that as well as allow you to replay it.

You can just hit your space bar kinda like it's like video editing or audio editing software. You can change the the playback. So in case you are if ready. You're working on, like, a really long animation. Like, I once worked on animation of, like, a car driving in. It was, like, 10 seconds. Right? And if you're, like rid I don't know. If you wanna speed that up, you can. Or if you wanna slow it down because you wanna, like, really get into it, you can slow that down in your dev tools without having to actually change the code, Which is good because, like, I've certainly left those in accidentally before, and then you deploy it with the weirder

weird setting. Yeah. There's always a time when, like, You are doing your, like, CSS animations, and you're like, is this good? Like, let me let me break down the steps of this animation. So then you said or even, like, let's see this thing if this thing's working, like, really truly correctly. Let me just throw a, Like a transition time of 10 seconds on there. Just like watch it slowly move in. This is a much better way to do that without necessarily getting into it. You know, I I I appreciate these tools. I I was a Flash guy. I don't know how much Flash you did, but I I like to work in Flash animations and after effects. And rid I've had my share of animation interfaces for debugging easing curves and stuff like that, and I love having this stuff in the dev tools because I am a very visual person. So having the animations tab in there is something I do use. I don't rely on it, but it's definitely nice to be able to Really debug and and and help help your animations become more polished.

Totally. I think that that's really key is being able to, rid Like, sometimes I do animations. I just try stuff. Oh, yeah. It looks good. But then if you look into it and you say, oh, okay, or you can play with the easing values or whatnot,

It makes it just look that much better. One time when I I worked at Ford, we we had, like, this, like, crack team of UI people and and dev people and all sorts of stuff. And at that time, you know, CSS animations, they weren't like super new, but they they were kind of like a a technical thing. And What I would have loved would be to have this tab at that point to be able to sit down with the designer and say, alright.

Develop some easing curves and some animations together. Because what I had to do in the past was, like, present several different ones to be like, is this good or, like, And then you'd be like, oh, I need it more snappy. You know? But, like, it would be really nice to pop open the animations tab and work on that with the designer and sit down and say, like, what do you feel about this one? Like, how does this feel? And you could just, like, tweak it that way. So definitely an underutilized tab, especially if you're working in animations at all course, CSS transitions, any of that stuff. Also under utilized part of dev tools, and this is not an ad transition, is the settings cog.

You click that little settings cog, you get so many settings.

There are so many settings in here. How many people have never opened this thing before? You can do so much stuff. In fact, even just that show what's new after each update, gotta have that. Enable tab move focus, enable JavaScript source map, automatically reveal Files and sidebar. I mean, there's just an endless amount of options here. But you know what my favorite tab in the Settings here is. I bet you could guess what my favorite tab would be in the settings. Would you like to take a guess? Is it throttling because you have the fastest Internet in the world? No. It's Experiments because I like new Chinese stuff.

Oh, it's true.

The experiments is great because you can Check a whole bunch of neat experiments, one of which is allow custom UI themes. A lot of people ask me about how I got my dev tools Styled, and I use a Chrome extension to give me material theme for my dev tools. It's gorgeous. It looks super nice. So I've posted the link to that extension in the show notes, and then you can just check this, allow custom UI, install this extension, and you will get very, very good looking dev tools. Next up, I don't know if this one exists. You can tell me if this is in Chrome. It's the changes tab. I do.

Changes tab will show you rid. Literally, what has changed? So you click on an element and you bump the font size up. You change the background color. You do a couple things. You're like, okay. That looks good. And then you answer you then you say, okay. What did I change? What did I take off, and what did I add on? The changes tab will keep track of additions and removals and modifications to that specific element. And then if you need to mirror that back to your actual source, then you you have something to look at. Rid. I found in the experiments

part, I found enable new font editor tool. Woah.

So that wasn't there. I don't know when that became here, but font editor tool, that sounds pretty cool to me. I'm gonna pop this open and see if it's a lot like that Firefox one we were just saying I wish I had in Chrome, rid It is. That makes my day right there. That's great.

Yeah. There's some interesting stuff in here. Spotlight, not sure what that is. That sounds cool. Yep. Rid. Enable new font editor tool within the styles pane. Enable automatic contrast issue reporting.

It's probably a good idea to turn on. Yep. Enable localized dev tools. That's good if you don't speak English.

Nice. Some really cool stuff in here. I love going into the

experiments tab, rid Finding all kinds of news. So the font editor tool is so cool. Is it? You click it, and it pops open. It tells you the font family. It tells you all the fallbacks. There's little trash cans you can delete them. There's a little sliders for the font size, line height, font weight spacing.

Yes. I want this. Very much want this.

Oh, and you can choose From computed fonts, system fonts, generic families, font size. Oh, yeah. Oh, yeah. This is Cool. Very very similar. Oh, yeah. It doesn't tell you what fonts are available on the page.

Oh, no. It does. That's what computer fonts are. Yeah. But it doesn't tell you one thing a Firefox does is it will tell you what the file name is. I know. That's the one thing. Reddit has a font called the redesigned font 2020.

That's a fun name. That's a fun font name. Cool. Well, that's that's good to know that they're working on that. Yeah. Lot of cool stuff. And and they get it just Pop in there from time to time, you might find the the one missing panel that you were just saying on a podcast episode didn't exist. So who knows what's in there? There you go.

And, also, You might find a little bit about video stuff. I don't know. You might find video stuff. Who who knows? But if you had to add that to the network tab And you watch a video stream in from LevelUp Tutorials, you're gonna see that that video is coming from Mux.

And Mux, m u X is the the company here. What they do is a developer first video. Now I've worked a ton in video from all sorts of ways, and Mux really, Rui takes the cake for being able to be developer and code focused without having to worry about where you're storing this, types of files I I I had to do so much work in the past with ingest, where you ingest a file, then you have to create 15 versions of it, then you put it in the s three bucket, and then you rid the right version or you do all these different things where Mux does all of that for you. You get your video uploaded or you point it to a URL of an already existing s three bucket or anything like that, read. And Mux just does the rest. It uploads it. It transcodes it. It gives the user the right version of the file at any given point, And it does streaming, via the m three u eight, which is really difficult to do on your own. Trust me. You need a service to do video streaming. It's not something you wanna take on. Yeah. I've tried to do it. I've tried to roll my own, and Mux was way, way, way easier. Head on over to mux.comforward/ syntax.

It is the video API first platform. It makes it extremely easy to build video apps for the web or for just about Anywhere, to be honest. If you need video transcoded and stream live, live video, thumbnails, GIF previews, all sorts of cool stuff. Head on over to mux.comforward/syntax and sign up today whether you are Serving a few dozen streams or a few million.

Yes. That's right. 1,000,000. Mux can handle it. So thank you so much for Mux for sponsoring.

Ready. Last tab here. And again, I don't know if this isn't Chrome, but this isn't Firefox. It will give you, compatibility possible issues. Re So you just open up the compatibility tab. It will scan your website for any vendor prefixes rid or CSS properties that you are using that don't necessarily work on other options. Like, I I just scan Reddit here. It says It used the cursor a 102 times, but that doesn't work on Firefox mobile. That's fine. Right? Obviously, you don't that doesn't really matter. So if you wanna know really quickly, instead of just, like, going through all the settings of your website and then looking them up on can I use, you can just rid? Run this on your website and then pop up any possible issues. I imagine this is something that you're running. You go through quickly. Not a big deal. Not a big deal. Oh, I didn't think about that. Oh, I didn't I'm using WebKit line clamp here. That doesn't necessarily work on Firefox. You know? Rid. So that's kind of a cool tab as well. Yeah. Yeah. And that's something that's still important today even though, you know, it's easy to forget. We have auto prefix and all that. It's still important to know what's compatible and what's not in your CSS. Absolutely.

Yeah. Not not even necessarily just Web prefixes is just like things in CSS that aren't available in other browsers. Totally.

Auto prefixer can only help you for things that have prefixes, Believe it or not.

Alright. I think that is all we have here for the inspector tab. It's amazing that you can go a whole hour just on rid Talking about the different features of the dev tools, but getting good at dev tools is, like, is the same thing with, like, your editor. It's just, like, spending time rid Knowing what is available and and then spending time to learn how to use it will make you a much better developer in the long run. So if you

Know anything else that we didn't cover, make sure you tweet us at syntax f m. Yeah. Absolutely. I mean, we spent largely most of this episode in two tabs of the developer tools. I could probably, spend several hours talking about this stuff because it is. The bet you're a craftsperson. Right? The better any craftsperson is with their tools, the better crafts they're probably gonna be able to produce. Does that mean that, you know, the the person with the best tools wins? Or no. But if you're really good at your tools, it's gonna help in every facet of building literally anything. So really spend some time in those dev tools. And, you might learn a little something here or there about, you know, potentially adding CSS classes really easily.

Let's move into some sick picks. Do you have any sick picks for me today, Scott? I do. I have a sick pick, and, this is going to be kind of funny. A YouTube channel that I've been really liking, and it's in the same vein as technology, connections, or, any of those that are are Very, like, technical explanations of things. Yeah. I wanna stress very clearly that, I'm referring to one particular playlist from this this user's channel, which I don't know how this got suggested to me. The channel is El Toro Ryan.

So I guess Ryan and I have that in common.

Ryan does these Videos, they're called the problematic roller coasters, and then he'll do the explanation of it. And what it is is they're, like, 30 minute long videos where he explains Specific roller coasters, none of which all are even though the the the playlist is problematic roller coasters, not all of them are are The history that led to the design of it, the design influences, where they came from, the challenges they face, the modifications they've made to it, rid The different physics and velocity and stuff behind it, and they're in-depth, man. It is so cool to hear him talk about, alright. This company produced this one, And that led to producing this one, and here's what they learned from this version to the next version. And this version only lasted 2 years here because this thing happened. I'm not like Crazy coaster head. I mean, I've been to Cedar Point a few Coaster head. You know, a ton of times. Well, these that's what's funny, Wes, is that this guy who does this YouTube channel and his friends are like, They're doing, like, blog videos where they're like, alright. The coaster head's coming. We're coming. We're gonna hit this 1 and this 1. It's like, I just ignore all those videos. I don't want any of that stuff. Right? I just wanted this technical explanation about how these things work and their history and what they tried and didn't try. It's very much up the programming alley in terms of if you like that kind of Debugging technology connections style of video. I found them to be pretty good. There's only, like, 12 or so of them, but I I've been watching all of them. So That's my sick pick. That is great. I'm going to sick pick a YouTube channel as well. It's the post apocalyptic

inventor.

Rid. This guy basically goes into he's from Germany, and he goes into these scrapyards and pulls these, like, 50, 40, 50, 80 year old tools Oh. Out of a scrap rid pile, and then he refurbishes them, which I've always really enjoyed watching him do them. But then he he did one on modernizing, like, 10, 15 year old cordless tools because that's starting to become a thing now where people have these, nickel cadmium tools, rid And then the batteries go on them, and then they toss the tool and then go buy something new. And the the thing about them is that you can rid Just change the adapter on them with a little bit of work, and you can make them work on modern batteries, which is awesome. And I've done it with a couple of tools of my own, and he did a really good video showing, like, how it works and and voltages and low voltage cutoff and rid Pretty much everything that I would want to explain to somebody about what you need to know about doing this. Because sometimes you can go on like, I found a really nice Cordless skill saw that had, like, a old battery, and I modified it to work on my DEWALT battery.

And people are always like, oh, how'd you do that? I'm like, well, rid here's the things you need to know. But he did a really, really good video on on doing this, so check it out. I'll put the link in the show notes, but it's the post apocalyptic inventor. Did you put any, underglow on that thing when you're modding it? Tools are, like, 18, 20 volt, And all the kinda cool car stuff is 12 volts, so you need to step it down. Throw a little LED strip on there.

Yeah.

Shameless plugs. Rid I'll shamelessly plug all of my courses. Westboss.comforward/courses.

I've got Master Gatsby, beginner JavaScript. Also, I just published a guide, rid Beginner JavaScript notes.

It's 200,000 words, 1500 screenshots, and along learning JavaScript Through applicable way, it's totally free. So just go to westboss.comforward/

javascript for that as well. Sick sick sick. Jim, we'll see plug The, level up tutorials courses, we're gonna be doing a SvelteKit course and then an advanced SvelteKit course. So if you've heard me talk a lot about SvelteKit and you thought it might be Head on over to level up tutorials.comforward/pro.

Sign up for the year. Save 25%.

And also, we have team accounts. So if you're looking to get your team in on the mix, everybody wants to get down with some SvelteKit and some future tech, head on over to level up tutorials dotcomforward/pro.

Sign up your whole team today.

Alright. That is it for today. Thank you so much for tuning in. We will catch you on Monday. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show.

Rid.