Chrome DevTools Elements Panel Tips & Tricks

Here are three amazing tips that will make you more effective when working with the elements panel in Chrome Developer Tools. When working in the elements panel, as you're hovering around, the popup appears on the page, and it shows you the measures of the element and classes associated with the tag of that particular element. I'm sure you noticed it, but sometimes, as you're hovering, this popup gets in the way, and you don't actually see what you want to see. For example, in this case, the popup is obscuring my logo, and I can't really see if the spacing is good enough. I can easily remove the popup if I'm holding down the Command key as I'm hovering. So, I'll hold down the Command key, and you see that the pop-up disappears. So, whenever this info popup in the elements panel gets in your way, just hold down the Command key or Control key, and it will disappear. This is even more prominent if you're working with this feature, where you're selecting elements directly on the page, and the pop-up is even bigger with much more info. Again, you can hide it if you're holding down the Command key. That way, you'll be able to very easily see exactly what you need to see without this useful popup getting in the way. You can also use the Shift key while you're hovering, and this will enable you to pinpoint elements that have “pointer-events” set to “none”. Let's set “pointer-events” on my headline to “none”. So, if I try to hover and pinpoint this element, I can't because it doesn't have pointer events; there's nothing to target. But if I'm holding down the Shift key and hover over it, I will be able to select it without any problems. And this red background that you see underneath it is actually the element that would be selected if we wouldn't be holding down the shift key. Another thing that you might not be aware of is that you can actually hover elements right here in the Styles Pane. So if you hover over the class for a certain amount of time, you're going to see the specificity of that selector, and the elements will be highlighted on the page exactly as you see here. So you can see immediately, at a glance, which elements a certain selector is actually matching on the page. Not a lot of people notice, but it can be really handy. When you're working in the elements panel, and you want to try different things on the page live, for example, if you're dealing with Tailwind, then you often do something like this: double-click the class string of the element and then add another class. Let's say “font-bold”. But then you realize that this is not really working because we have “font-semibold,” so you'll want to remove that class. And this is not really a practical way to handle all of this, especially if you're dealing with multiple classes. The better way is to use the Element Classes functionality in the Styles Pane. This icon right here. I'm going to click it. And here I can see all classes that are associated with this particular element that is selected in my Elements panel. If I want to add a new class, I just type it in here. Bam, it's already on the element. Or if I want to, on the fly, disable certain classes, I can easily do that by clicking. And the best thing about this is if you decide that you want to re-add the class that you just disabled, well, we can just click on it, and it will appear back on. But in the other case, if you're working directly in the elements panel in the class attribute, then you're going to have to type this, or copy-paste this, and it's really not that practical. So use the Classes Panel, and your workflow is going to be much smoother and much nicer. By the way, this tip is also a good reminder for me because I often do exactly what I've shown you. Even though I'm aware of the classes panel, I’ll just go right here, double-click, and then type in the classes, but it's not effective, so I should be using the Classes Panel. Let's say you're working with the drop-down menus or with a search auto-suggestions field. You’ve probably seen this situation a number of times: the auto-suggestions box appears, then you go to the elements panel to tweak CSS, and as soon as you click in the elements panel, the auto-suggestions disappear and you're back to square one. I will open YouTube so I can show you exactly what this looks like. I will search for CSS so my auto-suggestions drop-down appears. Now let's say I want to inspect one of those items. And as soon as the focus jumps to Developer Tools, to the Elements Panel, my auto-suggestions popup disappears. What happens? The bottom line is, the page lost focus, the blur event was triggered, and the drop-down disappeared. To work around this, I will open this hover icon, or essentially the Toggle Element State panel, and there is “Emulate a Focused Page” right here. As soon as I enable it, the page will jump back into focus, and my dropdown will reappear. So now I can play around with this, tweak it, style it, whatever I want in the Elements Panel in the Styles Pane, and it won't just disappear because the focus is still on the page, even though, technically, I am focused on the Developer Tools right here. Keep in mind that once you enable this feature, “Emulate a focused page,” the visibility state of the page will be set to visible, and the visibilityChange event will not be triggered. This means that even if you minimize the browser or open a different tab entirely, this page will still be essentially visible, its visibility state will be set to visible

and, of course, as I mentioned, visibilityChange events will not be triggered. So, whenever you're working with elements that are utilizing the visibility state of the window, of the document, or if you're using focus and blur events, you might stumble upon problems when you focus on the elements panel, that particular interactive element will disappear. Well, now you know that you can utilize the “Emulate a focused page” function to avoid that issue entirely. By the way, all or at least almost all features in Chrome Developer Tools are available in the Command Palette as well. You can easily access it if you hit the keyboard shortcut, ”Command + Shift + P,” and then just search for the command that you're looking for. In our example, we can search for “focused page”. And here you will see the option “Do not emulate a focused page. ” If I hit Enter here, I will disable “Emulate a focused page” and, of course, my auto suggestions feature will jump out of focus and disappear. If you're still not subscribed to CSS Weekly YouTube channel or newsletter for that matter, now is your chance to subscribe. Smash that button right now and get more of the amazing tips like these ones that I've shared right here. So, these are the three underused features in Chrome Developer Tools Elements Panel, and now you know how to use them, work with the Elements Panel more effectively. Thank you so much for your attention. My name is Zoran Jambor. I will see and hear you in a different Chrome Developer Tools feature, or rather, in the next video.