Fun with Chrome Dev Tools!

Preferred browser for front-end development?

• Chrome
• Firefox with firebug
• Firefox with FF dev tools
• Safari
• IE

DISCLAIMER:

Settings

Here's what i've enabled:

• Chrome Flag - Dev Tools experiments
• Layers Panel
• Animation Inspection

Act 1: Elements

Click on breadcrumbs to see quickly navigate the tree

Filter by CSS Rules

Simulate hover, focus and active states for styling purposes

Add temporary classes

Colors:

• Color picker
• Cycle color formats
• Custom color palette

Animation debug tools:

• Slow down
• Scrub
• Edit bezier curves

Search by CSS selector

Node Change

• Highlight changed node
• Highlight repaints
• FPS Meter
• Breakpoint on node change

Emulation Mode:

• Phone
• Network Throttling

Media Query:

• Number of Media Queries
• Jump to query

Print Styling

Act 2: Network

Take regular screenshots while loading

Filter:

• By request type
• Name/Regex
• Period of time
• Multiple filters

Bars have useful information

Network Summary

Act 3: Sources

Blackbox/Ignore scripts for debugging

Chrome can be your IDE

• Workspace Binding
• Save files
• Cmd+D Sublime Editing
• Search all files

Act 4: Timeline

srsly

Paul Irish is far smarter than me

So go listen to him:

https://www.youtube.com/watch?v=0xx_dkv9DEY

youtube "paul irish dev tools profiling"

Act V: Sources

Chrome remembers things (for better or for worse)

• $0 is the last clicked DOM element
• $1 is the second last clicked DOM element
• Up to 5 in the buffer?

console.table(data)

Copy to clipboard:     copy(var)

Clear console:     CMD + K

Chrome Canary

Newer animation tools

CSS Variables!

Epilogue

The most amazing/useless feature yet

~(˘▾˘~)Thanks(~˘▾˘)~