So the other day I was going through my comment section and I saw a great suggestion from Klaus Beckman who was like "Hey bro ! why dont you do a video on chrome inspector" And I was like (brain explodes) thats a great idea because its a tool that I use all the time in my own workflow and I sort of take it for granted so I just want to give you a brief overview of how this tool works, where all the most important features are located, and how to start using it in your own website development.
All right, lets get started.
Once youre in Chrome and you have a page youd like to inspect theres a couple ways to open the inspector.
One is to right-click on an element that youd like to inspect and then just choose inspect from the context menu.
You can also use a keyboard shortcut and some pages actually disable right-click by using JavaScript so you can just hit F12 on windows to open the inspector...
you can also use the shortcut ctrl + shift + I on Windows or I believe it would be Command + Option + I on Mac.
So this is the basic inspector or dev tools window and you can actually reposition this to better fit your workflow.
For example, a lot of people like to anchor it to the side of the screen so they have more vertical space.
To reposition your dev tools you right-click these three dots here and you can choose a dock location. So you could do left, right for example right here.
Or you could even pop it out as a separate box and then you have the entire screen to work with.
Im just going to pop it into the right side and you can probably see that the text is quite small and if youre on a mobile screen youre gonna have trouble reading this.
But if you select inside this box here you can use keyboard shortcuts like control + or control - to change the text size.
So just to start let me dock this to the bottom so I can better show you all the panels that we have to work with here.
Now when youre doing CSS youre mostly going to be in the elements panel here and this gives you a full view of the html document and you can also see the styles that apply to any element on the other side.
So if I just inspect here we can see all the styles over here that apply to this paragraph element.
And theres other tabs here: theres the console for JavaScript, theres Sources that show all the files that are being loaded by the page Theres the Network tab for speed testing that also goes hand in hand with the Performance tab.
The Memory, Application, and Security tabs are pretty much only going to be used by professional developers and then theres a dedicated Lighthouse testing tool if you really want to dive deep into speed testing your site and making sure its optimized for Googles new page experience algorithm.
But for this tutorial were gonna be sticking exclusively in the elements panel here.
And theres two views that you can use most: Theres the STYLES tab where we can see the actual rules that have been written and then theres the COMPUTED tab which shows you all the rules that are actually being applied to any element.
So this is a really short and quick way to find for example what font-family or what color an element is.
And then to see the rule thats actually creating this property we can just click the tab here and then you can click this arrow and it will take you to the exact rule in the STYLE tab that is setting this style.
Now you can do more than just look at the styles are being applied to an element, you can actually write styles directly in the browser.
So you can use this element.style which well have for any element and these rules will be applied to only that exact element.
So for example I can make the background color hot pink for this one paragraph.
Ill just turn that rule off for now.
You can also create new rules.
So you could target an element, click the plus icon here, and it will create a new rule for any paragraph element.
So we can make them all background color pink and you can add your own custom selectors here.
So for example if you want it only to be the First paragraph in the document.
Okay and you can add any number of classes or IDs playing around the browser.
Now theres one thing to note and that is if you refresh the page youre going to lose any customizations that youve made here.
So what you want to do is you can make your customizations and play around and its kind of nice to do some tweaks in devtools because it actually helps you autocomplete your code and its always going to help you get the syntax right.
So for example sometimes I forget how to properly do gradients but if I just start typing linear-gradient Its going to show me the basic format here and I can just hit TAB to complete that.
and then I can tweak these styles so I can adjust the angle I can change the color, okay? So that makes it a lot easier. Youre almost designing visually And then once youve got all your styles saved youve made your page look how you want it to look you can click to go to the inspector style sheet and you can just copy all these styles and either put them in a notepad or put them directly in your website to save them for later.
Just know that if we do refresh the page all your changes are going to be lost.
Now as you saw, you can toggle styles on and off.
So if i inspect this element here and say I want to disable one of the rules like the background color, I can just toggle this off by unchecking it.
And now it goes back to the default background color, which is here.
And I can disable that one as well and now it has a transparent background.
And that can be useful for troubleshooting problems.
Of youre not sure which rules sometimes there will be multiple rules that are applying to an element and if youre troubleshooting to find out which rule is actually causing the style thats one way to do it.
And again the other way to do is go to the COMPUTED tab and then click through to see which rule is actually setting the property.
Now lets go back to the COMPUTED tab for a second and Im going to show you some handy features that are in here.
And one is this box model sort of view at the top.
And what this does is for any element, if you select it by clicking on the source code here it shows you the width and the height of that exact element...
it shows you all the padding and if you hover over the element the padding is always green so you can see the padding there and then it shows you the border as orange and it shows you the margin as a different color orange.
but it shows you the values for all these spacing properties for your element and you can adjust them in real-time.
So you can double-click and we can just get rid of the left margin for example and it would move over or we could get rid of the padding at the top or make it really big like 150 pixels of padding at the top.
You can play around with these values so it makes it really easy to see whats affecting the spacing on your element but also to find the right element to target.
So sometimes there will be like an inner box and maybe you thought that it was this that had the spacing on it but you can see that theres actually no spacing being applied to this element, its all on the outer one.
And well just refresh the page again.
Entering targeting mode Now if you want to switch between elements you want to target a different element, you can of course scroll through the source code.
But if you have something thats like multiple layers deep its gonna be hard to find the exact element especially if its off the page.
So you can scroll to it in the document and just right-click again and go inspect and itll take you to the element.
But theres also a handy trick where you can enter whats basically a targeting mode And this is a really nifty feature.
You just click this icon here and now when you scroll over any element it goes right to it.
You can see its moving in the inspector to highlight the exact element and then if we click the element it moves to it in blue.
And also Ill go back in targeting mode again we can see some really useful information without having to click through the panels.
If you hover over an element in targeting mode we can see that this is an h3 element we can see the color the font size and font families being rendered, we can also see the spacing properties and the margins being applied to this element.
So if youre just trying to find something simple like the font size or the color or font family of an element you dont have to go clicking through this COMPUTED tab over here.
So that will save you a bit of time when youre just maybe looking at another website and youre trying to see what styles theyre using.
Now were not limited to the existing HTML of the document, we can actually edit it in real-time.
So you can right click on this element and you can choose to edit as html.
You can also hide an element but itll stay in the html document.
Or you can delete it all together and that will remove it entirely.
You can also just double click on any element.
You could change the tag so we can make that an h2 and we could even add a class or id so we could say class="my-heading" or something.
You hit ENTER to save and now we could target our selector by that rule.
So for example, I can just hit the Ill go to the style tab hit the plus icon here and it automatically inserted the selector h2 that is class my-heading.
You can hit tab to go to between the brackets where you can start writing your rules.
And I could just say font-size 66px.
And well just refresh to clear that.
Next up, we can actually toggle the state of an element.
And this is useful when youre doing anything that has a hover effect for example.
So if we were just to inspect this link over here, you wouldnt actually see the color thats applied when you hover it which is this light blue color.
And you can keep scrolling and its not at the top.
But what you actually want to do is you want to click this toggle element state button .
And then now we can select the :hover state and we can see the hover effect thats being applied to this element.
So well put into the hover state you can see that its now changed to that lighter blue and its underlined and the hover rules all the rules that are targeting the hover state have now been moved to the top of the STYLE tab, so it makes it really easy to tweak this.
We could just change this to a make it RED, we can make a solid border... whatever.
Now one thing to note is that if you change the existing styles for existing selectors that are already in the style tab these changes wont appear in your inspector style sheet.
So if we were to create a new rule, well just say font-weight: bold the rule that we created thats new goes into the inspector style sheet but you can see that the other modifications we made do not.
So if you do know that you want to be copying these styles to reuse elsewhere or to save them for later use you want to make sure you create a new rule instead of modifying existing rules.
Another really handy feature that is under-used in my opinion is this responsive view.
And you can put it in responsive mode.
And let me dock the toolbar to the side so you can see it a bit better, but you can actually choose from predefined devices that will show their exact screen size.
You can preview your layout on smaller screens or you can use responsive mode that lets you drag the width of the browser window so you can see how your layout shifts as the screen size changes.
And this is really good for handling issues that might pop up on smaller screens to make sure your layout looks good across the full range of screen sizes.
And to get out of responsive mode you can just click right here to exit again.
Now so far weve just scratched the surface of what you can do with Chrome dev tools.
And if youd like to dig deeper into some of the more advanced features like speed profiling, or learn how to reverse-engineer components from other websites and recreate them for your own designs, let me know in the comments below and maybe Ill do a video on it.
And if you have any other video suggestions please let me know because Im always looking for good ideas for future tutorials.
Now if youre ready to keep building, check out this video right over here.
And I will see you in the next one
