List of resources to learn devtools.

Table of Contents

• Articles & Tutorials
• Collections
• Videos
• Series
• Talks
• Sliders
• Courses
• Tips
• Themes
• Extension
• Who to follow

Articles & Tutorials

1. Introducing Chrome DevTools for Mobile
2. Secrets of the Browser Developer Tools
3. Responsive Web Design with DevTools' Device Mode
4. Chrome DevTools upcoming features
5. New ES6 Features and Improved DevTools for Service Workers and Web Animations
6. Now Providing the Full Story
7. DevTools answers: What font is that?
8. Using Chrome DevTools to Debug JavaScript in Any Browser with Ghostlab 2
9. Using Your Terminal From The DevTools
10. Chrome DevTools November Digest
11. Chrome DevTools Revolutions 2013
12. DevTools Digest - Chrome 35
13. DevTools Digest
14. Debugging Asynchronous JavaScript with Chrome DevTools
15. Canvas Inspection using Chrome DevTools
16. Profiling Long Paint Times with DevTools' Continuous Painting Mode
17. Auditing Your Web App For Speed
18. Accelerated Rendering in Chrome
19. Profiling Mobile HTML5 Apps With Chrome DevTools
20. Taking Chrome DevTools outside of the browser.
21. Advanced Performance Audits With DevTools
22. Working With LESS and the Chrome DevTools
23. Chrome DevTools Features You May Have Missed
24. Developing With Sass and Chrome DevTools
25. Chrome Dev Tools: JavaScript and Performance
26. [PT-BR] Os Segredos do Chrome DevTools
27. DevTools Digest: Film strip and a new home for throttling
28. How to Copy Another Site’s CSS Using Chrome Developer Tools
29. DevTools Tips For Sublime Text Users
30. JavaScript Debugging Tips and Tricks
31. 7 Cool tricks with Chrome DevTools
32. New React Devtools Beta
33. Optimize Performance Under Varying Network Conditions
34. Debugging JavaScript with Chrome DevTools Breakpoints
35. Introducing Chrome Debugging for VS Code
36. Introducing the Security Panel in DevTools
37. Cmd/Ctrl+Shift+P to bring up the Command Menu
38. Optimize Performance Under Varying Network Conditions

Collections

1. A collection of tutorials in Gif
2. Dev tools
3. Dev tips

Videos

1. Frame Viewer in Chrome DevTools Timeline
2. Paint Profiler in Chrome DevTools Timeline
3. background v background color CSS Performance investigation
4. Redefining a function as you debug it in Chrome DevTools - LiveEdit recompilation in action
5. Answered: Do animated gifs still animate while in a background tab?
6. Devtools experiments
7. Debugging and fixing Canadian Jank
8. 2D transform's translate() vs absolute positioning: Performance evaluation with Chrome DevTools
9. Chrome DevTools - Live Edit CSS, Save to Disk
10. Chrome DevTools Live Edit + Breakpoints
11. Viewing Painting Behavior w/ Chrome DevTools
12. 15 tricks to master Chrome Developer Tools Console
13. Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools
14. Pageload Perf Audits with DevTools Filmstrip in Chrome
15. Animation Timeline in Chrome DevTools - coming soon
16. Less compiled + devtools
17. How to Copy Cool Formatting from Someone Else's Site
18. Awesome DevTools Customization With DevTools Author
19. Advanced Debugging with Chrome Dev Tools - Wayne Elgin

Series

1. The Breakpoint
2. Totally Tooling Tips
3. Using Chrome Developer Tools
4. [PT-BR] Segredos do Chrome DevTools

Talks

1. Advanced performance tooling in Chrome DevTools
2. Chrome Developer Tools for Speed
3. Google I/O 2013 - Chrome DevTools
4. Advanced Debugging Techniques with Chrome
5. DevTools State of the Union
6. Wait, Chrome Dev Tools could do THAT
7. Improving Your 2013 Productivity With The Chrome DevTools
8. Optimizing network performance
9. DevTools for Mobile
10. What's new in Chrome DevTools?
11. [PT-BR] O maravilhoso mundo do Devtools
12. Web Performance Tooling
13. Accelerate your workflow
14. What’s New in Chrome DevTools

Sliders

1. State Of The Union 2015
2. Chrome DevTools Deep-dive
3. What's new in Chrome DevTools?
4. VelocityConf: Rendering Performance Case Studies
5. DevTools for Mobile

Courses

1. Website Optimization
2. Explore and Master Chrome DevTools
3. Mastering the Google Chrome Developer Tools
4. Chrome Developer Tools

Tips

1. A new Device Mode for a mobile-first generation
2. Efficient element edits, service worker debugging, and Material Design shades
3. Cmd/Ctrl+Shift+P to bring up the Command Menu
4. Supercharged Remote Debugging, Class Toggles and Our Own Late Night Show?!

Themes

1. DevTools Author

Extension

1. PageSpeed Insights
2. PageSpeed Insights With Reports in Command Line
3. WebGL Shader Editor
4. Web Audio API Editor Extension
5. Yez - Chrome extension that acts as terminal and task runner
6. React Developer Tools
7. Grunt Devtools

Who to follow

• Ilya Grigorik
• Addy Osmani
• Paul Irish
• Paul Bakaus
• Umar Hansa
• Chrome DevTools
• DevTools tips

License

To the extent possible under law, Anderson Menezes has waived all copyright and related or neighboring rights to this work.