Developer Tools

What it is

Built in to all modern browsers are a set of useful tools for developers. These tools do a gamut of tasks from helping you debug HTML, CSS and Javascript to helping you figure out why the page is slow to load.

There’s a lot to learn to master developer tools, but today we’ll figure out the core functionality: how to use them to inspect, edit and debug our HTML and CSS.

Why it matters

A developer spends most of their time debugging. The developer tools are one of the core tools you’ll lean on every day for a multitude of tasks when crafting a webapp.

For writing HTML & CSS specifically, learning to use the inspector to debug and edit CSS saves a ton of time. Unlike on Codepen, when writing HTML & CSS on a file on your machine, the only way to see if the changes you made work is to refresh the page.

Doing this 10 times a minute wastes a ton of time throughout a day, so it is a huge productivity boost to instantly be able to understand what your CSS is doing and try out small changes right in the browser.

What you'll learn

You’ll learn how to use the parts of the Chrome Developer Tools used to work with HTML & CSS. You are using chrome right? Probably. If not, the developer tools in each browser are similar, and you should still be able to follow along.

By the way, consider switching: other qualities aside, its a good idea to use the same browser as the majority of your future users.

How to learn it

Code School has a great small course that teaches everything you need to know about the developer tools. For now, complete the first two sections.

This is the last lesson before your first project, copying the Google homepage. To do so, you’ll need to be able to take it apart and reverse engineer it, so keep that in mind when learning how to use the dev tools. Can you use the developer tools to figure out how the Google homepage is put together?

As a follow up, here’s another article covering the basics of inspecting HTML and CSS to dissect a webpage.

Comprehension

• How can you delete an HTML element from the page with the developer tools?
• How can you see the list of CSS rules being applied to an element?
• How can you tell if a CSS rule is being overwritten by the cascade with developer tools?
• How do you temporarily disable a CSS rule in the developer tools?
• How can you see which CSS files are styling a given element?

Tasks

If you feel like the Code School course was not enough, you can try out this Mozilla interactive lesson on debugging CSS. Obviously, they expect you to be using Firefox, but use whatever browser you like.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.