Dev Tools Power — Elements Tab

10, 15 year old cordless tools because that's starting to become a thing now where people have these, 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 and words, 1500

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.

Sign up for the year. Save 25%.

So I guess Ryan and I have that in common.

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 or, 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 to be able to sit down with the designer

screenshots, available on the page.

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 it will list out every animation on that as well as allow you to replay 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

connections,

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.

like, Oh, that is so cool. Yeah.

Specific roller coasters, none of which all are even though the the the playlist is problematic roller coasters,

The history It is the video

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

not all of them are are 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 one cool thing, have you ever used this break on? 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, for the web or for just about Anywhere, to be honest. If you need video transcoded and stream live, live video, thumbnails, 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 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.

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,

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, 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 My name is Scott.

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,

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.

any of those that are are Very, like, technical explanations of things. Yeah. I wanna stress very clearly that, 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.

you can

And people are always like, oh, how'd you do that? I'm like, well,

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 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.

and he did a really good video showing, like, how it works and and voltages Finding. There's, like, a special name for the finding where Something by removal.

and along learning JavaScript Through applicable way, it's totally free. So just go to westboss.comforward/

you know, potentially This is this is the the ultimate list of what the final styles on this specific thing are,

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

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,

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 Shameless plugs. Rid I'll shamelessly plug all of my courses. Westboss.comforward/courses.

nickel cadmium tools, Welcome 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? 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,

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.

Head on over to syntax.fm 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, 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

you might learn a little something here or there about,

adding CSS classes really easily.

will make you a much better developer in the long run. So if you if the font being used is a web font

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,

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.

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 part, I found enable new font editor tool. Woah.

And I spent using

We are sponsored by Linode any number depending on how you're sizing it with rims or rams and pickles or 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.

Sentry, error exception performance tracking, and mux I've got Master Gatsby, beginner JavaScript. Also, I just published a guide, rid Beginner JavaScript notes.

frames per second here of my mouse cursor is now 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?

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.

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,

and hosting for your video platform. Talk about them part way through the episode.

Hey. I'm doing good. My Yes. I want this. Very much want this.

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.

I'm West Boss. With me, as always, is mister Scott Talinski. How you doing? font size. Oh, yeah. Oh, yeah. This is Cool. Very very similar. Oh, yeah. It doesn't tell you what fonts are modernizing, Rid Yeah. Pinterest is awful. There's, like, a couple other apps like that where

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, fake the GPS coordinates that are being reported from navigator.getusermedia, 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 Rid.

what would this look like if it was a little bit rid. More line height and bold. You can just drag those sliders One other tab I really like is the fonts tab rid Inside of the inspector, and that will tell you

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.

which font it is using, 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 Node balancers,

I like it. You know what else I like?

all of our hasty errors and exceptions.

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,

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.

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

and you'll get 2 months for free. So thank you so much for Century for sponsoring

Firefox doesn't have. I like that a lot. Yeah. It's pretty new. I remember when it got announced, you know, so

And what I really love about this fonts tab is that it will tell you

It has a little, like,

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

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.

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 especially because, like, things like weight go up by a100, rid And then your font size can go up by and low voltage cutoff and rid Pretty much everything that

The buttons would be small,

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.

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? Videos, they're called the problematic roller coasters,

so that the

And then if it is,

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.

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.

and which web fonts are installed on the page so that you can very clearly see, okay, this is using where you can turn on and off your flex 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.

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,

the web font that I loaded and not, rid Actually,

Interesting.

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 rid Just change the adapter on them with a little bit of work,

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

And just hit use escape.

neat, coverage, developer resources issues, network conditions, rendering, search sensors, web audio, web auth, And a lot of neat stuff, but you know what? 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,

If you are able to do that, let me know what you're doing because 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 But I don't I'm not able to do it. Maybe I gotta fire up canary and see if that that happens.

compatibility

Ready. Last tab here. And again, I don't know if this isn't Chrome, but this isn't Firefox. It will give you,

million.

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

whether you are Serving a few dozen streams or a few

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 to host your application so you can try it out. I want you to

possible issues. Re So you just open up the compatibility tab. It will scan your website You can just go to, okay, let me see 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.

API first platform. It makes it extremely easy to build video apps

for any 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,

GIF previews,

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

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, and then he'll do the explanation of it. And what it is is they're, like, 30 minute long videos where he explains What this does is it opens essentially a fairly decent sized text area, which isn't formatted super well. But, 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.

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

And, also,

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.

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/

You might 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

via the m three 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.

without having to worry about where you're storing this, 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.

types of files I I I had to do so much work I've been using Brave primarily,

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 And, you know, when when Firefox got those those grid and Flexbox tools, it was like, 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 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.

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.

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, 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

tab in settings.

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? 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 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, and sign up today 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.

And in there, it will say CSS overview.

Then you go to experiments This is ready. So cool. All the different media queries, which I've always really enjoyed watching him do them. But then he he did one on 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?

