How to effectively use the dev tools in all the browsers

A presentation at JSCamp in July 2019 in Barcelona, Spain by Jayne Mast

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

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

Jayne Mast
@jayne

1 / 28

Using the debugger dev tools in your favourite browser is almost like second nature. But once a bug shows up in a browser you’re not used to, figuring out how to use their dev tools can be a big pain. In this talk, I want to help you out by showing the different dev tools, where you can find the basic tools, but also what unique features each tool has.