Change language

Chrome DevTools Crash Course – using Chrome Inspector for CSS Development

Chrome DevTools Crash Course - using Chrome Inspector for CSS Development

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  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