Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DevTools Camp, Edge DevTools and the future of ...

DevTools Camp, Edge DevTools and the future of tooling

Talk at DevTools Camp in Vancouver. www.meetup.com/DevTools-Camp/events/229240242/

Kenneth Auchenberg

March 22, 2016
Tweet

More Decks by Kenneth Auchenberg

Other Decks in Technology

Transcript

  1. A typical debugging workflow 2 Open editor Navigate to page

    Open browser Find file in editor Make change Refresh browser Open DevTool Look in console Go to scripts- tab Find same file again Go to the edited line Set breakpoint Debug Switch back to editor Make change Tab back to browser Repeat
  2. 4

  3. 5

  4. 6

  5. 7

  6. 16

  7. Source: Bruce Lawson, Opera Mini 1. Nokia X2-01 2. Samsung

    GT-E1282T 3. Nokia 2690 4. Nokia C1-01 5. Micromax A106 Top handsets in India 21
  8. Desktop browsers have changed 1.69% 14.48% 54.33% 4.17% 1.92% (IE

    19.27%) Source: http://www.sitepoint.com/browser-trends-february-2016-mobile-market-decline 22
  9. Mobile browsers have changed 37.69% 10.91% 10.24% 18.63% 2.32% Others

    1.90% Source: http://www.sitepoint.com/browser-trends-february-2016-mobile-market-decline 18.31% 28
  10. In a few years you won’t know you are using

    a browser. Source: Paul Kinlan, Google 30
  11. 36

  12. 37

  13. Still a typical debugging workflow 51 Open editor Navigate to

    page Open browser Find file in editor Make change Refresh browser Open DevTool Look in console Go to scripts- tab Find same file again Go to the edited line Set breakpoint Debug Switch back to editor Make change Tab back to browser Repeat
  14. What if it was like this? 56 Open editor Find

    file in editor Make change Open browser Look in console Set breakpoint Debug Make change Tab back to browser Repeat
  15. 58

  16. 59 We support an open ecosystem where browsers and tooling

    from different vendors work together
  17. 1. Why do I need to learn a new DevTool

    for each browser? 2. Why do I have to use different tools for authoring and debugging? 3. Why isn't my editor integrated with my browser(s)? 4. Why can't I decide which DevTools to use? 5. Why can't I use DevTools to debug my mobile apps? 6. Why can't I leverage the browser logic in my new fancy tool? 7. Why are DevTools bundled with our browsers? 66 A few thoughts
  18. 67 Why are DevTools bundled with our browsers? Desktop browser

    New devices Chrome-less contexts Devtool