Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Introduction to Chrome DevTools

2:11 with Guil Hernandez

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.

Resources

Keyboard Shortcuts

  • Windows: Ctrl+Shift+I
  • Mac: Cmd+Opt+I
  • 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