#108: Using DevTools Like a Boss

Feel the rhythm. Feel the rhyme. Give it up. It’s bobsled time.

But no, is little Runnings. It’s the Winter Olympics. It’s

I Tonya I saw I, Tanya. You, Folks, you’re listening to the dragon UX podcast. I am your host, Michael Fienen.

I’m doing very well, this week, we’ve queued up a pretty cool topic where we’re gonna go dive into mostly Chrome, but also a little bit of Firefox and talk about dev tools and features in dev tools that you may not know about. But could you

Yeah. So like looking at stuff that the notion here is we want to give you some features that you probably don’t know about, that you’ll actually use, like, once you know them, it’s gonna be like, Oh, crap, this is really helpful. There’s a ton of stuff in Dev Tools. Yeah, that’s super cool, that you’ll see and then never use again.

I am drinking this evening. Wait, whoa,

I do want to get Go ahead. I do want to give a quick shout out actually before I jump into what I’m drinking. Shout out to Myles Kovarik one of our new Patreon backers is awesome. Thanks for the support on the show. If anybody else wants to support drunk in UX you can go to drunk in ux.com/support and you can back us whatever you want. $1 $3 $27 $832.14

I am drinking this evening a car do 12 Speyside Scotch had it before. It’s a very sort of red fruity, you know, Apple Lee tree fruity like a smoky tree fruit kind of apple pie. Very nice. I like this a lot. I’ve not had the 15 or the 18. But I do want to try them. This is one like, I like this as a Speyside. Like long before I would go to like a Glenlivet, 12 or something like that like this. This to me is kind of like this is what a Speyside Scotch is meant to taste like. Like, it’s a lot like Balvenie in that way. Like it just feels more right for what what that flavor profile is the just the sweet tree fruits. Little tiny bit of smoke, but only barely.

Baldwin bhavini. I’m Mark Allen. McKellen really Mark Callen emphasis on the MA usually Glenmorangie when Glenmorangie the Freud, okay. Okay, so yeah, there there’s lots of gluten FIDIC can eat Glenfiddich.

Anyway, your term What are you drinking?

I can Anyway take coffee and put black pepper in it, but I don’t do it.

Yeah. Does it really know? I don’t know. I wouldn’t do it.

emphasizing that just because you can does not mean you should

No No sir.

my my orange rum Sodastream. concoction? Yes,

Dev tool dev tool, three bags full. So everybody knows how to get two dev tools, right? F 12 F 12 As your friend, F 12 is your favorite key on the keyboard as a web developer works in Safari works in Firefox works in Chrome, or right click on something go to inspect it opens it up.

dev tools are there to help you understand what’s going on. It’s it’s like, you know, plugging an OB OBD reader into your car, you know, gives you all this data, all this information as to what’s happening on the page. And so we thought, Well, let’s find some things, you know, that are useful that some of these are things that I’ve done that, you know, I wanted to share some of them or are just things that we went digging and said, Oh, there’s a neat thing that we haven’t done before. The first one is super fun. So when you go into dev tools at you can go into the console. Now console is one of those areas where you’re likely to spend a ton of time as a developer.

It’s all the JavaScript stuff. So it’s all your logging spits out there, you can interact with the page through it. And I think most people know you can actually type JavaScript into the console, just right there. Like you could say, you know, ver X equals document dot query selector nav, or something like that, right? Like, you can go in there and and write that and then it’ll, you can echo that back out. And you can see the object that you queried and stored. And you can manipulate it anything you could do in JavaScript, you could type into that console. There’s a

And this one, this is probably the most weirdly technical ish. at the, at the the prompt in your console, you type in document dot design mode, camel case, so di s, IGN, capital M, OD e

This is something that is like one of those, like, that’s weird. Why would I use that. And then you use it once and you realize, holy crap, this is incredibly useful. Alright, hold on, I try it, you try it, I’ll explain it. So what it does like it, you don’t immediately notice anything. But what you can do after turning it on is if you click on the page, any text areas, the entire page is now editable, just by typing stuff into the page. It’s super cool. It’s really useful for testing things like if you’re building out a page, and you want to make sure your headline will expand properly.

