This post will offer higher end developers some notes about what I learned about Google Chrome dev tools. I consider myself to be fairly experienced in web development after over 10 years of coding and I still managed to take away some very cool information from the DevTools Online Course:
Make changes to a stylesheet, save your changes, view the revisions of changes, inspect a list of “changed lines of code” and finally download a complete version of your modified stylesheet.
In the console you can: use $(‘#selector’) even without jQuery being loaded.
In the console you can: use $0, $1, etc to inspect elements selected from the inspector tool.
In the console you can: use the pause button at the bottom to “stop when an error occurs” and click it again to “stop when an error occurs outside of a try catch statement”.
In the console you can: use a bunch of cool tools built into the console js objects. Use $(console) to view all of the objects details.
Google Addon “PageSpeed Insights” is the most useful tool for decreasing load times.
Always make sure CSS loads before JS for performance.
Minify your JS using these cool links: http://closure-compiler.appspot.com, https://developers.google.com/closure/compiler/
Use the “timeline” tool to record page animations and identify why anything might be “choppy” or if you have on page, post loading performance issues.