Chrome Dev Tools

And why you should be using them.

By: Blake Tarter

About this Presentation

I built this using reveal.js

Super simple Presentation framework using pure dom elements.

Overview

Using the Tools

⌘ (Command) + option + i or ctr + shift + i on windows

Or for those who dont like keyboard shortcuts

Right Click -> Inspect Element

Now what?

The Tabs

Elements

• Shows DOM structure
• Different than View Source
• Editable
• Can show shadow DOM

Network

• Shows all downloaded files
• Shows the status of files and time to download/blocking time
• Can be filtered by type of file
• Useful to see what files are taking long to download/are blocking other things from downloading

Sources

• Shows folder structure of the source files
• Files can be opened/inspected/edited/debugged

Timeline

• Can record activity and show all kinds of browser activity and various statistics
• Also shows frame/memory statistics

Profiles

• The CPU profiler shows execution time spent on javascript
• The Heap profiler shows memory usage by the DOM and javascript
• The CSS profiler shows time spent matching selectors to elements in the DOM

Resources

• Access to view/edit local/session storage and cookies
• Shows iframes on page
• Shows other varies font/img files as well that are cached

Audits

• Runs a test that shows warnings/recommendations to improve web page performance
• Can tell it to run on current state or reload the page then run the test (so it works on ajax apps)

Console

• Shows results of javascript console.log
• Can also run any valid javascript code
• Has access to the Command Line API
• Can be configured to show all XHR requests as well
• Can be brought up at any time with ESC key

Emulation

Chrome Dev tools have the ability to emulate both mobile devices and mobile networks.

This is a usefull tool when working with responsive design.

Opening Emulation

To turn on Emulation just click on the mobile device icon in the top left of the dev tools.

Choosing a Device

Just select a device from the dropdown list then refresh the page to reload user agent information.

Network Throttling

Throttling works the same way as selecting a device, just choose your level of throttling from the list.

Breakpoints

Viewing the breakpoints/media queries that are set up are easy as well.

Customizing the Look

While not functionally usefull customizing the look of the dev tools can make these tools much more enjoyable to use.

Enabling Customization

To enable customization go to

chrome://flags/#enable-devtools-experiments

and check Enable Developer Tools experiments.

Getting a Theme

Just go to the chrome web store and find a theme you like and the dev tools should be re themed, a chrome re-start might be required.

Quick link

Command Line API

For anyone who uses the javscript console the Command Line API is indespensable. It has a heap of tools that range in uses.

Do note that these are only available for use in the Chrome Dev Tools console and not in any actual script.

$ and $$

$ maps to

document.querySelector

and $$ maps to

document.querySelectorAll

Even without jQuery loaded on the page these work almost like jQuery selectors.

$_ and $0 - $4

$_ simply returns the value of the last evaluated expression

$n returns the nth selected DOM node from the elements list, from 0 - 4 are remembered.

Other Useful Methods

• $x(path) can be used to match a valid xpath expression.
• dir(object) can be used to display all of the methods and properties on a specified object, much like how jQuery objects are displayed in the console.
• getEventListeners(object) will return a list of all the registered event listeners on the specified object.

Usefull Links

Chrome DevTools Overview

Device Mode & Mobile Emulation

Skin your Chrome Inspector

Command Line API Reference