Moden DevTool's are collections of tools
@auchenberg 10/71
Slide 11
Slide 11 text
Still a typical front-end workflow
@auchenberg 11/71
Slide 12
Slide 12 text
Question
Is this really the best we can do?
@auchenberg 12/71
Slide 13
Slide 13 text
Thought experiment
@auchenberg
Why do I need to learn a new DevTools for each browser?
Why do I have to use different tools for authoring and debugging?
Why isn't my editor integrated with my browsers?
Why can't I decide which DevTools to use with my browsers?
Why can't I use DevTools to debug my mobile apps?
Why can't I leverage the browser logic in my new fancy tool?
Why are DevTools bundled with our browsers?
·
·
·
·
·
·
·
13/71
What if...
Authoring tools === Debugging tools
@auchenberg 19/71
Slide 20
Slide 20 text
What if...
@auchenberg 20/71
Slide 21
Slide 21 text
We have tried, and failed
@auchenberg 21/71
Slide 22
Slide 22 text
Security model
@auchenberg 22/71
Slide 23
Slide 23 text
There's a better way!
@auchenberg 23/71
Slide 24
Slide 24 text
There's a better way!
Remote debugging protocols
@auchenberg 24/71
Slide 25
Slide 25 text
No common protocol
@auchenberg 25/71
Slide 26
Slide 26 text
RemoteDebug was born
@auchenberg 26/71
Slide 27
Slide 27 text
RemoteDebug vision
@auchenberg 27/71
Slide 28
Slide 28 text
RemoteDebug vision
An API to our browsers.
@auchenberg 28/71
Slide 29
Slide 29 text
Isn't this WebDriver?
It's a low-level API to our browsers.
@auchenberg 29/71
Slide 30
Slide 30 text
RemoteDebug
So how far are we?
@auchenberg 30/71
Slide 31
Slide 31 text
@auchenberg
Protocol adaptors
31/71
Slide 32
Slide 32 text
Protocol adaptors
@auchenberg 32/71
Slide 33
Slide 33 text
Safari protocol adaptor
@auchenberg 33/71
Slide 34
Slide 34 text
Firefox protocol adaptor
@auchenberg 34/71
Slide 35
Slide 35 text
IE protocol adaptor (Edge?)
@auchenberg 35/71
Slide 36
Slide 36 text
@auchenberg
RemoteDebug Gateway
36/71
Slide 37
Slide 37 text
RemoteDebug Gateway
@auchenberg 37/71
Slide 38
Slide 38 text
RemoteDebug Gateway
Demo
@auchenberg 38/71
Slide 39
Slide 39 text
RemoteDebug Gateway
@auchenberg 39/71
Slide 40
Slide 40 text
@auchenberg
Integrations
40/71
Slide 41
Slide 41 text
Pioneer: Adobe brackets
@auchenberg 41/71
Slide 42
Slide 42 text
Many other editors
@auchenberg 42/71
Slide 43
Slide 43 text
@auchenberg
New tools
43/71
Slide 44
Slide 44 text
Calibre
@auchenberg 44/71
Slide 45
Slide 45 text
@auchenberg
Re-use across platforms
45/71
Slide 46
Slide 46 text
Node Inspector (Strongloop)
@auchenberg 46/71
Slide 47
Slide 47 text
Node.js is adopting the Chrome protocol
@auchenberg 47/71
Slide 48
Slide 48 text
PonyDebugger (Square)
@auchenberg 48/71
Slide 49
Slide 49 text
Stetho (Facebook)
@auchenberg 49/71
Slide 50
Slide 50 text
Stetho (Facebook)
@auchenberg 50/71
Slide 51
Slide 51 text
@auchenberg
Similar initiatives
51/71
Slide 52
Slide 52 text
Mozilla Valence
@auchenberg 52/71
Slide 53
Slide 53 text
Mozilla Firefox Developer Edition
@auchenberg 53/71
Slide 54
Slide 54 text
@auchenberg
Perspective.
54/71
Slide 55
Slide 55 text
@auchenberg 55/71
Slide 56
Slide 56 text
Chrome DevTools App
@auchenberg 56/71
Slide 57
Slide 57 text
Thought experiment revised
@auchenberg
Why do I need to learn a new DevTools for each browser?
Why do I have to use different tools for authoring and debugging?
Why isn't my editor integrated with my browsers?
Why can't I decide which DevTools to use with my browsers?
Why can't I use DevTools to debug my mobile apps?
Why can't I leverage the browser logic in my new fancy tool?
Why are DevTools bundled with our browsers?
·
·
·
·
·
·
·
57/71