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.