If it’s too long, you can just put your page in design mode, click on your title and add a bunch of words to it. Now yes, you can do this by editing nodes in the element inspector as well.

And it gives you access to all the text nodes in the page all at once.

Yeah, yeah. Like I’m saying the page like it makes

Are you You familiar with the the attribute content editable? Yes. So for anybody else, the there is a property you can apply to any kind of, you know, text based node in HTML. That’s content editable equals true that you can just put on an HTML element. And basically, what design mode does is it applies that to all your text nodes on the page in the background, right? So because it doesn’t do anything by default, like it doesn’t save back anywhere, it’s not tied into anything in your system. It’s purely a client side thing for you to do in browser. Now content editable, you can do stuff with if you tie it into your application, certainly.

But that’s, that’s the equivalent though of what it is doing is sure whether or not you’ve applied content editable to the node. So this just basically says, Yeah, pretend like every element has content editable on it. And now you can just type in the page and make things whatever length you want to be, or take stuff out. Or like I say, it’s, it’s really useful for debugging the length of things.

Cool. It’s really useful for when, like, you have, you know, designer is, is handing something off to you. And so you build it up, like but you know, what about the content editors, they’re going to put a title that’s three lines long here, right? Look at this, and you just share your screen, put the page in design mode, and you can just boom, boom, drop it right in the page. They see it in space. Like I think that’s one thing that really helps when you’re editing it in the console like in in the element editor. I mean, you can still do it, obviously. But like, there’s tedious there.

Yeah. And there’s a disconnect between like the work you’re doing and where it shows up and when it shows up. Whereas this is real time you just click where you want it and just start typing. And obviously you can’t format the text. Yeah, there’s you’re limited on what you can do. Yeah, but you

document dot design mode equals on just type it into the console. And likewise, you can set it to off and that

And the same way like you can check and uncheck properties inside of your classes and your property or your selectors.

the same with the design mode deal a little bit that, you know, some of this stuff is like, yes, you can brute force this through the element inspector. Like you can go into those nodes and click on them and do all that and drill down into stuff. Yes, you can do that. You can edit the classes the same way but this gives you the the thing that makes this really nice is being able to go in on an element and do something like okay, it’s let’s say it’s a hidden element, right?

And you toggle the visibility based on something instead of having to go into the element inspector and physically delete the word you know, hide or hidden or whatever your class name is, and then I click back on the class and type it back in, you can just go into dot CLS and just check in uncheck the hide class and just turn it on, turn it off, turn it on, turn it off. And because it remembers, like, even after you turn it off, just like when you uncheck a style, it’s still there. The inspector remembers it so that you can turn it back on if you want to. So it just it’s yeah, it’s a much more elegant and powerful, I think, approach to that.

Yeah. So similarly, and in fact, yeah, very similarly, is the method of forcing state on elements because we have like a lot of like, you know, these like pseudo classes. On elements, you know, when they are hovered or they are focused, and a lot of folks similar. Next to CLS, I think this is true in both Chrome and Firefox, you may be familiar with the colon H O V, which lets you override a panel to toggle pseudo classes. But that’s not the only way to go about that.

fake it till you make it. This lets you toggle hover, active, focus, focus, visible, focus within, visited and target. So keep that in mind. And in Firefox. It’s called Change pseudo class when you right click on it. Okay, but it’s but it works exactly the same, like Firefox and Chrome are remarkably close to each other in terms of most of all of this stuff. I don’t imagine that I don’t think anything I actually put in here is Chrome specific. But like I say, they may be slightly different. So just labeling Yeah, just do a quick Google search. If you’re you’re not sure where it’s at when we talk about it, but we’ll we’ll try to call it out.

