An intro to dev tools (work in progess)

devtools-basics-wip.md

Stuff that everyone should know about "dev tools"

A quick introduction to (what shouldn't be considered) the dark arts.

We'll mainly focus on the parts that can be useful to everyone.

What's a dev tool?

Your web browser contains a large array of tools primarily created for the benefit of developers, allowing them to inspect, test, and manipulate what's happening within a page in THEIR browser.

(This is a crucial point! These tools only operate within the context of the current webpage; your screen, your computer. So it really doesn't matter what you do while using them, since you can't affect what anyone else sees. Unless someone happens to be looking over your shoulder, in which case you might find yourself explaining why "Facts about cats" is written in giant pink text on your screen. More on that later.)

Examples in this document reference Chrome's dev tools, but all modern browsers (i.e. Firefox, Safari, Edge) have similar -- if not identical -- tools.

Y tho?

99% of what you see on any web page is dictated by the HTML structure (the page content) combined with the CSS styling (the layout and presentation).

JavaScript code can manipulate these two things, but we'll ignore it for now.

There are also media assets like images and videos, but they're directly dictated by the HTML so we'll set them aside for now too.

Let's start out simple. Here's a level-one heading in HTML:

<h1>Facts about cats</h1>

This is made up of an opening tag <h1>, the content, and the corresponding closing tag </h1>. HTML is a nested language and this is as simple as it gets. (But it also doesn't get all that much harder, really!)

We'll add some attractive visual flair using CSS:

h1 {
  font-size: 4rem;
  text-align: center;
  color: hotpink;
  background-color: darkblue;
}

This contains the selector h1, and some simple property-value pairs within the following CSS block (surrounded by curly braces { }). CSS is usually fairly human-readable, although it does use American spelling.

Right. Delightful. Take a look.

Of course even the most basic webpage contains a lot more than a single large pink heading, so developers need to make sure that the HTML is correctly structured (lots of nested elements!), and that styling applies in the expected manner.

Dev tools make all that simple.

How do?

Right-click > Inspect.

That's it. That's the magic.

This will open the dev tools window and focus whichever thing you right-clicked on. (Or it will switch focus to the dev tools window if it's already open.)

If you haven't already, visit the example pageand give it a go.

1. Right-click the heading
2. Choose "Inspect"
3. In the new window that pops up you'll see our <h1> highlighted in the "Elements" panel, and you'll see our pretty styling choices within the "Styles" panel.

But Miss, when will I ever need to know this?

Right now, because you're going to use it to change that heading text, and turn it a more agreeable colour.

After following the steps above, double-click on the text between the <h1> and </h1> tags. You can now change it to whatever you like, but I'm going to assume you've changed it to "Facts about hats" and not "Poop poop poop" because you wouldn't do that, would you?

Lock in your text change by hitting [Enter] or by clicking outside the editable bit to de-focus it, and you'll see the main page update to match.

Too easy.

Now let's change the colours.

Make sure the <h1> is focused (click it within the "Elements" panel, or directly right-click > inspect again) and look over to the "Styles" panel.

You should see the CSS from above listed, as well as some styles coming directly from your browser (AKA "user agent").

• Double-click hotpink and change it to aquamarine.
• Double-click darkblue and change it to coral.

Much better.

And to demonstrate that these changes only apply to the current page in your browser, just refresh the codepen page and you'll see it all revert to how it started.

Details

On the CSS cascade

CSS stands for "Cascading Style Sheets", reflecting the fact that (most) styles "cascade" down the HTML structure to any child elements.

The cascade lets us set a bunch of sensible defaults high up in the page structure, but also lets us override them lower down if and when needed. (Often used to set brand colours, fonts, etc. at a "global" level.)

To demonstrate, we'll start with this nested HTML:

<main>
    <h1>Facts about cats</h1>
    <p>A whole lot of information regarding felines.</p>
    <p>Here is a paragraph containing some filler text, but <span>this bit is within a span element</span> and so it can be targeted and styled separately.</p>
</main>

That's a <main> element, containing a <h1> heading and a couple of <p>paragraphs. One of those paragraphs contains a <span>. Not too complex, but sufficient to demonstrate.

We'll apply this CSS, just targeting the <main> element for now:

main {
  color: red;
}

See it here.

You can see in the output that the red colouring we've applied to the <main> element has "cascaded" down to all of its nested elements.

The CSS panel in that codepen contains some additional bits of CSS, which start off commented-out by being surrounded by /* and */.

Uncomment the first extra bit that targets paragraphs (p) by removing the /* and */, and it will turn all of the paragraphs green. This overrides the red colouring inherited from main, and cascades again down to the <span> inside the second paragraph.

Now uncomment the final piece of CSS and it will turn that inner span purple. It's a work of art.

If you inspect the purple span and look in the "Styles" panel you'll see not only the directly-applied value, but also the values that have been inherited due to the cascade, and it clearly indicates when those inherited styles have been overridden.

On colours

We've used "named colours" in the examples, but in the real world you're far more likely to see "hex values" like #1a2b3c, which dictate a precise colour value by specifying the individual red, green, and blue values as 8-bit hexadecimal values (0-255, or rather, 00-ff).

You'll also see something like rgba(26, 43, 60, .75) which is the same red, green, and blue components, plus an "alpha" value between zero and one for transparency. (And rgba() takes "normal" numbers, rather than hexadecimal values.)

You might also see "CSS variables" being used for this, which look like var(--brand-color) and allow a colour to be specified once, and used in multiple places.

There are a bunch of other colour-definition formats, but this covers the most common cases.

On specificity

To keep things clear for these examples we've only been targeting our CSS by using direct element selectors. This is fine! But it doesn't allow for much cleverness or "designing".

The real world is much more likely to use "classes" (.abc) and sometimes IDs (#xyz) to target particular parts of the page.

Here's a codepen demo to play with.