Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Debugging CSS with Chrome DevTools!
You have completed Debugging CSS with Chrome DevTools!
Preview
Chrome DevTools is a set of 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.
Resources
Keyboard Shortcuts
- Windows:
Ctrl+Shift+I - Mac:
Cmd+Opt+I
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up