yeah, that’s another nice thing. In the element inspector, right. You’ll it’ll put a little yellow dot kinda like a breakpoint. Yeah, to illustrate, oh, yeah, you have modified this element with something in in the deal, I think. And I’m gonna test this while we’re talking here. If you use the the CLS deal, no, it doesn’t. Okay, nevermind. I wanted to check and see, but I thought if I put like a mark or something, yeah, I was wondering if it was the same, and it doesn’t so but but if you are using a pseudo class, if you’re if you’re toggling the pseudo classes, it will drop a blue yellow dot next to the line just as a reminder that you’ve modified that.

So yes, super, super useful, though, especially in those instances, real good further form fields. Like, you know, some, you know, inner, those interactive kind of things. If you’re trying to do like animations, like hover animations that get triggered. Yeah, that’s a good way to like, you know, fake the mouse over to trigger that animation to see is it what you want? Does it work? Right?

I have definitely never done that to get around a paywall or interstitial ad would be a terrible thing for somebody to do.

your you’re gonna get Missouri called on us.

Do you know how they sold wine during Prohibition? Have you heard this? There’s, there was a company and I’m sorry, this is just one of those like random factoids, but it’s kind of funny, and it’s very onpoint for this. There was a company that sold like dried grape bricks, like, compressed, great bricks for making like grape juice. And the packaging specifically said, Whatever you do, do not mix this in a bucket and cover and put in a dark area for like, a month or what like that. I don’t remember the exact reading of it, but it was it was that kind of thing.

It’s like, Don’t whatever you do, don’t do this, because it’s illegal. But it literally was just like a Yeah, no, if you want to make bathtub wine by our bricks, Oh, you do it. But we’re not breaking the law. We’re just making great bricks. It’s fine. Because that’s what you did during Prohibition. You got great brace. That’s awesome. Anyway, there’s your history lesson for tonight. Oh, okay. Oh,

I’m starting to think you’re maybe a little bit of a troublemaker. He’s getting a little nuts on what to do, man he’s getting, he’s getting antsy in his old age over here making music like the kids harassing survey takers.

network speed throttling. This one is a little more obvious. But it’s also easy to overlook, because of just how dense These panels are under the Network tab. Now, this used to be different. I am pretty sure they are both Firefox and Chrome are the same on this now. By default, you’ll see a little drop down that just says no throttling.

Right. You can go in there and say I but I want to know. So this is so for me incredibly useful. Because I am on a on fiber that can’t talk. So my connections good

on fire, I have plenty of fiber in my diet in all the ways. It makes me go very fast.

the ability to go in and say you know what, I want to see how fast my page loads on 3g. This can be incredibly important, you know, for purposes of UX and accessibility, and making sure your stuff does what you need it to. If you have media pictures video, and you want to see how long does this take for somebody? You know, the thing is, yeah, while it is a 5g world, very little of the country as a whole is actually covered by 5g, you know, set to mention your international audience. international audience is a huge component of that. So

And so this little drop down now on Chrome Chrome’s cool, because you can actually add custom profiles to it. So you can like, say, Okay, I have like, it’ll come it comes with like fast 3g and slow 3g. You could make one for LTE. You could make one for Cox cable. Cool. You know, you already know about here’s a 10 megabit connection. Here’s 100 megabit connection. Firefox just comes with a bunch pre loaded. I don’t think you can add others though.

14 four modem. First mode. Oh, that

That was that was my first. First Love that 14 Four

But yeah, the the ability to throttle your connection in software, though is really impact. Yeah, I just use this. And let me give you an example of where this gets useful. I had some some synchronous JavaScript that was set up to run. And we were looking at like, it wasn’t doing what it was supposed to do. And I was looking at it, and I realized it was there was a race condition going on. And I’m trying to figure out, where is it? You know, where’s the problem at? And by slowing down the page, I was able to demonstrate, yeah, when you don’t want to fast connection, things are loading before that JavaScript is ready.

