WEBVTT

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.