Better Web Debugging

a Developer Tools Workshop

A Great resource!

Frontend Masters Course on Web Developer Tools

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

Screencap of this presentation in dev tools.

Debugging, now

Chrome Developer Tools is…

  • a DOM inspector
  • a DOM manipulator
  • an emulator
  • a Javascript REPL
  • a debugger
  • a network profiler
  • an IDE?

… and more!

Enough History, Dive In

Open Developer Tools

Hamburger menu > More Tools > Developer Tools | option/alt + command/control + i

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

Overview

Screencap of overall dev tools panel

Workflow Customization

Placement

Screencap of panel docked to bottom of window Screencap of panel docked to right of window Screencap of panel in own window

Workflow Customization

Toggle Console

Screencap of console in drawer Screencap of console hidden

Workflow Customization

Settings

Screencap of settings

Working with the DOM

The Elements Tab

What is the DOM?

Think of it as your HTML…

…+ anything JS adds.

The Elements Tab is a visual representation of how the browser sees the DOM.

You can explore the nested levels by clicking the arrows next to elements.

Inspecting Elements

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

Right click > Inspect Element
Turn on Inspector Mode, then select element

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

Screencap of CSS pane

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?

  • User Agent Stylesheet (least important)
  • External Stylesheet
  • Inline Styles / modified by JS
  • Anything with !important (most 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?

  • Tag (least important) 
    	div { color: lime; }
  • Class, Attribute 
    	.orange { color: orange; }
	[href^="http"] { color: purple; }
  • ID 
    	#specialsnowflake { color: gray; }
  • Inline style attribute (most important) 
    	style="color: black;"

CSS Specificity

Further reading:

Beginners: Specifics on CSS Specificity @ CSS-Tricks

Advanced: A Specificity Battle @ CSS-Tricks

CSS Prototyping

Manipulating CSS attributes

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

Adding CSS style rules

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

Force CSS state

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

(think link styling)

Animations

Animations pane

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…

Screencap of emulation

Responsive Breakpoints

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

Screencap of emulation mobile Screencap of emulation tablet

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.

Console as REPL

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.

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

Intentional 404

The Sources Tab

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

Source Error screenshot

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

Debugger screenshot

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

JS breakpoint screenshot

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

DOM Breakpoints

DOM breakpoint screenshot

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.

Profile screenshot

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

Timeline screenshot

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.

Network Panel screenshot

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

Resource Panel screenshot

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.

Security Panel screenshot

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.

Audits Panel screenshot

Resources