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