Battle of the Browsers


#1 DevTools

It's ok. I survived! πŸ˜…

Inspector & Debugger

Extensions for Redux & VueX

Android debugging

Basic performance checks





* Network waterfall & sizes
* execution flame graph

Firefox is big on CSS!

Flexbox inspector

Grid inspector

Fonts inspector

#2 Internals

The Quantum EraΒ  πŸš€

What styles apply to each element?
What's the position of each visible element?
Painting the elements onto their containing layer
Composing the layers into the correct order!

.red { color: red; }

.blue { color: blue; }


<p class="red blue"> Battle of the Browsers </p>
Do it in parallel
Move it into it's own thread!

And starting at v67 (May 2019)

πŸ”₯ WebRender πŸ”₯
Moving them to GPU

#3 Features & Community

The Friendly Neighbor πŸ‘‹

Right click & you're done!

and on the community side...

The Docs of The Web!

aand they're a not-for-profit!