Better Web Debugging

a Developer Tools Workshop

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

Before starting, open Network tab and reload so we track it all and don't have to refresh later to demo. Then open slide notes!

Welcome!

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! )

Beware, an alert will pop up for the final fragment.

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.

Chrome wasn't released until 2008.

Most developers used Firebug, since at the time, Safari was just that browser that people use on those weird Mac computers.

As of this authoring (2015), all major browsers have access to feature-parity, but Chrome is the only one that is platform agnostic (compare IE/Safari) and doesn't rely on third-party plugins (Firebug/Firefox)

Debugging, now

Debugging, now

Enough History, Dive In

Open Developer Tools

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

Overview

Workflow Customization

Placement

Pro of right-alignment: the computed styles tab is usually visible when in Element view—very handy for CSS workflows, less important when you're focusing on JS

Workflow Customization

Toggle Console

Console can also be on its own tab, which we'll cover later.

Workflow Customization

Settings

No need to cover all the settings—people can play around on their own later.

Mention cache disabling, JS disabling

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.

Demo speed, change easing function and show curve in graph

Device Mode

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

Emulation is inexact. You're spoofing sizes, UA to some degree, but it doesn't take the place of testing on a specific device for interaction, certain CSS properties, etc.

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.

There's some JS attached to this slide. It'll console.warn about the notes. And throw a fake error.

Act shocked. "You're getting a view of my secret notes for this slide! Oh no!"

We can filter the various console message types.

Show the JavaScript that handles all of this.

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.

There will be more time for breakpoints when you demo performance, if you want to step through the tricky slowFunction()

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.

Talk about how our example is very script-heavy, but low on animations. Other things might have a lot more rendering or painting time.

Animation examples? http://codepen.io/juliangarnier/pen/idhuG http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

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

Talk about checking for 404s

Advanced: make sure you're making the correct call type (post v get)

Good chance for GA tracking check: http://girldevelopit.com filter to utma for GA

show API call to meetup for upcoming events? https://www.girldevelopit.com/chapters/burlington

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).

sessionStorage.setItem('mySessionItem','Some info I want to store in the session');

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.

https://www.google.com/ (good security, bad audit) https://css-tricks.com/ (mixed security, bad audit)

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.

Everything doesn't have to be green, as you can see! But it gives you things to think about.

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

Still have some time?

Show more complex console API stuff https://developer.chrome.com/devtools/docs/console

Demo workspaces?

Mention gray hat stuff? Like, you can change input type of a password to text and it'll show the saved password. You can kill overlays and modal windows to access content below You can keep Pinterest from blocking pins