And so things were loading and then not getting anything bound to them. Or vice versa, I think is I’m sorry, I’m describing it backwards, the JavaScript was loading, stuff wasn’t ready. And so the page loaded, then when you come back on subsequent visits, it’s fine. Because it’s cached. It’s you’re good to go. But I was able to slow down that speed and show Oh, yeah, if it’s slower, everything’s fine. Because it’s not going fast enough. And so that’s just a good way of like, for things like performance, race conditions, stuff like that. Super useful.

And similarly, I just see, yeah, what does my page look like for somebody on a mobile device, you know, load up, we know, I didn’t put this in the show notes. But up in the upper right hand corner, there’s a couple of little nested rectangles that will put your page into responsive design mode. And you can select like, I’m going to, I want to know what this looks like on a Galaxy Note 20. And it’ll set your page up looking Galaxy Note 20. And it’ll set the user agent and all of that. But it’s still using your connection. So set it to them, you know, set it to LTE, and see how it then looks like to somebody on that phone on that network connection.

Yeah, it’s it’s up, top left on Yeah, on Chrome, it’s upper left corner in Firefox in the upper right corner of dev tools. It’s almost the exact same icon though.

Well, since we brought it up, if you go into responsive design mode, you can also set custom profiles there too. Like you want to emulate your phone, then put the pixel six in there, put the the one plus in there, whatever you can set up your own devices to

I will mention though on that feature. It is simulation, it is not emulation. If that makes sense.

Yeah, it’s not running like Android in the browser. So there will be limits to how accurate it is. And this is something again, like having just redesigned a big site for work. We’ve had this problem because we as a distributed team, this is off the rails a little bit but I now we had a device lab at work. And our QA person had a set of Office drawers he could go to and open the file cabinet and a bunch of folders with tons of devices in them so we could grab stuff and test. We are now a full remote company. The device lab is gone.

So it’s like I only have what is in front of me to test and so there’s a we are having to crowdsource who has an iPhone who has an iPhone SE and we’ve been discovering that like the device emulation in browser is absolutely not good enough for some things and so it’s the take it with a grain of salt. It’s not a perfect thing, but it’s a start you know it’s a place to to give it a shot anyway. Set off the rails you’re you’re getting to me early tonight. Alright, look, it’s my turn. Don’t find do it.

This is also a console trick. So you go into your JavaScript console. The way you’ll see this used there is this isn’t just a little sort of Dev Tools hack. Anytime you’ve clicked on an element in the, in the inspector, Chrome automatically saves that to a stored temporary Vale variable. Okay to the most recent one gets stored to dollar sign zero. So if you were in console, and you’re looking at your like, let you’ve clicked a div or whatever, you open your console, you type in just dollar sign zero, it’s going to return to you an HTML node, that is whatever is picked in the deal. For what it is worth, it saves the last five, so zero through four.

And as you click on stuff that just rotates them. So how this gets useful with monitor events, is monitor events is a function that you can type in, just monitor, monitor events, it’ll autocomplete for you. And then parentheses, and you can pass it two things. One is an object and an HTML node. So you could say something like, okay, the thing I just clicked, I want to monitor this. So I would say dollar sign zero. You could do document dot query selector, you know, ID, whatever get element by ID, you know, whatever, anything that returns one element.

And then you can pass it a event or group of events. So in the shownotes, I’ve screenshotted, this table, I’ll have it there. There’ll be some links to some of these things in the show notes. So you’ll, you’ll be

I’m actually I shouldn’t say that. I think you can pass it nothing. And it will just monitor all of them. But it’s a that’s a lot of things for it to monitor. But what are the four groups are mouse key touch and control. And each one of those is a collection of things. And you can drill down into those if you want. But let’s say you want to monitor a text input, you could say, Yeah, click that, click that input, one of the console, say monitor events, dollar sign zero key, and it can take an array as well.

So you can pass in multiple, then anytime it takes a key down a key up a key press or a text input event, it will log that to the console for you. This is fantastic for debugging if you’re trying to do something. So we were designing a feature that needed to turn in turn functionality on and off based on responsive breakpoints. And so we have a event listener for the window size, and then a resize. So what I could do is do like a window, I pick my element, right would be like

