chrome-dev-tools

Code based on Using The Chrome Developer Tools with John Sonmez (pluralsight.com)

Overview and Console

// Logging
console.log("<message>");
console.warn("<message>");
console.error("<message>");

console.debug("<message>");

// Logging objects
console.log(document);			// DOM format
console.dir(document);			// JavaScript format

// Grouping
console.group("<name>");
	...
console.groupEnd();

console.group("%c<name>", "<style>");

// Formatting
%s 		- string
%d, %i 	- integer
%f		- floating point
%o		- DOM object
%O 		- JavaScript object
%c		- styled with CSS

// Calling debugger
debugger;

// Assert
console.assert(10 == 5 * 2);	// OK
console.assert(10 == 3 * 2);	// fail

// Timing
console.time("<label>"); 
	...
console.timeEnd("<label>"); 

// Selectors
$(selection)
$$(selection)
$x(xpath)

inspect($(selection))

inspect($("h1"));
inspect($(".row"));
inspect($("#chrome-logo"));

// Monitor events
monitorEvents($("h1"), "mouse");

// Shortcuts
Shitft-Ctrl-I, F12		- invoke Chrome Dev Tools
Shitft-Ctrl-J			- console

// Other commands
clear()

Elements Pannel

// Shortcuts
$n 						- where n=[0..4]; selects previously inspected element

Resources And Network Panels

LoadResourceData() 		- console: load all resources

- WebSQL
	Note: WebSQL is pritty much obsolette
	on database level SQL can be used
- IndexedDB
- Local and Session Storage
- Cookies
	Note: To test cookie using local file with with chrome you have to enable them;
	      option '--enable-file-cookies'
- Application Cache

Tip: It is useful to check 'Disable cache (while DevTools is open)' (see Settings) 
     when analyzing Network trafic

Sources and Audit Panels

Tips: 
	Use 'Pretty print' (see "{}" button) to view minified JavaScript
	Use 'Pause on all exceptions' to get more information of what happens

Enable Event Listener Brekpoints | Mouse | click checkbox and click on Load Resources Data button.  

Note: To test worker using local file with with chrome you have to use 
      option '--allow-file-access-from-file'

Timeline and Profiles Panels

Note: 
	Do not forget to click on Record button to get some data
	Use Shift-Refresh when using Chrome Dev Tools to get a fresh copy of all resources
	A help will be shownt if '?' button is pressed (Profiles tab)		

To create time line use:
	console.timeStamp(<label>);

Miscellaneous

Contains demo of IndexedDB -- see indexdb.html file

Note: 
	To delete IndexedDB: 
		go to Settings | Show advanced settings... | Privacy
		choose Content settings... | All cookies and site data..
		search for the domain and delete Indexed database (Database storage)

	To delete data: 
		use mouse right click over IndexedDB and choose Clear

• Working With IndexedDB by Raymond Camden
• Playing with SVG and JavaScript by Raymond Camden
• Video of my HTML5 Storage presentation

Documentation

• Chrome DevTools
• The Chromium Projects

Related articles

• Chrome Dev Tools: Markup and Style
• Chrome Dev Tools: Networking and the Console

Additional tips & tricks

• Ten cool Chrome tricks you can use right now
• Google Chrome Shortcuts
• Cookbook Demo - leverage HTML5 AppCache and IndexedD
• Code Folding in Sublime Text 2
• Can I Use
• Check if Function Exists Before Calling

Other

// Web server 
Use 'php -S localhost:80' to avoid the problems when accessing local file system.

// SublimeText 2
Use Shift-Ctrl-[ to fold code

About the Author

John Sonmez is the founder of Simple Programmer, a Pluralsight Author and Programmer, focused on making the complex simple.