21+ Browser Dev Tools & Tips You Need To Know

#webdev #chrome #tips

🔗 Resources

📚 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

🔥 Watch more with Fireship PRO

Use code lORhwXd2 for 25% off your first payment.

🎨 My Editor Settings

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

[jayanths]

How is it humanly possible to fit this ocean of knowledge into a 9-minute video? We must protect Jeff at all costs!

[JoseAntonioParedesLeonwork]

“To investigate why your code sucks in more detail” 😂😂😂

[beepboopbeepboopbeepboopbeep]

Thanks Jeff, I was just wondering how to trick my audience into thinking I made 12, 000, 000$ in two days!

[kolr]

This video is the "missing semester" for front end devs.

[sunimod]

I'm so glad I stumbled on this channel, I just finished my first programming internship and I had essentially 0 web development experience beforehand, your videos helped me out a lot!

[gddeufedhfezr]

Click the select button in the Dev Tools, then hover over an element and see if the contrast is good.

[samj]

Here's a neat feature: in the networking tab, you can edit a request (say, to an API) and change its headers, contents, etc. and resend it. It's very handy if you just want to test minor changes :D

[lamkask]

Been programming for 7 years and just today I learned about design mode haha. Thanks!

[claasdev]

Pro tip: you also can use the sensors (5:49) to test your string localization for dates and currencies in different regions

[creativity]

Using the throttle feature on the networking tab on most major websites, help detect redirection pages in websites; This is mostly helpful when pen testing offline apps.

[poglord._]

Amazing work dude. Love the content. Keep it coming

[ivanb]

Design mode?? That's fucking sick thanks Fireship

[snansahmarov]

One thing i want to mention here:
Teaching something is not easy as looking from outside. It is hard to keep viewers, subscribers level. Sharing content for everyone( No matter beginner, intermediate. etc).
But you do amazing things.

Everyone can watch and joy from your videos. Lets up to 1 million. ⭐

[ChristofferLund]

So many brilliant tips! Thanks for taking the time to research what's available and making it easily accessible and consumable for us.

[rishabhanand]

(On Youtube) -> Open Dev Tools -> Switch Responsive Mode to iPad / Mobile -> Network Panel -> Reload to view the requests in Network Panel -> sort by Time -> click the "videoplayback" request and open in New tab -> Right Click video and download. Congrats, you downloaded a youtube video.

[vanibron]

Things I learned for years squeezed in 9 minutes. Huge respect!

[jugzster]

Every single one of these tips are valuable. You sir are a treasure to the dev community

[philippefutureboy]

👏 Jeff thanks for your amazing content - this is hours of tutorials (and $$$) condensed in 9 minutes! You are a rare diamond!

[tebogoseshibe]

I've randomly stumbled across pretty much all these things while working, but having them all here in perfectly succinct and descriptive video is amazing.

[fahadus]

The CSS transition also has a UI panel for the timing function (easing) which is almost impossible to code by hand if you're doing anything more than the simple stuff.