Twitter logojtsiirila
GitHub logosiirila

Jared Siirila here for

Chrome DevTools

siirila.github.io/devTools_talk

Save Time!

DevTools can do that?

Lose 30 pounds*

Weight loss not guaranteed

And Fun

Chrome Channels

Channel Description
Chrome icon Stable Standard released version. Major updates every 6 weeks.
Chrome icon Beta One step ahead of stable. Major updates every 6 weeks.
Chrome icon Dev First tested version. Updated 2-3 times per week.
Chrome canary icon Canary Bleeding edge. Released daily. Untested and could be broken.

Design

drop

elements

drag

and

to

rearrange

When editing almost any string containing a number in the Elements panel, the arrow keys can be used to increment/decrement the value

This works in suprising places, such as on Hex values

Hold the shift key to increment/decrement by 10 with the arrow keys

Hold the alt key to increment/decrement by .1 with the arrow keys

Color Picker

When using the color picker, if you move the mouse over the page a magnifying glass will appear that allows you to pick a specific pixel’s color

Shift+click on a color in the sidebar to switch between color formats (rgb, hex, hsl)

Chrome Canary icon

Select colors from the site's color palate

Media Queries

Not available in stores

Call now!

555-867-5309*

Jenny is standing by to take your call

Development

Tired of your mouse slowing you down?

You should try...

Keyboard Shortcuts

Navigate the DOM in the Elements panel using arrow keys

Mac Windows Action
Esc Esc Shows/hides the console
Mac Windows Action
Cmd + ] Ctrl + ] Next panel in DevTools
Cmd + [ Ctrl + [ Previous panel in DevTools
Mac Windows Action
Cmd + P Ctrl + P Search for file by name
Mac Windows Action
Cmd + Opt + F Ctrl + Shift + F Search all sources for string
Mac Windows Action
Ctrl + G Ctrl + G Jump to a specific line number in the current file.

Can also be done using the Search for file by name dialog by putting a : at the start

Mac Windows Action
Cmd + opt + C Ctrl + Shift + C Toggle into inspect element mode when in the browser window.

Useful to inspect elements that are hidden when the mouse moves out of them

Mac Windows Action
Cmd + Shift + O Ctrl + Shift + O List and search functions in current file
Mac Windows Action
Cmd + Shift + D Ctrl + Shift + D Dock/Undock the DevTools with the browser window

Did your DOM change and you can't find what caused it?

Tired of searching through code looking for the culprit?

DOM Breakpoints

Breakpoints for DOM tree modifications including attribute changes and element removal.

What editor would be complete without

Multi-carat

Hold Cmd (Ctrl on Windows) when selecting text to edit and it will allow multiple text selections.

An easier way to select multiple copies of the same word is with Cmd + D (Ctrl + D on Windows), which will select the next occurrence each time.

If you order Console.log today

We'll throw in absolutely FREE

console.clear() or clear()

Clears the console output

console.assert(expression, object)

Throws an error and stack trace if the expression passed into it is false

console.count(label)

Logs the # of times that count has been invoked at that line with that label.

console.profile([label]) console.profileEnd()

Starts and stop a JavaScript CPU profile if the DevTools are open

console.time(label) console.timeEnd(label)

Starts and stops a timer for the specified label. When stopped, the time elapsed is displayed in the console.

Other Useful functions in the Console

Not in the console object

These only exists inside the console!

$()

$$()

Aliases for document.querySelector() and document.querySelectorAll() respectively.

copy()

Copies whatever element is passsed into it to the clipboard


monitor(function)

When the specified function is called, a message is logged with the method name and arguments to the method.

monitorEvents(object,[events])

When one of the specified events occurs on the object, log the event object to the console.

Workspaces

Money back guaranteed!

How much would you pay?

$199

$59

6 Easy Payments of $0

Performance

and

Debugging

Preserve Log

Keeps the log between full page navigation. An option exists for this in both the Network panel and the Console

XHR Instant Replay!

Right click on any XHR request in the Network panel to have the option to replay that request

Show/Hide columns in the Network Panel

Rewind Debugger

When debugging code, rerun the code in the any frame in the Call Stack by right clicking the frame and selecting to Restart Frame

Conditional Breakpoints

Tired of having sequential messages stacked in the Console?

Enable "Show timestamps" in the Settings

Snippets

The Sources panel allows you to create, store, and run snippets of JavaScript

Store useful utilities

Grep

Attaches a Grep method to the Object prototype

jQuerify

Add jQuery to a page that doesn't have it

Log Globals

Find leaked globals

More snippets can be found at:

https://github.com/paulirish/devtools-addons/wiki/Snippets

http://bgrins.github.io/devtools-snippets

https://github.com/bahmutov/code-snippets

Timeline Panel Screenshots

Call now, and we'll double the offer!

555-867-5309

Network Panel Screenshots

Network panel filters

Many different filters such as larger-than and domain

Chrome will autocomplete the filters applicable to your data, so play around

Timeline panel

DevTools slow frame screenshot
DevTools forced asynchronous frame screenshot

But Wait, There's More!

DevTools all the way down

The DevTools themselves are a web app that can be edited by opening DevTools on them if they are undocked!

Enable DevTools Experiments

Chrome Flag for DevTools Experiments

Ascii video in the Console

http://neax.de/blog/console/

555-867-5309