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
strange CSS display issues,
mistyped JavaScript code and
0:00
other bugs are routine
parts of being a developer.
0:03
CSS bugs can be particularly tricky,
time consuming, and frustrating
0:06
because CSS doesn't provide error messages
to let you know if you've made a mistake.
0:11
For example, if a CSS declaration is
invalid the browser just ignores it.
0:15
Your only clue is when a page doesn't
look the way you expect it to,
0:19
like the fonts are too big, or
the layout and colors are off.
0:23
However with the proper tools,
you can build and
0:26
debug your CSS much more quickly and
accurately.
0:29
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