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

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

Slide 2

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

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

Venkman (2002)

Slide 8

Slide 8

View Source Chart (2005)

Slide 9

Slide 9

Firebug (2005)

Slide 10

Slide 10

https://jscamp.tech/

Slide 11

Slide 11

Slide 12

Slide 12

microsoftedgeinsider.com

Slide 13

Slide 13

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

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

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

Slide 17

Slide 17

Tabs

Slide 18

Slide 18

Tabs • Inspector / Elements

Slide 19

Slide 19

Tabs • Inspector / Elements • Console

Slide 20

Slide 20

Tabs • Inspector / Elements • Console • Performance / Timelines

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

Demo time

Slide 26

Slide 26

Master your favourite dev tools

Slide 27

Slide 27

Pick the right tools for the complex jobs

Slide 28

Slide 28

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