- Introduction to Chrome DevTools 2:11
- Getting to Know the Elements Panel 4:32
- Inspecting Styles 5:26
- Viewing Inherited and User Agent Styles 3:58
- Adding and Editing Styles 2:31
- Identify and Debug Errors 4:28
- Visualizing the Box Model and Computed styles 3:59
- Debugging Styles Challenge 2:05
- Debugging Styles Solution 5:55
Preview
Video Player
00:00
00:00
Introduction to Chrome DevTools
2:11Chrome 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.
[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