Chrome Dev Tools


Chrome Dev Tools

Chrome Dev Tools vs. Firebug/Firefox

Setting Up Your Environment

Setting Up Your Environment

Best to install Chrome Canary along with Chrome Stable.

Inspecting HTML & CSS Elements

Inspecting HTML & CSS Elements

Console Tips
& Tricks

Console Tips & Tricks

copy() = Grab string data.
inpect() = Jump to the current element in the Elements tab.
$0–$4 = References the five most recently selected elements.
$_ = References the last evaluated expression.
$(), $$(), and $x()
clear() = Wipes your console area clean.

You can also inspect different frames.

Javascript Tools
& Sources Tab

Javascript Debugging

Sources tab displays the interface for the V8 debugger.

Overview of the Resources Tab

Resources Tab

Basic Overview of the Network Tab

Network Tab

Useful Plugins

Useful Plugins

People and Sites
to Follow

People and Sites to Follow