Fireship

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. https://fireship.io #webdev #chrome #tips 🔗 Resources Chrome Dev Tools Docs https://developer.chrome.com/docs/devtools/ Cool PWA Features Video https://youtu.be/ppwagkhrZJs 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