Browser DevTools: Inspect, Edit and Debug CSS

What you will learn

Every web developer, from beginners to experts, uses the same tool all day long: the browser’s DevTools. In this lesson you will learn how to open them, inspect any element on any page, change CSS live to experiment, and track down the reason a style is not working. Learn this early and you will save yourself hours of guessing in every lesson that follows.

What are DevTools?

DevTools (developer tools) are a set of tools built into your browser. Chrome, Edge, Firefox and Safari all have them, and they look and work very similarly. Think of them as an X-ray machine for a web page: they show you the HTML behind what you see, the CSS applied to each element, and the exact size of every box.

This lesson uses Chrome and Edge names and shortcuts. Firefox is almost identical, and Safari needs one extra step (see below).

How to open DevTools

Pick whichever way you like:

• Press F12.
• Press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
• Right-click any element on the page and choose Inspect. This is the best way, because it opens DevTools with that element already selected.

Safari users: first turn on the Develop tools. Open Safari’s settings, go to Advanced, and tick the option to show features for web developers. After that, the same shortcut works.

DevTools open in a panel at the side or bottom of the window. You can move it using the three-dot menu at the top of the panel (Dock side).

Good to know: DevTools change only your own copy of the page inside your browser. You cannot break a website by editing it here, and every change disappears when you refresh. That makes it a perfect safe playground.

The Elements panel

Click the Elements tab (in Firefox it is called Inspector). You will see two main areas:

• The HTML tree shows the page’s HTML. Hovering over a line highlights that element on the page.
• The Styles pane shows every CSS rule that applies to the selected element, with the file and line number each rule comes from.

Next to Styles there are other tabs. The most useful one for now is Computed, which shows the final value of every property after all the rules are combined.

Skill 1: Inspect an element

1. Right-click the card on the practice page and choose Inspect.
2. In the HTML tree, the element you clicked is highlighted. Click the <h2> line instead.
3. Look at the Styles pane. You will see the .card-title rule with color and font-size.

You can also click the arrow icon in the top-left corner of DevTools (or press Ctrl + Shift + C, Cmd + Shift + C on Mac) and then click anything on the page. This pick an element mode is the quickest way to find what you are looking for.

Skill 2: Edit CSS live

In the Styles pane, everything is editable:

• Change a value: click on crimson, type royalblue, press Enter. The page updates instantly.
• Change a number with the keyboard: click on 28px, then press the Up and Down arrow keys. Hold Shift to change by 10 at a time.
• Turn a declaration on or off: hover over a line and tick or untick the small checkbox that appears. This is the fastest way to answer “what does this line actually do?”
• Add a new declaration: click on an empty space inside the rule, type a property name such as letter-spacing, then a value. DevTools suggests names as you type.
• Pick a colour: click the small coloured square next to a colour value to open a colour picker.
• Edit text: double-click any text in the HTML tree and type something new.

Here is the rule you can experiment on:

.card-title {
  color: crimson;
  font-size: 28px;
}

Try making the title 40px, then tick off the color line and watch it turn black. Then refresh the page and see everything return to normal.

Important: DevTools do not save your changes to your files. When an experiment looks good, copy the new values back into your own CSS file by hand.

Skill 3: Read the box model

Scroll down in the Styles pane (or open the Computed tab) and you will find a coloured diagram of nested rectangles. It shows the element’s content, padding, border and margin, with the numbers for each side. You will study these properly in the Box Model lesson, but you can already use the diagram:

• Hover over an element in the HTML tree. On the page you will see coloured highlights: in Chrome, blue is the content, green is the padding, yellow is the border and orange is the margin.
• Click a number in the diagram and change it to see the spacing change live.

Whenever a gap or a size looks wrong, this diagram tells you which part of the box is responsible.

Skill 4: Find out why a style is not working

This is where DevTools earns its keep. When your CSS “does nothing”, select the element and look at the Styles pane for these clues:

