Hidden Gems in DevTools

Medhat Dawoud

@med7atdawoud

๐Ÿ’Ž

๐Ÿ’Ž

It is very important for any hand worker to know his tools very well

Carpenter

๐Ÿ”จ

๐Ÿชš

๐Ÿชต

๐Ÿช‘

Painter

๐ŸŽจ

๐Ÿ–Œ

๐Ÿ–ผ

๐Ÿ”–

Web Developer

๐Ÿ‘จโ€๐Ÿ’ป

๐Ÿงช

๐Ÿ–ฅ

๐Ÿž

DevTools are your best friends

Regardless of the browser that you use

DevTools are not only console

Let's explore some Gems in some tabs

Elements tab

Network tab

Recorder ๐Ÿ‘จโ€๐Ÿ”ฌ

CSS overview ๐Ÿ‘จโ€๐Ÿ”ฌ

Other general

hidden Gems

Conditional Breakpoints

Simulate User's device and Network

Design Mode

You are using only 10% of your brain abilities

You are using only 10% of your brain abilities

DevTools

Thanks

Medhat Dawoud

@med7atdawoud

Hidden Gems in Developer Tools

By Medhat Dawoud

Hidden Gems in Developer Tools

This talk was originally created for Google Developers Unconference event online

  • 52