window rather sorry. And then monitor control. And I can pick up all the Resize events and see like, is it firing? You know, oh, why is it not turning on or off? Okay, let me see if this element is picking up the resize event correctly or picking up, I’m trying

you can’t do an all it has to be a node otherwise, you would have to do like a for each loop on it. Okay. So, yeah, so that’s important to note, it takes it takes an object as its first argument, not a list of objects, but like, and the easy one is to just be like, just pick, you know, something on the page and h2 div something, monitor it’s dollar sign, and then do something like comma, click, for instance, and then just go click that thing. And see, you know, if it picks up the, the DL and it’ll output and what it does is it logs out V event.

And so then you can see, you know, if you’re doing anything that involves like mouse movement, for instance, and you’re picking up the click event, you’ll get, you know, the X and Y of of the click, you know, what it clicked inside, what the target was, like, all of those things. So you can see, okay, I need to right, you know, you know, that I need to get this property and the reason it’s not working is because I was binding to you know, the wrong thing or something like that. So, monitor events is is really great for you know, debugging and trying to figure out you know, how, how is something responding to the way you’re interacting with it?

From like a raw input standpoint. So it’s a real good way to like, suss out some of that. And really useful because it includes the touch events. So touchstart touchmove, touch in touch cancel. So, you know, if you’re debugging a mobile device for something, you know, maybe you have a horizontal, like a scrolling like a Netflix type category or something, it’s horizontally scrolling, and it’s not scrolling properly, well, okay, monitor events and monitor the touch events and see what it’s reporting and how that compares to the code you wrote.

I mean, Dev Tools is I’m sorry for the backend folks. But I mean, Dev Tools is a very front end focused kind of thing. So

Well, this next one is kind of a little back end. It’s Cody, let’s say,

This one requires you to go into your sources. So there’s a panel called sources.

Okay, yes, it is different from breakpoints, although it is similar in nature. So like when you are looking at if you go to the Sources panel, in Dev Tools, you’ll get this whole list of like all the CSS, all the JavaScript, anything remote that’s loading for the page, and you can click on those, you can click on the JavaScript file, and it opens the JavaScript file. So what you can do is, normally, you would go in there and right click, and you could add a breakpoint or like, click on I think it’s click on the line number, right?

What you can do instead is right click and add a log point. And what this does is similar to a breakpoint, but it won’t stop the code. What is the what this is, is the ever write a bunch of JavaScript and you need to know what it’s doing. And so you write a bunch of console dot logs into that file.

to go through all the trouble to go back through and delete those afterwards. And all of this kind of stuff. This is that except just on your client side. So you can go in there or like, let’s say you’re trying to figure something out on the production, like somebody reported a production bug. And you’re trying to verify that bug. But like, there are build tools, like you can put in console logging and stuff in the code. And there are build tools that can take all that out for you. So that your production code doesn’t have all the debug stuff in it.

But you’re trying to verify it on the production environment. Go in there, do an add log point. And you can add in logging on something and see, okay, well, yeah, this thing isn’t working, right. But is the problem here? Is it somewhere else, I’m going to add log point. And then what it does, it gives you a little text input, and you just type in what you want it to log

And then it will like just like using a breakpoint. When it gets to that chunk of the code, it’ll automatically log out to console, whatever you’ve typed in. Cool, let’s date very, very good way to like, it is really useful, like in that instance, like that production. I need to like debug something, and I don’t, you know, man, I for whatever reason, it’s not working on. You know, or it is working on staging, but it’s not working on prod. So I can’t, you know, I can’t debug it on staging because it’s fine.

So you can go in there on on your production, because what happens, right is your JavaScript is probably minified, right on production. And that the that’ll let me give you another sidebar. If you are looking at a minified file, and it’s ugly, and you can’t tell what’s going on, in the lower left corner of the file view. There’s a pair of curly brackets. And if you click that, it will pretty print that minified file out for you.

