Mastering Chrome Developer tools

Paul Ccari

Sep 5st ・ 8 min

Let's deep into some super useful tips on Chrome Dev Tools, that you haven't realized that you could do and can save a lot of time up.

Color Palette

Without further ado, let's hop to the color picker palette, as you might know, you can change the color in the Elements panel - styles, so you can either click on the little box to interact with the color panel or you can paste your custom color which could be in HEX, HSL, RGBA or custom naming colors. You can change color format immediately by holding the Shift key and you can click on the color box and it will cycle through all different color options

However, there's a hidden trick when you click on the little box and you open the panel, there a set of the arrow down which you want to click on the second one, and it pops up this screen.

So what is really cool here, is that you have the Google's Material Design color palette as a first option, and if you set it to it, you would see all the color palette as it shows here with alternative shades to design or try designing 🥇

Another option would be to set your custom colors, but here's the last but not least option that is named as Page Colors. This is actually smart enough to go through your website that you are currently on and pull out all of the shared colors and make a custom color palette just for you. So you won't have to look at HEX code and change it every time you need it.

Scroll Items Into View

You probably already know that we can right-click to inspect elements and show into the panel the respective node of HTML but sometimes it gets really difficult to debug because you might do something in the console, and you'll grab the element, so you have to edit HTML or CSS and you want to see it where it is on the page. And it just usually shows you a tooltip with an arrow up or down to point you were more or less its located that element. So one thing you can do is to right-click on the element and select Scroll into View and that will move your browser's focus to be focused on the element you're looking for.

Hide/Show Elements

We can use it to hide and show elements, so you've got kinda two different options here. You can use the H key inside of the devtools and that will make the element go away, and reappear with H. But you'll notice that the rest of the site doesn't collapse here so this is the equivalent to doing a visibility hidden so that it still carves out its space in the DOM, you're just now seeing the elements. You can use it when you're designing a lot to kind of try to hide something. So how the devtools hide our elements? It adds a class to the element and then added rule to that class which is visibility hidden.

.__web-inspector-hide-shortcut__,
.__web-inspector-hide-shortcut__ *,
.__web-inspector-hidebefore-shortcut__::before,
.__web-inspector-hideafter-shortcut__::after {
    visibility: hidden !important;
}

If you want to actually see what the website would look like without the node, you can click on that element and just hit the Delete key so that will make the site recollpase on top of that. If you wan to undo a Delete, you can do it with Ctrl + Z or Cmd + Z

Computed Styles

When the browser has run all of its what should trump what and what should be officially in there in the information, this is what you're left with.

So you get this really concise list of what margin is there, what display is there, etc. So you won't have to look through all the styles to get that information. And if you're wondering where something comes from you can just go ahead and click on the circled arrow and it will take you back into the styles tab and it will highlight the thing that's winning right then. This is a lot more helpful on big apps where you'll have like potentially hundreds of specificity clashes that the browser has to resolve. Another this is that you can find event listeners, this is really handy. So you can click on the Event Listeners tab and it will show you all of the event listeners on that document and you can go right to the code that's triggering them.

Break on

You can right-click on the element and you can do Break On, which is literally saying show the javascript that does this thing. So you get 3 choices.

Node Removal: Whats deleting this thing, why is this getting removed
Attribute modification: Some data, attribute, class, Id, some property of this element is changing and I want to know why.
Subtree modification: This means that something inside of this tree is changing in some way and will show you why.

Saving Workspace

You might know that in Source Tab, we have a section called Page where we can see all files from the server, and right next to it we have Filesystem. What does FileSystem do? Chrome is getting all these files from your localhost and then you can give Chrome your actual directory codebase here and chrome will start intelligently syncing or mapping between the files. So what does it mean? This means that you can change any CSS style on dev tools and it will automatically

Steps

Go to Source and then to Filesystem tab and click on ADD FOLDER TO WORKSPACE
Select the directory of your project and you'll see your folders inside this tab
Then you'll start noticing the green dots right on name files when you open in dev tools which mean it's syncing and mapping the files
So now anything you change in the source tab (filesystem section) will persist and be changed on the origin files as well. Another cool thing is that you change styles in the element sections and that will persist but anything you change on the left side which is DOM section, won't persist. However if you are using some complex tools like Create-react-app, Webpack, or other tools that are not really supported by Chrome Dev Tools and it usually rebuilt all these system files, you'll find some issues by not working all these features but you can give a shoot to see what files are syncing by the green dot. Btw SCSS is supported!

Selecting element from console

There's always a situation where you want to play around like adding classes, styles, events, etc in a particular element, so what you can do is select the HTML element in then open the console tab, either by going manually to console tab or pressing ESC and then hit $0. And guess what? It will bring you the current element you selected and it can go a few numbers back according to what you've selected. $0 will show the currently selected element and $1 will show you the previous one and so on. This reminds me that chrome can let you select element by Jquery-like selector even if you don't have jquery.

$('.nav')

That’s it!

Now it’s your turn to say hi.

Do you want to work together or talk about an idea? Lets get in touch then. Just drop me a line!