Tweet
Tweet

Slide 1

Slide 1 text

Needle in a haystack Advanced DevTools Usage

Slide 2

Slide 2 text

Use cases • Debugging • Performance Profiling • Styling • Assuring quality

Slide 3

Slide 3 text

Command line API • DOM querying • Element tracking • Function call monitoring • Event tracking • Event monitoring • CPU profiling

Slide 4

Slide 4 text

Command line API • $0-$5 • $_ • $$ • getEventListeners • debug • monitor • monitorEvents Demo

Slide 5

Slide 5 text

Command line API Performance API

Slide 6

Slide 6 text

Extensions • What can an extension access? • Adding new UI panels and sidebars • Message passing The Extensions API

Slide 7

Slide 7 text

Extensions Writing your own extension and debugging Demo

Slide 8

Slide 8 text

Extensions Some useful extensions

Slide 9

Slide 9 text

Debugger More than just breakpoints

Slide 10

Slide 10 text

Debugger • DOM Mutation Events • Asynchronous call stacks • Breaking on specific events • Long resumes, live editing and source maps Dem o

Slide 11

Slide 11 text

Profiler • Heap snapshots • Object allocation tracer

Slide 12

Slide 12 text

Garbage Collection “Only if something does not have a retaining path to the root node, it is garbage” - Google I/O 2013 - A Trip Down Memory Lane with Gmail

Slide 13

Slide 13 text

Garbage Collection “Only if something does not have a retaining path to the root node, it is garbage” root object Node scalar Node - Google I/O 2013 - A Trip Down Memory Lane with Gmail

Slide 14

Slide 14 text

Garbage Collection “Only if something does not have a retaining path to the root node, it is garbage” root object Node scalar Node - Google I/O 2013 - A Trip Down Memory Lane with Gmail

Slide 15

Slide 15 text

Garbage Collection “Only if something does not have a retaining path to the root node, it is garbage” root object Node scalar Node - Google I/O 2013 - A Trip Down Memory Lane with Gmail

Slide 16

Slide 16 text

Garbage Collection “Only if something does not have a retaining path to the root node, it is garbage” root object Node scalar Node {...} - Google I/O 2013 - A Trip Down Memory Lane with Gmail

Slide 17

Slide 17 text

Profiler • Retained size • Detached DOM trees • Scattered objects Dem o

Slide 18

Slide 18 text

Timeline • Memory footprint • JS heap size • GPU profiling Dem o

Slide 19

Slide 19 text

Timeline - Memory Management Masterclass with Addy Osmani

Slide 20

Slide 20 text

github.com/mananbharara @mananbharara