that’s that’s another one of those kind of little hidden deals very useful. And I should also be very clear, when I say right click and add LOD point, you right click on the line number specifically to do that, just like you would for adding or editing or removing a breakpoint. Go in there, add log point, type in your log message. And boom, you’re off to the races, Bob’s your uncle and you can log out. It’s it’s so helpful for those moments where it’s like, Man, I just need you to spit information out at me and there’s some other like, I’m not going to get into them.

There’s some other ways of doing things like that where you can like watch things. And anytime they change they’ll spit out in console that’s super useful, but that’ll I’ll save that for part two. That is adding log points, what’s next? helped me out. Oh, oh,

in two different places. So in Chrome, this is when you go to your elements panel. And then you have the insert for like styles computed layout. The last one is accessibility. In Firefox, it’s a first party panel. It is just the accessibility panel. So what it is it’s similar to the DOM, like as JavaScript would view it, you know, the thing about this, like, you know, what is the DOM the DOM is the document object model? It is literally wait, how do you get to it in so in in Chrome, you go to your like your elements, and then your panel opens up with like, the styles.

And the last option there is accessibility. So be like styles computed layout event listeners, Dom breakpoints, properties? Accessibility? Do you want to do that? Let me here. Let me jump to the next one. I’ll help you out real fast. Well, we’ll flip these the command how I think

Okay. CTRL SHIFT P. I do. I do think this is unique to Chrome. Firefox may have it that I don’t know what the keyboard shortcut is because it’s not Ctrl Shift B. That’s private. Oh,

Ctrl Shift P opens up the command palette, which is like if you use VS code, it’s like hitting f1 In VS code, you can start typing in what you want to do. So if you hit Ctrl, Shift P and start typing in accessibility, it will show you Oh, yeah, we have, you know, the accessibility element. And so you just click that, and it will automatically open that panel up for you. command palette very useful for especially because like I say, there’s so much stuff in there. If you’re lost, if you forgot where something is, if you’re like, Man, I want to do the the network speed.

But I don’t remember where it is, well just show network conditions and boom, it’ll jump you right to it. So command palette, super useful. So that gets us to accessibility. Now the accessibility tree. Okay, so we know that we know what the document object model is, right? This is the way the computer sees the page like how how does the computer visualize the page from our HTML? The accessibility tree is an abstraction of the DOM. But with respect to how a screen reader should see the page. So the hierarchy is very similar to the DOM. But it also includes like, does it detect any ARIA labels and label buys?

What is the role for this element? Some people don’t realize elements have intrinsic roles assigned to them. In many cases, you know, when if you are using a button tag, you don’t have to say role equals button. It knows like it semantically knows the buttons role is button, you don’t have to say it on that the rule of thumb is you should only ever use a roll. If you explicitly know you need to set it. Don’t don’t use them. For extra, so to speak, that can actually cause problems. But the accessibility tree though, gives you a way of looking at something. So again, I just we just did this, we were looking at a screen reader problem with a modal pop up.

And the the screen reader was not reading the modal even though it had role equals dialogue on it, everything seemed right. And so we’re able to use the accessibility tree to go in there and say, Okay, how is the accessibility model seeing this element? Is it announcing itself properly? Is it doing what it’s supposed to do? So that Accessibility tab comes in really handy for like making sure it’s, you know, things are behaving the way that they should,

The other neat thing this is there’s a way to do this in Chrome but I think you have to have a plugin. In Firefox. The accessibility plug in also gives you the ability to simulate colorblindness for the page. So you can do proto Novia deuteron Opia Trenton Obeah a chrome a chrome chrome a Chrome app. To post Sia, I still said that wrong, I think it but you can just click there’s a drop down for it, you can click that and put your page into a Colorblind Mode, which is kind of neat. Um, but I, I think you have to have like x or, or wave or one of those in Chrome to do that.

one element. Yeah. Yeah. It’s, like, so hidden in plain sight, right? Yeah.

