Browser Developer Tools

	Developer tools	Built in	F12
	Developer Tools	Built in	F12
	FireBug	Plugin	F12
	DragonFly	Built in	Ctrl+Shift+I

Logging

console.log("Log");
console.debug("Debug");
console.warn("Warning, be careful");
console.error("Error, oh no!");
    

Timing

console.time("my timer");
... other code ...
console.timeEnd("my timer"); // print elapsed time
    

Log Objects

console.log({a: "Hello", b: "World"});

	Object {a: "Hello", b: "World"}
	[object Object]

console.log("The object is", {a: "Hello", b: "World"});

	The object is Object {a: "Hello", b: "World"}
	The object is[object Object]

console.dir({a: "Hello", b: "World"});

{   a : "Hello",   b : "World" }

Group Logs

console.group('group');
console.log('Some');
console.log('Stuff');
console.groupEnd('group');
    

Not all browsers have console

Use https://github.com/NV/console.js

Conditional Breakpoint

if(...) {
    debugger;
}
            

Use Chrome Dev Tools

Search by file name

Ctrl + O (Windows)
Cmd + O (Mac OSX)

Text search within the current file

Ctrl + F (Windows)
Cmd + F (Mac OSX)

Text search across all files

Ctrl + Shift + F (Windows)
Cmd + Opt + F (Max OSX)

Chrome Profiler - Heap

• Summary — shows objects grouped by the constructor name
• Comparison — displays difference between two snapshots
• Containment — allows exploration of heap contents
• Dominators — shows dominators tree