Next up we have is the animations tab. Rid. This is really handy. You click on an element that has an animation, to syntax, the podcast with the tastiest

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, 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 all lowercase, all one word, 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

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.

you try to use the, like, Reddit. Reddit Reddit mobile or not. Rid Yeah. Reddit mobile, every single time that you visit it, I wonder if that's a canary thing. What is this panel you're talking about?

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.

which is handy because if you have, like like, 800 nested divs and you wanna know which one is rid Not causing the scrolling, 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 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 Cordless skill saw that had, like, a old battery, and I modified it to work on my DEWALT battery.

in Firefox land for a little bit, but Chrome recently got a a whole host of really great Flexbox tools.

flex grid,

but which one is scrolling,

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.

From your console to your inspector with that That's via the actual CSS tab, not via the adding

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

and 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 It's probably a good idea to turn on. Yep. Enable localized dev tools. That's good if you don't speak English.

you can right click on that in your console and say reveal in inspector,

collapse

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,

you can run dot read. Scroll into Vue, 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.

in your elements tab And you wanna be able to access that DOM node in your console, 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 you have an element selected,

put a background color on it, you can scroll it into view. Another kinda cool thing is that if you're in your console 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,

you can use the dollar 0,

which is inspector is rid There's the word for the elements tab in Firefox, 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 rid Editor is that I bumped the text up very, very large, but then I leave, syntax,

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

re Sub tree modifications, 4 colors that are syntax.

and you don't know what JavaScript is causing 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 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 I'm gonna tell you as the developer, inventor.

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.

What I would have loved would be to have this tab at that point

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

tab, especially if you're working in animations at all Ryan does these 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, 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.

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,

and say, alright.

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.

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

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.

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 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.

All of your paints that happen, it can show you any of your scroll rectangles.

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

Changes tab will show you

Oh, it's true.

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.

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

has all of the layout stuff for grid and Flexbox.

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 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, 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.

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

rid. Literally, what has changed? So you click on an element and it's in a list of a 1000 things. Where is this thing Without having to

and modifications

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.

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

dedicated CPU, literally anything you need Yeah. This is cool. So go turn rid on. So how you do this is you go to the cog item then it's really, really nice to see that. I I forever have wanted, Oh, and you can choose From computed fonts, system fonts, generic families,

for anywhere from $5 a month all the way rid to some really big ones where you're where it's dedicated.

for your running your actual rid Structure is on Linode. So I'm

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,

DDoS production, firewalls, But they have block storage, object storage, backups, and node removal. And that's really handy because re If you want to insert a breakpoint into your JavaScript or or really anything.

you've got a node app, and you wanna host it somewhere.

recently.

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.

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

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,

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

you either use the keyboard shortcut, you right click on something,

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.

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, all sorts of cool stuff. Head on over to mux.comforward/syntax It might be rendering in Now the styles tab has a lot of really interesting little features, things like rid The colon HOV, Auto prefixer can only help you for things that have prefixes, Believe it or not.

or whatever, you inspect an element. Right? And in fact, so many people I've always referred to the developer spend several hours talking about this stuff because it is. The bet you're a craftsperson. Right?

Rid Linode is is where you can host that thing, and they're gonna give you a $100 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 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 know what's that thing, the HOV lane? That's not an HOV lane. Yep. What this is, it allows you to trigger different

which is not a,

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.

and that's gonna get you $100 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

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/ 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.

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,

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 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

783

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

like, it it analyzes all of your CSS to tell you,

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

Yeah. I'll take, like, the entire 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 Yeah.

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 Yes. Yeah. A lot. The break on what is it? The with the possible options, break on 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 Linux cloud hosting,

let's talk about some Oh, that's that's a killer feature

the very basics of the elements tab, then we'll get into some of the styles, being able to go from inspector to console

talk about the different panels rid. Within the elements tab, It's 200,000 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,

JavaScript DOM things that you can use to figure out and debug your JavaScript,

has

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,

349 elements. Read. The colors, I

unused declarations.

used 1, 2, 3, 4, 5 background colors,

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 Chrome Canary is up to date.

to your CSS, but

obviously, adding inline

In that sort of way, if I'm doing this, 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 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

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

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 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, 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 DOM nodes. So Oh, yeah. Same. What's the name for this this type of Okay. Cool.

key. Totally. I hear you. Ready. In Firefox, we recently got, toggle print Alright. Well, let's ready. Get into it. Let's talk about and then it will just select it. And the

Being able to, like it's like a nice balance between, like, a gooey 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,

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 rid Video and a p APIs

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, and it was reintroduced by none other than Sign up your whole team today.

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

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 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.

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.

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.

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 Which is probably, 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.

Sorry. I don't I recently saw that you've been able to drag, like, the network tab down there,

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? 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,

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,

Extremely similar.

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

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, When I hover this thing, using like, you're doing, like, a tricky layout, ready. And something needs to be like a direct child of something.