It’s very much hidden in plain sight. In Firefox, it is a screenshot node, but it works exactly the same. I think both of them they just throw the screenshot in your whatever your default Downloads directory is. That’s where it ends up. You were asking, Can you script it? And I said, I don’t know. Yeah, I’m not sure if you can or not, I’m I do know, you can script screenshots through lighthouse. I know Cypress, the testing suite can do it. I don’t know if they can screenshot individual elements though. Or if it’s a viewport level only.

So that’s research for later, I think. But yeah, this is real nice for like, being able to see something in isolation. You know, like, what does just this thing look like? And which is really important when you’re putting the whole page together. And you’re like, you know, something’s not overlaying, right, or whatever. Let me see what just the menu looks like, in this way. So, or let me let me send something to my QA person, or maybe the QA person needs to send something to me.

Yeah. Oh, yeah. That’s that’s actually a great one.

this has worked Windows has that to my keyboard actually has a screenshot button. Well, I think it’s literally the print screen button, but it’s mapped specifically to the fancy clipper and

because this doesn’t require you to do anything, right. Like, I just need this element, right, click, screenshot it, boom. I haven’t tested it. The one thing I was just thinking about, this is like, what happens? Can you do it like on the body? You know? Like, if I wanted to get like, Oh, yeah. Would it be the hope? Yeah, like it? Will it will it screenshot the entire page. And so literally, as I’m saying this, I’m testing it right now. So I just did it. And it does, in fact, screenshot the whole page, even what is outside the viewport? Cool. So that’s really nice.

That’s because that’s something I used to use a plugin for, like, if you wanted to screenshot a whole page. And I know Firefox also has like a shortcut for that. And I don’t remember what it is off the top of my head. But yeah, just if you right click the body tag and say screen, screenshot node on the body, you get the whole body. So yeah, no, this is real, real handy. Real scope relevant. And I really like your notion of like, oh, yeah, I’m working on this thing. And I want to throw it into GitHub issue or whatever. Hit the the screenshot node, drop it into your GitHub issue. And boom, it’s like, quick and easy, quick and dirty screenshot.

I’m sorry, as a front end developer, front end load screenshots like this, this thing doesn’t look right. Okay. What does that mean?

that’s actually probably one of my more favorite, like, easy to find useful once you know and like if you don’t ever look for it, you glance right over it and never think about it. So and, and also good. Like, just this is just some advice, like right click on stuff in Dev Tools, and just look at the context menus once in a while.

Yeah, this is scratching the surface on like all the stuff. But these are ones like I immediately I’ve got one I’ve actually I thought of one more than I use, I’m going to tack it on at the end here. It’s not in the show notes, but I’m going to save it. So this next one, I’m going to expand this actually, because it’s useful even beyond what I’m about to describe. Okay. At least it is in Firefox on the clarify. So this is the flex Grid View toggle. In and this one’s a little more obvious. But maybe don’t realize it’s it’s clickable toggleable. In your elements panel.

If something is using either Flex Layout or grid layout next to the DOM element, you will, you’ll see like a little pill that says flex a little pill that says grid. And when you hover it you’ll see like it will outline whatever the layout is on the page for that element. Super cool. You can click it, and it will turn it on and leave it on.

Oh, there it is. Okay, and then okay, just click on it. Like if you hover it, it will show it when you hover. But if you click it, it will actually sticky the view and it will number all your columns all your rows. Yeah, the

this is, that’s the ad. This is real handy for like, like, visualizing exactly how stuff is working inside a grid. I use this real heavily developing the new header for the drunken UX site. Because the way I made that header responsive, it’s entirely relying on a grid layout to move things around. So that the presentation changes as appropriate for a desktop, a phone, whatever. So I need, I both needed stuff to move around. And I needed the number of rows and columns to change. And so I can turn on my grid view, put myself in responsive mode and slide this thing back and forth and see exactly how stuff moves around.

So here’s the and I said like this is also more useful than flexing grid. This isn’t true. In

