[VIDEO] DEV SNACK: Developer Tools

TRANSCRIPT

Welcome to Skillcrush Dev Snacks: bite-sized demos about all things development!

You've learned about using browser developer tools in your lessons, but let's look at two real-world examples that show how to use those tools to troubleshoot your code and see what styles have been applied!

For these examples, we’re going to use Chrome's “Developer Tools”.

For our first example, I’ve set up the HTML structure of my Jubilee Austen site and begun to apply styles. But some things look amiss. The full-width header “h2” is pushed toward the right half of the screen and overflowing the layout, but I haven't added left padding or margin to it in my styles.

So...what could be the problem? I ran my code through a validator and didn't get any errors, like unclosed tags.

But the validator can't always tell if elements aren't nested as they should be. Let me inspect the parent element that contains the “h2” by clicking on it in the Elements panel.

Oh! I accidentally placed the “h2” inside my second half-width “div”. No wonder it's only half the screen and floating!

I can test moving it outside the “div”  with the Elements panel, but I'll need to remember to copy the changes into my index.html file to save them.

Now, what about this first paragraph in my About section? Instead of being half the width, as I want it to be, it’s full width! Hmm, the paragraph styles are as expected.

But when I click on that div that contains it, I see that my half-width styles have not been applied. They aren't showing in the Styles pane. Why?!

On closer inspection of the HTML for that “div”,  I see I have a typo that the validator wouldn't catch, since class and ID names are unique.

I'm missing the "i" in "half-width." When I fix that typo, the styles are applied! Whoo-hoo!

In our second example, let’s take a closer look at the box model we've been talking about.

Under the Elements panel in the Computed pane, I can examine and edit the element's box.

Let's look at the header “h1”.

The concentric rectangles give me information about the padding, border, margin, width, and height of an element.

Then it is just a matter of some quick math to determine the element's total width and height.

By adding the height measurement shown in this pane to the top and bottom padding, the border (which, in this case, isn't used), and the top and bottom margin,

I get the total height of the element. Notice the total height matches the height of the containing “div” when I inspect it.

I can even click on the values to edit them! Browsers, or my CSS boilerplate, may apply default styles to certain elements like paragraphs or headers.

By inspecting an element with the developer tools, I can see not only my styles but the styles applied by other stylesheets.

For instance, I can see I haven't applied any margin to my “h1” header, but there are 40 pixels of margin there!

Scrolling down to the Styles pane, I can see the normalize stylesheet (aka my CSS boilerplate) calls for some margin, and the browser (called the "user agent stylesheet" here) calls for some as well.

Aha! Armed with this information, I can override or account for those defaults in my stylesheet. See, those dev tools can be fun! So go hover over some elements to reveal their measurements and try troubleshooting your code.

Just don't forget to save or copy over your changes before you refresh or close your browser window. Nothing in dev tools is forever.

Thanks for joining me. See you next time!