The web browser is one of the most sophisticated tools on the planet. Today we look at 21 tricks, tips, and lesser-known features in Chrome Dev Tools that will make your life easier as a web developer.

#webdev #chrome #tips

🔗 Resources

Chrome Dev Tools Docs https://developer.chrome.com/docs/devtools/

Brave https://brave.com/

Visbug Extension https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?

📚 Chapters

• 00:00 1. Design Mode
• 01:04 2. Command Palette
• 01:20 3. Screenshots
• 01:29 4. Visual Coverage
• 02:10 5. Dollar Sign Shortcut
• 02:37 6. Live Expression
• 02:53 7. Snippets
• 03:07 8. Redeclare variables
• 03:22 9. Copy Elements
• 03:50 10. Force State
• 04:12 11. Animation Timeline
• 04:30 12. Rendering FPS
• 04:51 13. Grid & Flexbox Editor
• 05:20 14. VisBug
• 05:32 15. Responsive Devices
• 05:49 16. Sensors
• 06:00 17. Lighthouse
• 06:21 18. Network Waterfall
• 06:51 19. Server Timing API
• 07:13 20. Performance
• 08:14 21. Memory Profile
• 08:51 Be Brave

🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

🎨 My Editor Settings

• Atom One Dark
• vscode-icons
• Fira Code Font

#web-development #webdev