is in Firefox, there’s a different way of doing it in Chrome just using the console. But in Firefox, you’ll also see elements that have the word event next to them. And you can click that, and it will show you all of the event listeners that are bound to that element. So for instance, on the menu button for the new drunk in UX site, I have attached a click listener to that to open and close the menu. And so if I hit that button, and I hit the event pill next to it, I can, it opens up for me my toggle menu function.

And I can see exactly what it will do when you click that button and what code it’s doing. And it gives me a link to it. So I can click inside the little tool tip. And I’ll take me to my JavaScript and show me that function. Where are you seeing in Firefox?

this is specific to Firefox.

this but it’s the it uses the same sort of, you know, visual cue to let you know there’s a thing there. So and like Chrome, it works, you can still do it. But the way it works is like when you select an element, you have to go into the event listeners panel. And what it does is it gives you like a breakdown of like all the possible events, DOM content loaded, you know, blur all of these things. And they’re just like in a big list there. But you can still you can find the event listeners, you can remove them, add them whatever and interact with them. They’re so a little different. Still there.

Also, I just as I’m looking at this, if you ever click an element in the element inspector, you’ll notice kind of grayed out and to the right of it. It’ll say equals equals dollar sign $0 sign zero colon and and that was what I that’s a hint to you that it is storing that element as dollar sign zero right now. So I said earlier with the monitor events, elements get stored in dollar sign zero through dollar sign for if you’ve ever wondered what that means. Why it says equals equals dollar sign zero. That’s why it’s just telling you it’s stored that there So there’s a nice, quick, quick little call back to what’s going on there.

One more can I throw one more in? Do I have time? I think I have time for this,

this was one I didn’t think about until now. And then as we were clicking around and doing stuff, I realized, oh, yeah, that’s really useful. Little different in Firefox and Chrome, but still there, it’s a drop down in Chrome, they are little pill button, the things in Firefox, if you’re in console, whether it’s like the little sub console or the full big console. In Chrome, you can, there’s a filter bar, which lets you search through your console logging in to the right of it is something says default levels.

Java is verbose info, warnings, errors. So if your console is too noisy, especially if you’ve got like a lot of third party stuff that’s getting blocked by you know, cores and things like that, which are, you can also disable, but you can define what levels of console logging, you want to have shown.

yeah, this is just another one of those little things that it’s like, when you’re debugging stuff, there can be so much noise in that console, that between being able to filter like I don’t want the infos, I only want the errors or something. And then using the filter, you know, being able to filter your output on top of it is is super useful. It’s just a fuzzy match. Like, if you’re getting a lot of cookie warnings, and you want to know what those are all about. Just type in the word cookie, it’s alive. Let’s just a Live Filter, basically. But filtering that console, and using the ability to turn on and off different levels of logging.

Super, super helpful. Bonus, I think we covered all the important ones were like coming up right on the hour. Give anything else Aaron that I didn’t think of anything that came up while you’re clicking through stuff.

Yes, you did, in fact, mention that. So I guess we must go faster. So give us one second, we’ll be right back. So that is a bunch of random like 1011 different tips for using Dev Tools little better, a little more helpful. You may have known some of them. I’ll bet your money. I told you something you didn’t know about though. And I learned at least two. And I hope that you will take the time to drop by Share with us your favorite dev tool hacks, your favorite shortcuts, that your whatever tools you come back to or things that you find that you share with people a lot. We would love to hear how you use that.

Nope. No way wrong this

I only gave you one job. And you you know what you excelled at it because this is the drunken UX podcast and we are glad you come back every other week to listen to us. We got a lot more lined up for this season. We hope you enjoyed this episode. Share with us whatever it is you’re using dev tools for any tips, tricks, high jinks, or shenanigans that you enjoy sharing with other people because we would love to hear about those things. And just remember that at the end of the day, the most important thing you can do is use dev tools to figure out creative and new ways to keep your personas close but your users closer. Happy February. Go Team USA right we’ll see you next time.