21+ Browser Dev Tools & Tips You Need To Know
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
Видео 21+ Browser Dev Tools & Tips You Need To Know канала Fireship
#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
Видео 21+ Browser Dev Tools & Tips You Need To Know канала Fireship
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
25 VS Code Productivity Tips and Speed Hacks7 Amazing Developer Tools that you're not using yet7 Full Stack App Ideas for Developers w/ Instructions Included7 Security Risks and Hacking Stories for Web DevelopersI built the same app 10 times // Which JS Framework is best?Reacting to Controversial Opinions of Software Engineers7 Database ParadigmsRaspberry Pi versus AWS // How to host your website on the RPi4Build 5 Apps in 5 Minutes with Flutter… But should you?What is DeFi? (Decentralized Finance Animated)Top 50+ AWS Services Explained in 10 MinutesModule Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack10 CSS Pro Tips - Code this, NOT that!The Async Await Episode I PromisedLearn Docker in 7 Easy Steps - Full Beginner's TutorialBuild a Mindblowing 3D Portfolio Website // Three.js Beginner’s TutorialSEO for Developers in 100 SecondsMake Awesome SVG Animations with CSS // 7 Useful TechniquesThe Decline of Firebase (bundle sizes) // New JavaScript SDK First LookHow to use TypeScript with React... But should you?