1
00:00:00,000 --> 00:00:04,773
[MUSIC]

2
00:00:04,773 --> 00:00:08,738
Problems pop-on on every web project,
HTML validation errors,

3
00:00:08,738 --> 00:00:12,279
strange CSS display issues,
mistyped JavaScript code and

4
00:00:12,279 --> 00:00:15,830
other bugs are routine
parts of being a developer.

5
00:00:15,830 --> 00:00:20,060
CSS bugs can be particularly tricky,
time consuming, and frustrating

6
00:00:20,060 --> 00:00:24,250
because CSS doesn't provide error messages
to let you know if you've made a mistake.

7
00:00:24,250 --> 00:00:28,460
For example, if a CSS declaration is
invalid the browser just ignores it.

8
00:00:28,460 --> 00:00:32,290
Your only clue is when a page doesn't
look the way you expect it to,

9
00:00:32,290 --> 00:00:35,570
like the fonts are too big, or
the layout and colors are off.

10
00:00:35,570 --> 00:00:38,240
However with the proper tools,
you can build and

11
00:00:38,240 --> 00:00:41,700
debug your CSS much more quickly and
accurately.

12
00:00:41,700 --> 00:00:44,920
I'm Guil a front end web developer and
teacher here at Treehouse.

13
00:00:44,920 --> 00:00:48,380
In this workshop we'll explore
the most useful and efficient tool for

14
00:00:48,380 --> 00:00:53,150
debugging CSS, the Chrome Developer Tools,
or DevTools for short.

15
00:00:53,150 --> 00:00:55,960
DevTools are powerful
debugging tools built

16
00:00:55,960 --> 00:00:57,710
right into the Google Chrome browser.

17
00:00:57,710 --> 00:01:01,390
They make debugging CSS easier by
letting you quickly inspect and

18
00:01:01,390 --> 00:01:04,340
understand how every line of CSS
is being applied to your website.

19
00:01:05,610 --> 00:01:07,750
To begin using DevTools,
open your Chrome browser,

20
00:01:07,750 --> 00:01:10,360
and there are several
ways to access DevTools.

21
00:01:10,360 --> 00:01:14,300
Click the Chrome menu icon in the top
right corner of the browser window.

22
00:01:14,300 --> 00:01:16,970
Then select More Tools, Developer Tools.

23
00:01:17,980 --> 00:01:22,920
You can also right or control click on
any page element and select Inspect.

24
00:01:24,370 --> 00:01:29,840
Now the quickest way is using the keyboard
shortcut Control + Shift + I on Windows or

25
00:01:29,840 --> 00:01:31,550
command option I on a Mac.

26
00:01:33,810 --> 00:01:35,230
Say you're building a web page and

27
00:01:35,230 --> 00:01:39,050
you notice that something in
the design isn't quite aligned right or

28
00:01:39,050 --> 00:01:42,760
you don't see the color or font size
you set being applied to an element.

29
00:01:42,760 --> 00:01:45,550
Well there are many reasons
this might happen and

30
00:01:45,550 --> 00:01:49,430
just reading your CSS to figure out what's
going wrong probably won't give you

31
00:01:49,430 --> 00:01:51,610
the answer, at least it won't
give you the answer quickly.

32
00:01:52,860 --> 00:01:57,200
Instead you can open Chrome DevTools,
select the problem element, and

33
00:01:57,200 --> 00:01:58,676
inspect the styles applied to it.

34
00:01:58,676 --> 00:02:03,100
The styles pane provides lots of
features that will help you isolate and

35
00:02:03,100 --> 00:02:04,850
fix the problem quickly.

36
00:02:04,850 --> 00:02:06,340
So coming up in the next video,

37
00:02:06,340 --> 00:02:09,800
we'll get started using DevTools by first
getting to know the Elements panel.