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. fireship.io
#webdev #chrome #tips
🔗 Resources
Chrome Dev Tools Docs developer.chrome.com/docs/dev...
Cool PWA Features Video • 7 Web Features You Did...
Brave brave.com/
Visbug Extension chrome.google.com/webstore/de...
📚 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 itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
🔥 Watch more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font

[@jayanths1221]

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

[@Dr3amDisturb3r]

In Jeff we trust!

[@elierh442]

Download Brave and send Jeff some tips lol

[@BlueEdgeTechno]

Hail him

[@mdoerkse]

I have to watch at 0.75 speed!

[@shreeramparija7731]

So his name is Jeff

[@beepboopbeepboopbeepboopbeep]

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

[@JoseAntonioParedesLeonwork]

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

[@CodeNight-dm2hv]

lol 😂😂

[@pyplacca]

More like seeing why ur code sucks in HD😹

[@michagabo8819]

When things were at their very worst: 2 Suns, Cross in the sky, 2 comets will collide = don`t be afraid - repent, accept Lord`s Hand of Mercy. Scientists will say it was a global illusion. Beaware - Jesus will never walk in flesh again. After WW3 - rise of the “ man of peace“ from the East = Antichrist - the most powerful, popular, charismatic and influential leader of all time. Many miracles will be attributed to him. He will imitate Jesus in every conceivable way. Don`t trust „pope“ Francis = the False Prophet - will seem to rise from the dead - will unite all Christian Churches and all Religions as one. One World Religion = the seat of the Antichrist. Benedict XVI is the last true pope - will be accused of a crime of which he is totally innocent. The Book of Truth

[@DanielDaniel-xz2yp]

Ouch

[@xq_nemesis]

Never once have you wasted my time ❤️

[@kolr2873]

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

[@thebeerministry]

You don't have to call them out like that

[@gddeufedhfezr1224]

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

[@danielapjok4263]

Come here to say the same thing, except with the shortcut (ctrl + shift + c), which is also open up the inspector, so you don't have to beforehand.

[@softwarelivre2389]

Firefox has a builtin screenshot tool which is much easier to use right at the click of a button. Much easier to use than the Chromium one.

[@softwarelivre2389]

1:20

[@lamka02sk]

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

[@sunimod1895]

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!

[@claasdev]

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

[@ivanb493]

Design mode?? That's fucking sick thanks Fireship

[@seggsfault]

Yeah man that flipped me

[@samj6837]

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

[@stefandili2650]

How? That's very neat

[@MASTERISHABH]

How?

[@philosuit]

How?

[@user-zh8fd3vf5c]

how?

[@siddheshswami2565]

How can you elaborate?

[@rishabhanand4270]

(On KZbin) -> 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.

[@whoman7930]

This doesn't work for me.

[@Louisianish]

That’s really cool, but I’ll just use my favorite free video downloader app. lol

[@EliasJackson]

KZbin-dl

[@snansahmarov1524]

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. ⭐

[@creativity5155]

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

[@ChristofferLund]

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

[@MiguelReyesDeveloper]

Dev Tip: If you're using an Array or an Object, don't use console.log(), use instead console.table(). Thank me later.

[@NEWTR0N_MUSIC]

But why

[@MiguelReyesDeveloper]

@@NEWTR0N_MUSIC it's gonna log a table and it's easier to read it that way (:

[@NEWTR0N_MUSIC]

@@MiguelReyesDeveloper ohk thanks 👍🏻

[@zzy13236]

Bro, you always push out the most condense yet informative content! Love your work man.

[@philippefutureboy7348]

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

[@jugzster]

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

[@vanibron]

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

[@gradientO]

I decided to learn Angular recently and found your Angular videos, good content you've got there

[@Fireship]

New Angular content is overdue on this channel

[@zameerfouzan]

@@Fireship attempting module federation with WP5 & angular 11. do you have any good pointers/materials for reference ?

[@tebogoseshibe4518]

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.

[@robertholtz]

Super useful high-density essential knowledge. Thank you!

[@AlexanderDemin]

What a video! So much information in 9 minutes!

[@amiar7993]

I liked how we can grab the current element and manipulate it. Thank you, it's simple and straight to the point

[@victorsaisse1340]

Just grabed my popcorn

[@user-yn6ii7ys3u]

im here aswell lmao

[@jamiewilliams8519]

My mind is blown!! Thank you for making this super detailed video!! Awesome job!!

[@me_rinta]

Getting excited for a Fireship video every time 👋🏻 Awesome stuff 🔥

[@sanghvian]

Really helpful video ! Thanks for this Jeff !

[@kluchtube7042]

This is the video i was looking for thank you jeff!

[@heitorasf]

Thanks man, this video was mind-blowing

[@prkkarki8942]

I look forward to every video and it doesn't disappoint me at all. Thank you.

[@_RafaelKr]

Selecting an element in the elements panel and using the different "Break On" options can also be very helpful on figuring out how some things work!

[@collins4359]

I gotta give the award for condensing content to you man. nice work

[@ischysyt]

As new learner, your videos helps me a lot, so many times I see something that can ease one of my dev struggles that I didn't even know what to search for it's fix.

[@djsnooppyzatdepoet7568]

The music and the video audio go so well.

[@DeepankarSandhibigraha]

Thanks a lot. Your tips helps a lot. 👌🏻

[@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.

[@tevinmorake8924]

I had an issue that I wouldn't have noticed if it wasn't for this video. Thanks Jeff!

[@anupamdahal7029]

I have learnt a lot of new things that I have never worked with from your videos, like AWS, nginx, kubernetes, graphQL(and other dbs), typescript to name a few. One thing that I don't understand is how they work together. I would really love to see a video where you design a mock system using all of these (and possibly more) and explain each of their roles and why you chose it (kinda like your reverse-cloud migration video using raspberry pi). Whenever I think of a software architecture I think of them as several layers that interact with each other. However, I am unable to assign which layer what belongs to by watching a stand alone tutorial about a single tool. Btw, I am a college senior pursuing CS major and I love your content. Thanks for all the awesome contents.

[@ruzzan]

I am a simple person, I see Fireship's video I click it.

[@genyklemberg]

thanks. Was great to find this

[@SantosEnoque]

man, like how do you publish all of these awesome videos in such a short time, like how??? I'm a fan

[@pukshu]

What a banger of a vid, thanks for the knowledge!

[@harigalla1364]

That Design mode feature is so sickk!! Never knew about that one

[@TheArkcantos]

Very educational. Love it.

[@sunitshirke]

+rep For the Brave suggestion segment👏

[@makemypetgamedevprocess6475]

Thaaanks, this info is really useful :)

[@hipunpun]

My god, actually insanely useful and impressive - thank you so much! ❤

[@mattborisov]

Thank you very much. I did not know about some features.

[@jp46614]

"If i'm illegally scraping a website" lmao

[@TheCameltotem]

Scraping is seriously underrated. I've built a lot of websites based on other peoples data

[@jp46614]

@@TheCameltotem because of you laws like this exist to protect people from you

[@TheCameltotem]

@@jp46614 Its legal unless you abuse it ie bring down their site.

[@CodingPhase]

Damn bro the way you do videos is amazing just the first 15 seconds had me hooked

[@komodo3784]

Very practical technique, thank you！

[@osraneslipy]

I am putting this one into bookmarks. Awesome video

[@onetdev]

Gosh, I've seen so many new awesome feature here, I feel motivated to work with web (again)

[@zunairkhan7537]

Great tips man!

[@JaLikon65]

Freaking amazing video. One of my fav tips: In the network tab, if you right click on one of the HTTP Requests and hover over "Copy", you can actually copy the request as a cURL commands. So if you go run that cURL command in a terminal, cURL will send the exact same HTTP Request that your browser did. Super nifty, and there are other "Copy as" options too, such as fetch, Node.js fetch, etc etc

[@vivekpaliwar7217]

Thanks man I learn something new everyday from your channel . Low time videos with great content . I got inspired by you to learn react from that 💯 second video .

[@rajatmishra9993]

Thanks. This was recommended by me.

[@hpdcoder820]

Amazing Informations 🤩😊 Thank you 👍

[@shinbones]

Another video let's go! May I know where you get your background music?

[@Fireship]

AudioJungle usually

[@shinbones]

@@Fireship thank you!

[@keorapetsempolokeng2903]

Wow!!!. the usefulness of information in this video.

[@itskyledavid2826]

This video is pure gold

[@burapranay]

You guys are awesome...🥶 Give us more.

[@roshanmhatre8810]

Your videos are really helpful 🔥

[@unpluggedaman]

Super helpful. Thanks a lot

[@oussamasethoum1665]

Thank you very much, now I can understand the magic of website builders.

[@nro337]

Thank you for the tips!

[@ecs1611]

No matter how skilled I am at a subject, I always learn something new from your videos.

[@aliatmani3159]

Never once have you wasted my time ❤️ thank you Jeff

[@gururao3453]

Really helpful 🙌🏻

[@joelcool1027]

Awesome video!

[@diegovillafane6313]

I like a lot how, after a few videos and deep diving into fireship's world, you simply start callim him Jeff, like you would call a friend that you know for a time now, thanks Jeff, you are awesome!

[@radone168]

I really love the style in which you cover topics. The animations, storytelling, and flow are all awesome. Would you please make a video on Snowflake? It is quite a rage these days.

[@leonardodeslf]

Great one!

[@ayushmaanchauhan377]

Really helpful video

[@ahmedroberts4883]

Awesome Vid!

[@tosinakinyemi3948]

wow ..so much valuable information in this video, am amaze, you know so much man, you must be a guru. thanks man

[@robolist2277]

Best web dev channel

[@theocrob]

Thanks very much for this informational video, I love that you add jokes with good information.

[@andrewwoan]

yoo these are crazy amazing tips

[@mexicanmax227]

🤯🤯 Omgah!!! So much knowledge!!! 🤩💪🙏

[@nachiketjoshi3878]

Great knowledge.

[@vinos1629]

These are all some very useful tips that can save me a lot of time which i will never use bcs ill forget about them by the time i need them

[@vaisakhkm783]

100% true

[@sreejonk19]

Amazing content. I can't thank you enough.

[@dan6erbond]

Not sure how specific this is to the developer tooling in the browsers themselves, but the Quick Source Viewer extension and JSON Viewer in Chrome format raw source outputs as well as API responses which can be super handy!

[@guitartom01]

Holy shit! I had no idea you could do all these things!! Thanks!!!

[@bas_kar_na_yar]

The application tab is very useful if you are making a PWA. The manifest section can show you detailed info about your manifest, including previews of your logo (How it will appear once your PWA is installed in mobile devices of different sizes).

[@mohammed7aafar]

awesome work

[@venkatrushivanga1025]

To many awesome tips....my mind on rails🛤️🤯

[@hemanth6951]

With out subscription your video always on top in my youtube

[@Dr3amDisturb3r]

To make source files changes persist through page refresh, use local overrides. It helped me a lot when I was dealing with an external (other team's) module connected to mine with a web socket. I needed to force some state and modify some function definitions in order to test my module's changes and see how they behaved over the socket. It was really helpful to make changes to their module on my own, instead of bothering the other team and asking them to deploy on the testing environments, just so I can experiment with my solutions. Really good stuff!

[@caiyuhui]

It becomes really slow when reload the page swithing to local overrides. Dnt know why

[@the7odmelmoney]

This is great thanks

[@malipetek]

When you go to settings, you can check under Preferences -> Elements -> Show user agent shadow DOM Then you can actually inspect pseudo elements like placeholder in the elements panel.

[@EdonPalenchargaming]

I love using the file explore in chrome to navigate

[@kai_bal]

The example you used in the very beginning, directly exposing those scammers made me lol😂😂

[@jestix9662]

Thanks for not stretching this and push as much info as possible in just 9 mins

[@Athenaforever2308]

Thank you!!!

[@stefandili2650]

No matter if you're a pro developer using devtools constantly or a noob learning and practicing what you just learned in this video, you just might get bored of hitting f12 or ctrl+shift+J constantly to open up devtools. Right-click the icon of your chosen browser and open up properties. In the field called "target", which holds the path to the browser's launcher file, after the path in quotes add --auto-open-devtools-for-tabs. It should now look something like this: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs All instances of the browser need to be closed before this change takes action (check your taskbar running apps). Voila, each new tab you open will be waiting for you with devtools open.