• A line drawn through a declaration means it was overridden by another rule that is stronger or comes later. The winning rule is shown nearby.
• A warning icon next to a declaration means the browser did not understand it: usually a misspelt property name, or an invalid value. Hover over the icon for an explanation.
• Your rule is missing from the list entirely means your selector did not match this element. Typically a typo in a class name.
• The Computed tab shows the final value that was actually applied. Click the small arrow next to a property to see which rule it came from.

Here is a stylesheet for the practice card with three bugs in it. Use Try it to load it, then use DevTools to find them before you read the answers:

.card {
  width: 280px;
  padding: 20px;
  border: 2px solid steelblue;
  background-colour: lightyellow;
}

.card-title {
  color: crimson
  font-size: 28px;
}

.card-button {
  background-color: seagreen;
  color: white;
}

.card-btn {
  padding: 10px 20px;
}

The card should have a yellow background, a large crimson title and a roomy green button. It has none of these.

Show the three bugs

1. background-colour is not a CSS property (CSS uses American spelling). DevTools shows the line with a warning icon or crossed out. Fix: background-color.
2. color: crimson has no semicolon. The browser reads crimson font-size: 28px as one invalid value and throws away both lines, so the title stays black and small. Fix: add ; after crimson.
3. .card-btn does not match anything, because the button’s class is card-button. Click the button in the HTML tree and you will notice this rule is not in its Styles pane at all. Fix: rename the selector to .card-button (or move the padding into the existing rule).

Skill 5: Test different screen sizes

Press Ctrl + Shift + M (Cmd + Shift + M on Mac) to switch on the device toolbar. Your page now appears in a resizable frame, and you can choose a phone or tablet from the dropdown. You will use this a lot in the responsive design lessons, but it is worth knowing about now.

Handy shortcuts

Action	Windows / Linux	Mac
Open DevTools	F12 or Ctrl + Shift + I	Cmd + Option + I
Pick an element on the page	Ctrl + Shift + C	Cmd + Shift + C
Toggle the device toolbar	Ctrl + Shift + M	Cmd + Shift + M
Hard refresh (ignore the cache)	Ctrl + Shift + R	Cmd + Shift + R

Common mistakes

• Expecting DevTools to save your changes. They never do. Copy good edits into your real file, or they vanish on refresh.
• Inspecting the wrong element. You clicked the paragraph, but the style you want belongs to its parent. Click upwards in the HTML tree to check the parent elements.
• Ignoring the crossed-out lines and warning icons. They are DevTools telling you exactly what is wrong.
• Looking at the wrong tab. Styles live in Elements. The Console and Sources tabs are useful later, but they will not show your CSS rules.
• Fixing the code in DevTools, then wondering why the bug is back. Refreshing loads your original files again.
• Only testing on your own screen. Use the device toolbar to check a phone-sized view too.

Practice

1. Open DevTools on this very page. Inspect the heading of this lesson, change its color, and change its font-size using the arrow keys.
2. Click Practice in Editor. Right-click the card in the preview and inspect it (in most browsers you can inspect inside the editor’s preview). Change the title colour, tick off the card’s border, and add a new declaration box-shadow: 4px 4px 8px gray; to the card using the Styles pane (you will learn shadows later).
3. Load the buggy CSS above with Try it and fix all three bugs using DevTools to guide you.
4. Visit any website you like, inspect its main heading, and write down its font-family and color. Where does the rule come from (file name and line number)?
5. Turn on the device toolbar and view your practice card in a phone-sized frame.

Recap

• DevTools are built into your browser. Open them with F12, or right-click an element and choose Inspect.
• The Elements panel shows the HTML tree and the Styles pane with the CSS that applies to the selected element.
• You can edit values, toggle declarations and add new ones live, but nothing is saved. Copy good changes into your own files.
• Crossed-out lines, warning icons and missing rules are the three main clues when a style is not working.
• The box model diagram shows the content, padding, border and margin of any element.
• Next you will learn the exact grammar of a CSS rule and the selectors that let you target elements.