The future of DevTools with RemoteDebug

JSCamp, Romania, June 2015

1. The future of DevTools with RemoteDebug. JSCamp, Romania, June 2015 Kenneth Auchenberg
2. DevTools. DevTools. DevTools @auchenberg 2/60
3. I realized something Our industry has a DevTools dogma. @auchenberg 3/60
4. 2007: IE Developer Toolbar @auchenberg http://sixrevisions.com/tools/internet_explorer_extensions_addons_web_developers/ 4/60
5. 2015: Chrome DevTools @auchenberg 5/60
6. Question Is this really the best we can do? @auchenberg 6/60
7. 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? · · · · · · · 7/60
8. Moden DevTool's are collections of tools @auchenberg 8/60
9. Debugging context @auchenberg 9/60
10. A fraction of our screens @auchenberg 10/60
11. Authoring context @auchenberg 11/60
12. Our workflow is broken Authoring tools !== Debugging tools @auchenberg 12/60
13. Disconnect @auchenberg 13/60
14. What if... Authoring tools === Debugging tools @auchenberg 14/60
15. What if... @auchenberg 15/60
16. We have tried, and failed @auchenberg 16/60
17. Security model @auchenberg 17/60
18. There's a better way! @auchenberg 18/60
19. There's a better way! Remote debugging protocols @auchenberg 19/60
20. No common protocol @auchenberg 20/60
21. RemoteDebug was born @auchenberg 21/60
22. RemoteDebug vision @auchenberg 22/60
23. RemoteDebug vision An API to our browsers. @auchenberg 23/60
24. Isn't this WebDriver? It's a low-level API to our browsers. @auchenberg 24/60
25. RemoteDebug So how far are we? @auchenberg 25/60
26. @auchenberg Protocol adaptors 26/60
27. Protocol adaptors @auchenberg 27/60
28. Safari protocol adaptor @auchenberg 28/60
29. Firefox protocol adaptor @auchenberg 29/60
30. IE protocol adaptor (Edge?) @auchenberg 30/60
31. @auchenberg RemoteDebug Gateway 31/60
32. RemoteDebug Gateway @auchenberg 32/60
33. RemoteDebug Gateway @auchenberg 33/60
34. @auchenberg Integrations 34/60
35. Adobe brackets @auchenberg 35/60
36. Microsoft Visual Studio @auchenberg 36/60
37. Other editors too @auchenberg 37/60
38. Calibre @auchenberg 38/60
39. @auchenberg Re-use across platforms 39/60
40. Strongloop Node Inspector @auchenberg 40/60
41. Square PonyDebugger @auchenberg 41/60
42. Facebook Stetho @auchenberg 42/60
43. Facebook Stetho @auchenberg 43/60
44. @auchenberg Similar initiatives. 44/60
45. Mozilla Firefox Protocol Adaptors @auchenberg 45/60
46. Mozilla Firefox Developer Edition @auchenberg 46/60
47. @auchenberg Perspective. 47/60
48. Taking DevTools outside the browser @auchenberg 48/60
49. 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? · · · · · · · 49/60
50. BrowserRemote @auchenberg 50/60
51. BrowserRemote @auchenberg 51/60
52. BrowserRemote @auchenberg 52/60
53. @auchenberg Going forward. 53/60
54. Let's stop reinventing our tools. @auchenberg 54/60
55. Let's reuse our tools. @auchenberg 55/60
56. Let's make it easier to build for the web. @auchenberg 56/60
57. We need a sane development workflow. @auchenberg 57/60
58. The open web follows standards. @auchenberg 58/60
59. Our tools should too. @auchenberg 59/60
60. Thanks. twitter @auchenberg www kenneth.io