Learn to Debug Your Code

with Chrome Developer Tools

Follow along in Google Chrome at
jennifer-mann.github.io/gdi-developer-tools

Welcome!

Welcome!

Debugging, then

Debugging client-side code was hard for a long time.

CSS had a lot of this:

div.className {
  border: 2px solid green;
}

body {
  background: red !important;
}

and JavaScript had a lot of this:

( a.k.a. alert(); all the things! )

Debugging, then

So basically:

Inexact

Time-consuming

Totally not fun!

Debugging, now

Web debugging got infinitely better in early 2006.

Webkit Introduced the “Web Inspector”

and

Joe Hewitt introduced Firebug for Firefox

IE didn’t have equivalent debugging tools until IE8 was released in 2009.

Debugging, now

Debugging, now

Enough History, Dive In

Open Developer Tools

Mac: option+command+i
Win: alt+control+i

Overview

Workflow Customization

Placement

Workflow Customization

Toggle Console

Mac: Esc
Win: Esc

Workflow Customization

Settings

Working with the DOM

The Elements Tab

What is the DOM?

Think of it as your HTML…

…+ anything JS adds.

Inspecting Elements

You can inspect any element on the page to learn more about it.

Manipulating the DOM

Use the context menu (right-click) to:

• Delete elements
• Change element attributes
• Edit as HTML

Drag and drop to reorder elements

CSS Debugging

When an element is selected, all of the CSS rules that are applied show in the Styles section, ordered by specificity.

You can see what is applied, what is overridden, and what is invalid.

CSS Specificity

Specificity refers to how CSS rules are applied based on ordering, inheritance, and the cascade (the 'C' in CSS).

The Basics: Where Do The Styles Live?

• Anything with !important (most important)
• Inline Styles / modified by JS
• External Stylesheet
• User Agent Stylesheet (least important)

CSS Specificity

Order matters, so do selectors. Code as simply as possible. Complex selectors modify specificity in complex ways!

The Basics: What's the Selector?

Halp!

div {
  color: lime;
}
#special {
  color: gray;
}
.orange {
  color: orange;
}

CSS Specificity

Further reading:

Beginners: Specifics on CSS Specificity @ CSS-Tricks

Advanced: A Specificity Battle @ CSS-Tricks

CSS Prototyping

You can manipulate CSS by changing attributes, adding them, using a color picker, and more!

CSS Prototyping

You can add new selectors by clicking the plus icon, or inline styles in the element.style section.

You can also force element states to easily modify the styles that are applied there by clicking the pin icon.

(think link styling)

Animations

The Animations section gives you tools to debug CSS animations. Open it by clicking the stacked diamonds icon.

Device Mode

Set screen size, pixel ratio, throttle network, and more…

Responsive Breakpoints

See how CSS applies with different media queries and quickly jump to those different sizes.

Basic JavaScript Debugging

The Console

The Console is a JavaScript REPL. You can open the Console tab or open it as a drawer on other tabs.

The Console API

There is also a Console API that makes debugging much more streamlined than a bunch of alert() messages.

console.log('A debugging message to show');
console.info('This message shows up a little different!');
console.warn('Another fancy message!');

console.clear(); // clear the console

It's best practice to remove any Console API calls before releasing code.

Stacks

If a message is repeated, rather than printing every time, the messages are stacked.

for (var i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    console.log("Hi");
  } else {
    console.log("Hey");
  }
}

Filters

You can use filters to sort through the different types of messages in the console.

Autocomplete

When you type in the Console, the Console automatically displays options of available or previously used methods.

Track Exceptions

Errors in the console display with a link to the file name with a line you can navigate to.

The Console

There are many ways to use the Console API, and there’s much more to learn.

Using the Console @ Google Developer DevTools docs

The Sources Tab

Our JavaScript errors, warnings, and logs link to the exact code that triggered them in the Sources Tab*

* Minified JS makes it difficult to debug, so use unminified code when testing, but switch to minified for production

debugger;

Ever wish you could just make your JS stop at a certain point so you can study your variables?

debugger; triggers a special state so that you can do that.

Press the blue arrow at the top of the page to continue JS execution, or the arrow over a dot to jump to the next line of your script.

JS Breakpoints

You can set breakpoints in the Sources Tab to stop your JS when it gets to a certain point.

DOM Breakpoints

It may be important to know when your DOM is changed by JS. You can set DOM breakpoints too.

The Profile Tab

The Profile Tab allows you to see the CPU usage of your JavaScript. This lets you check for poor performance.

The Timeline Tab

The Timeline Tab allows you to see a lot more information about your page’s performance.

Check out the timeline from our slowFunction().

Warning: Timelines are resource hogs! Stick to recording a few seconds at a time.

Assets and Connections

The Network Tab

Web pages are rarely made from a single HTML file. The Network Tab shows us all of the different requests our page makes.

Checking Out Requests

Each request in the Network tab shows important information, including:

• Status Code
• Request Method
• Response
• Headers

Learn more about what all those mean at
HTTP Protocol @ Tutsplus

Network Performance Checking

You can use the timeline on the Network tab to learn about performance of your page:

• Bottlenecks: is an asset causing loading to hang?
• Are you trying to access things that don't exist?
• Do you have a huge image that takes forever to download?
• What's the experience like for slow connections?

The Resources Tab

The Resources Tab shows us additional information and data our page has access to, like cookies, local storage, and session storage.

It also shows all the files comprising your page, and updates as additional requests are made (e.g. lazy loaded images).

The Security Tab

The Security Tab shows us information about the SSL Encryption, and security certificates for the various domains the page requests resources from.

The Audits Tab

The Audits Tab shows us information about overall performance of the page, and how we might be able to speed up loading times.

Resources

• Google Developers DevTools Docs
• Deprecated DevTools Docs — Clearer explanations of the basics
• The Breakpoint Video Series
• CodeSchool Explore and Master Chrome DevTools
• JavaScript Profiling @ Smashing Magazine

Questions?