Virtual Web Coding Factory .
Chrome Developer Tools
Discover How to Benefit Devtools 
The chrome://about page lists all Chrome's internal pages. Click any of the links to access the page. Many of them are the same pages you can access from Chrome's menus for example, chrome://bookmarks is the bookmarks manager and chrome://settings is Chrome's options page.
Increment property values with the following shortcuts:
LESS and SASS Source Maps
Chrome supports mapping the transpiled CSS rules back to the original SASS or LESS source. Make sure CSS source maps are enabled within the settings dialog.
DOM Breakpoints are useful to break on DOM mutation events, such as when a node is removed, modified, or its attributes are changed. You can view all current DOM breakpoints on the DOM Breakpoint tab.
Inspect event listeners associated with individual DOM nodes. Use the filter icon to restrict the event listeners to only the selected node.
Sometimes CSS properties are dynamically computed based upon the context of the style. For example an property value with an em unit is proportional to the parent element.
XHR Breapoints allow you to break whenever a server request URL contains a particular value. Add an XHR breakpoint within the Sources tab. Click the + icon and enter a value to break on.
One of the developer tools most powerful features is the sources tab. This section is essentially an integrated development environment which allows you to build, test, and debug web apps.
Navigate within the sources tab with the following shortcuts
* Available in all tabs (network, sources, elements, etc)
Resume with all pauses blocked for 500ms by long pressing on the resume button and selecting the second resume button in the menu. Useful to skip over many breakpoints.
In this demonstration we hit the first breakpoint twice. When we resume the second time we do not hit the second breakpoint.
Sometimes you may have a console error but have no idea where or how the exception was thrown. You can have the dev tools immediate break at uncaught or caught exceptions by clicking the (stop) icon. Use in conjunction with pretty-print in minfied apps.
Asynchronous Stack Traces
Asynchronous stack traces allow you to inspect function calls beyond the current event loop. This is particularly useful because you can examine the scope of previously executed frames that are no longer on the event loop. This feature is currently an experiment and needs to be enabled.
In the example above, notice the difference when asyncronous stack traces are enabled and disabled. Also note that the feature needs to be enabled before the breakpoint is reached.
Note: A beta version of Chrome may be necessary for this feature.
Chrome provides a "snippets" bucket within the developer tools which allows you to manage small (or large) scripts that can be injected onto a page. Scripts can do things like inject jQuery into a page, log all globally defined variables, or print out all colors from computed styles used in elements on the page.
This tab allows you to run network utilization and performance audits on your web app. The audit results are automatically sorted based upon severity, red being the most severe and yellow the least.
Remotely debugging allows you the full chrome developer tools enabled within the environment of your remote device. You can remotely debug mobile devices by navigating to chrome://inspect.
Coming up! E-Book