How to effectively use the dev tools in all the browsers

How to effectively use the dev tools in all the browsers Paul Verbeek-Mast Senior Software Engineer @ Confrere @paul_v_m | noti.st/paul noti.st/paul

queerjs A meetup for everyone where Queer Speakers take the stage Berlin, July 23 Amsterdam, October 2 (?) queerjs.com

Best viewed in http://www.angelfire.com/nj2/zcentral/

<layer> http://www.anaesthetist.com/mnm/javascript/layer.htm http://www.moock.org/webdesign/javascript/fixnetscapecss/ cssbugdemo.html

Venkman (2002)

View Source Chart (2005)

Firebug (2005)

https://jscamp.tech/

microsoftedgeinsider.com

Changes the DOM? Teﬆ in all the browsers yes Mess with CSS? yes yes Performance testing? Teﬆ in your favourite browser no yes Bleeding edge?

Preferences -> Advanced -> Show Develop menu in menu bar

Tabs

Tabs • Inspector / Elements

Tabs • Inspector / Elements • Console

Tabs • Inspector / Elements • Console • Performance / Timelines

Tabs • Inspector / Elements • Console • Performance / Timelines • Network

Tabs • Inspector / Elements • Console • Performance / Timelines • Network • Storage / Application Firefox service workers: about:debugging

Tabs • Inspector / Elements • Console • Performance / Timelines • Network • Storage / Application • Memory

Demo time

Maﬆer your favourite dev tools

Pick the right tools for the complex jobs

Thank you! Paul Verbeek-Mast Senior Software Engineer confrere.com @paul_v_m | noti.st/paul