Better Web Debugging

a Developer Tools Workshop

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

Welcome!

Debugging, then

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

CSS had a lot of this:

	div.classname {
		outline: 1px solid green;
	}
	body {
		background: red !important;
	}

and JS 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

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 Prototyping

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

Remember, these changes aren't saved, but it's great for dialing in styles before you put them in your code.

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 (Tab)

The Console allows you to interact with your page and Dev Tools through JavaScript.

At its most basic, it's a REPL—you can execute basic JS commands in it.

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.warn('A fancier message!');

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

The Console API

The Console will also show messages from the browser, network issues, and actual errors in your JavaScript.

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

Using the Console @ Google Developer DevTools docs

Caveat Developer: it's a best practice to remove any Console API calls before releasing code, because it will break your JS in browsers that don't support the Console API!

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.

Is your brain full yet?

Take Another 5-minute Break

Let it all sink in

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?

Stay In Touch

Rachael Arnold

@raevenfea