Introduction to Chrome DevTools

[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