 Hello everybody. Welcome to this month's episode of Ask Chrome. I'm Kase. I'm the technical writer for DevTools and I'm here with... Adam Margo, CSS DevRel on Google Chrome. And creator of Vizbug. Thank you. Yes, yes. Vizplug. So, leading off this, what's Ask Chrome all about? We take questions earlier in the month about anything related to DevTools and then we answer your questions here in this video and then we're going to do a YouTube premiere and I'll be there in the live chat to answer any more questions you have about what we talk about. And if you're watching this later, like a regular YouTube video, you can leave questions in the comments and I'll get back to you there. So, let's start off with... Anthony Cook asked, what's the best way to troubleshoot janky animations? I guess first we'll jump into DevTools and show off the paint flashing tool. Perfect. And we have a little pre-made demo just to show how it all works. So, first you go command shift P to open the command menu and then type something like paint and run the show paint flashing rectangles command. And now when we do an animation... Or even just hover over nodes. Yeah, so that one's fine. Honestly, it looks a little janky. But the green around that DevTools logo, we'll do it again. So the chrome one, theoretically fine. And then the green box around the DevTools logo means that the browser has to repaint in order to do that animation. Yeah, since it's staying green, it means it's sort of being continuously punched. Right. Because it would otherwise flash green and go away. Right, exactly. Yeah, and it's just a cue that you're doing an inefficient technique in order to animate your node. Next thing related to animations, we want to show off the animations tab. And maybe for that one, Adam, you can take over. Oh, yes. The keyframers have made a very phenomenal animation. It's a gooey effect, which is always great for showing off animation tools. So I'll pop open here. I'll do command shift P to bring up my command palette again. I'll type in animations and say show animations. So let's pop it open the drawer just so you know, you can also invoke it from here. And once it's on, it's waiting for interactions. And so I'll create an interaction that does the animation. Fancy. And I'll close it. And then the best part is here. I can slow it down to 25% and hover again and see the animation little preview or go to 10 and invoke it again and see it in super slow mo. Oh, I like to the wobble at the bottom. Nice, nice. That was interesting. Let's go back to the handy, close it up. And then the last little thing is you can scrub this timeline as well and just really lean into that spot right there. The sweet spot. That's the sweet spot. That really just break down what's going on with the animation and all that. And then I guess come back to the specifically janky animations debugging thing. We'll go back to the demo animation that I created. The frames per second meter could be nicer too. Yeah, that's a good one. Let's pull that open. Yeah, so you get this little layover on top of your viewport. And it gives you an idea. Yeah, that one looks like it's staying at 60. Yeah, the spikes are good to look at too. The spikes often show like a start and a stop. Right, right. Or extra work. Yeah. So I don't know, maybe not that helpful in this case. But it's just another layer of information. If there was a heavy jump, you would have seen it. Right, so going back to the animations tab. When we do that, a way to debug the janky ones is you can click here and it'll open the element in the viewport. And one thing that I do is I go to the event listeners tab and it shows me like the event that's related to the animation. In this case, transition end. And we can jump to the source. And I get a better idea about what classes they're getting added to the element and so on and so forth. I saw something while you were doing that that I've never seen before. What's that? Go back to the elements panel. And in this event listeners, when you hovered over that event, you can remove it. Yeah, I think you can remove, yeah, the event. Yeah, there you go. So it should not work now. Something, I guess, because we're removing the... The animation is still completed, but we're not removing a class at the end of it, I guess. So it's probably just stuck in its final position. Yeah, watch, we'll just do it with this. We'll remove the click event list in there for this. And then now the animation... I know you can remove events. The only way I've ever removed an event in my entire career is through node.remove. Yeah, it's just the old school, like vanilla. The more you know. Wow, cool. All right, let's move on to the next one. Stuart asked, it would be wonderful if layout showed why an element is the size it is somehow. At the moment, it's really hard to work that out and requires a bunch of CSS knowledge and guesswork. The browser must know, though, maybe there's some way of exposing that to us. What are your thoughts on this? Okay, I'm immediately empathizing because there are borders and margins and padding and more that all go into the calculated width and height of something. You also have properties that want to be sort of dynamically content-based, and then you have other sizes that you want to be very explicit, like this is height 200 pixels. All that coming together into the reason why a final height and width were determined, and that's something I would rather have the computer do than my brain. It's complicated, for sure. Yeah. It's a tall order, but I think there's a lot that we can do and improve around this. The way that I think about it is we have Lighthouse for load performance and SEO and accessibility and stuff, and this is pretty much Lighthouse for CSS. Why is it behaving this way? I think it's a very ripe area of innovation for tooling. I agree. I think the guidance right in, like we have in other places, but put it there in CSS. Shout out to Firefox. They have, I think, shipped the first features around this idea. And accessibility, not just, like, why a CSS prop is being applied or not. Yeah. Yeah, super cool. Our next question is about JavaScript, and Louie or Lewis? Louie, thanks for the blue lens. Oh, okay. Louie, thank you for the question. Is there a way to go to the definition of a JS function without using mouse clicks? I typed a function name, evaluate, and then some tab action, perhaps a keyboard shortcut? That does sound nice. Yeah, exactly. So I think we get the job done most of the way here. What you can do is we'll open up DevTools, and then let's close the console. And if you know the name of the file, you press Command P, and this opens the, it's kind of the command menu. But what this lets you immediately do is open files, and the name I'm looking for here is main.min.js. And then we've got a minified file, and what you can do here is click Pretty Print. Pretty Print. It's fun to say. And it works really great. Yeah. And then you open that backup, and press you enter a at symbol. That's sick. Yeah, and it's auto-completing all the function definitions that it's finding on the page. In this case, for example, let's say I want to debug this start function. I execute it, and there we go. We see the definition. And if you don't know what file it's in, what you can do, which is close these, you can open the global search, and we'll search for the start function. And it gives you a few results, and it's maybe not the best that it's trying to search through a minified file, but it gives you a general idea of where it's coming up. You can search there, and we'll Pretty Print minify again. And another handy thing is if you press command F or control F, you get the search UI within the sources panel, and we can search there, and it will jump us to each instance of the name that we're looking for. Okay, moving on, we had a few questions about the network panel, and Bernard Hoffman asked, is there a way to clear only the completed network requests? And yes, I think there is. So let's show it off. Let's go to Google Maps, and we'll go to the network panel, and close the search. So DevTools has a bunch of keyword special properties that you can use in the filter box. One of them is status code. Just let it auto-complete, and if we do 200, we see the requests that have that HTTP response code status. And what Bernard wants here is to essentially filter out these requests. This is even a good example. Look, there's like a long polling happening. Yeah, exactly. Okay. So what we can do there is put a minus sign in front of it, and that turns it into a negative filter. So in other words, any request that matches this will be filtered out. And if we reload, we can kind of just keep track of all the stuff that's happening. You can reload with the filter, and the filter persists. Yeah, it's pretty cool. That is super cool. Yeah. So Maps seems to be doing well. It's mostly 204s. And you can do multiple of these. You could do another one for 204, and I think we'll see nothing pretty much hides them all. Wait, in this same syntax, so with the minus, I'm curious what other characters there are. And I know that you can do it in the styles panel. Can you demo that real quick? Because it's super cool in there. It's like the same syntax. You'll learn it once, so you can use it in network and in styles. Well, I think larger than is a good one. You can do like, what is it? 100, yeah. We'll do 10k, and that'll show you things that are bigger than 10 kilobytes. Oh snap. So if you've got a performance budget, you can sort of pop that right in and see who's busting it. Yeah, yeah. Sick. We'll link to the documentation that lists out all these properties. And then going back to your other question, yeah, the filter bar in the text spot, or in the CSS styles pane is very underrated. You can do things like margin, it'll only show you margin properties or whatever matches that. And what's one that you use a lot? Color. Yeah, where's it getting the color from? Or font size. Yeah. So this one just has, yeah, we're inspecting the body, so. Yeah, not too exciting over there. Not too exciting. Yeah, that one's so weird because I feel like every time you hit the styles panel, you have intent. It's usually not just a stroll in the park. Let me casually walk through the styles and just see what's going on in here. You're like, no, I have a goal and I need to, this is a way to go straight towards it. Yeah, I'm big on the computed pane for that same reason where it just tells you the final. Oh, look, a filter in the computed pane. Yeah, yeah, there's one there too. Nice. What's an interesting one? Just height, yeah. And you can still expand it and see the cascade if you need it. Apparently there's not much of a cascade here. Oh, cool. Yeah. Very cool. We had a question about general productivity. Are there any lesser known configurations that a newcomer might not notice originally but will definitely increase productivity? Adam, do you have any? All right, newcomer. Pop and open dev tools. Need to make some customizations. All right, things that I tend to do whenever I launch is I go set my spaces to two. You can change that from four to two. We can show these off too. Oh, yeah. We'll go into settings and where's that one? Sources. And a drop down right here. Yeah. Default indentation. Eight. Yeah, eight tabs. Tab. She ruined everything. Okay, cool. All right, that's fun. The other one, I'm a dark mode connoisseur, so I always dark theme. Someone would argue that's productivity, but it's preference. Well, I mean, everyone loves dark theme. We'll show that one off. So you can do command menu, command shift P or control shift P and just switch to dark theme and then you get the dark theme. Okay, I'm going to make a CL that adds an Easter egg so that you can say join the dark side. Yeah, exactly. And then it'll do this one. We need it. High priority. I'm sure that'll skate right through. Wait, I had another customization, which is I like dragging my tabs around. Yeah, that's a good one. So like I'll bring performance over. First. First. Performance first. Let's see what else we do. Oh, this reminds me like, look, I see layers there. All right. And I like pulling open layers and rendering and performance monitor and animations. Right, so you have to go more tools and then enable layers and you get the layers tab and this lets you like investigate. You can rotate the layers. Looks like it's just one layer here. Well done. Whoever made this single layer for the GPU. Although, I bet if you press, maybe it'll do something. Press what? Here, you take it. It's an airport. It's an airport. So that's what I mean by that. I'm happy with that so far. All right, yeah. And then you said there is also, yeah, if you go down to you press escape to open the drawer. So yeah, we have like changes. Oh, changes, which no one knows changes exists. And it's totally here. Let's change the page and show. Oh, I don't know how now we're just we're getting into crazy stuff now. Color. Black, white. Yeah. Oh, no. Oh, we have to change one. Oh, maybe I have to go. Display grid. Instead of flex. Display grid. Yeah, there you go. There you go. There's your diff. Yeah, but then you can see this long. Oh, because it's a minified file. Yeah. So that's not too nice. Anyway, changes, it's there. It's a good one. Sometimes. What's another good one? Performance monitor. Performance monitor is a good one. That would have been good for the jank hunt. Yeah. So, well, hopefully that person is still watching. Performance monitor is a good one. It is. All right. One more rendering. I like rendering too. Sorry. Rendering. Oh, yeah. We could do just go back there and rendering and could do. Oh, okay. Here's some of the things we were talking about from the Grand Pallet, but you can do them here. Right. Paint flashing. Highlight. Layout shift regions is a good one. You're talking about print. Yeah. Really print. I really like the good one. We could do it on Wikipedia page. Totally. Yeah. Just check out the print style sheet. There it is. Yeah. So, you can see Wikipedia. Hey, this is like a reader mode. Exactly. You could just browse. Talk about productivity roosters. Okay. Different type of productivity roosters. I just want to mention one more thing too, with why I pop open all those tabs is because they're not there to begin with. And so, you're talking about first time spinning it up or you haven't spun it up in a long time. You can go add all these different tabs, rearrange the tabs, find yourself in a happy place, and set it and forget it. Anyway. All right. We'll end it there. Thank you very much, Adam, for joining me on this DevTools journey. It was fun. Yeah. Cool. Well, thanks a lot, everybody, for watching Ask Chrome. Hopefully this was helpful and we'll see you next time.