Home

Awesome

<p align="center"> <img src="http://i.imgur.com/zxqE8WC.png"> </p>

List of resources to learn devtools.

Table of Contents

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

License

License

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