How to effectively use the dev tools in all the browsers

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

Slide 1

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

Slide 2

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

Slide 3

Slide 4

Slide 5

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

Slide 6

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

Slide 7

Venkman (2002)

Slide 8

View Source Chart (2005)

Slide 9

Firebug (2005)

Slide 10

https://jscamp.tech/

Slide 11

Slide 12

microsoftedgeinsider.com

Slide 13

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?

Slide 14

Slide 15

Slide 16

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

Slide 17

Tabs

Slide 18

Tabs • Inspector / Elements

Slide 19

Tabs • Inspector / Elements • Console

Slide 20

Tabs • Inspector / Elements • Console • Performance / Timelines

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

Demo time

Slide 26

Maﬆer your favourite dev tools

Slide 27

Pick the right tools for the complex jobs

Slide 28

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