Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Chrome DevTools is a set debugging tools built into the Google Chrome browser. They make debugging CSS easier by letting you quickly inspect and understand how every line of CSS is being applied to a web page.
-
0:00
[MUSIC]
-
0:04
Problems pop-on on every web project, HTML validation errors,
-
0:08
strange CSS display issues, mistyped JavaScript code and
-
0:12
other bugs are routine parts of being a developer.
-
0:15
CSS bugs can be particularly tricky, time consuming, and frustrating
-
0:20
because CSS doesn't provide error messages to let you know if you've made a mistake.
-
0:24
For example, if a CSS declaration is invalid the browser just ignores it.
-
0:28
Your only clue is when a page doesn't look the way you expect it to,
-
0:32
like the fonts are too big, or the layout and colors are off.
-
0:35
However with the proper tools, you can build and
-
0:38
debug your CSS much more quickly and accurately.
-
0:41
I'm Guil a front end web developer and teacher here at Treehouse.
-
0:44
In this workshop we'll explore the most useful and efficient tool for
-
0:48
debugging CSS, the Chrome Developer Tools, or DevTools for short.
-
0:53
DevTools are powerful debugging tools built
-
0:55
right into the Google Chrome browser.
-
0:57
They make debugging CSS easier by letting you quickly inspect and
-
1:01
understand how every line of CSS is being applied to your website.
-
1:05
To begin using DevTools, open your Chrome browser,
-
1:07
and there are several ways to access DevTools.
-
1:10
Click the Chrome menu icon in the top right corner of the browser window.
-
1:14
Then select More Tools, Developer Tools.
-
1:17
You can also right or control click on any page element and select Inspect.
-
1:24
Now the quickest way is using the keyboard shortcut Control + Shift + I on Windows or
-
1:29
command option I on a Mac.
-
1:33
Say you're building a web page and
-
1:35
you notice that something in the design isn't quite aligned right or
-
1:39
you don't see the color or font size you set being applied to an element.
-
1:42
Well there are many reasons this might happen and
-
1:45
just reading your CSS to figure out what's going wrong probably won't give you
-
1:49
the answer, at least it won't give you the answer quickly.
-
1:52
Instead you can open Chrome DevTools, select the problem element, and
-
1:57
inspect the styles applied to it.
-
1:58
The styles pane provides lots of features that will help you isolate and
-
2:03
fix the problem quickly.
-
2:04
So coming up in the next video,
-
2:06
we'll get started using DevTools by first getting to know the Elements panel.
You need to sign up for Treehouse in order to download course files.
Sign up