Chrome Dev Summit Highlights (NYC GDG Dec 2013)

593 views
452 views

Published on

Lightning Talk on Chrome DevTools for Mobile, and MobileChromeApps

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
593
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Chrome Dev Summit Highlights (NYC GDG Dec 2013)

  1. 1. Mobile  Chrome  Apps   &  DevTools  for  Mobile   highlights  from  the  Chrome  Dev  Summit  (Nov  21-­‐23,  2013)     Nitya  Narasimhan  |  Dec  4  2013  |  GDG  NY  Meetup  
  2. 2. GeCng  a  sense  of  audience   •  Chrome  (packaged  apps,  Blink,  ..)   •  Web  Apps  (Dart,  AngularJS,  DevTools,  …)   •  Android     •  Glass   •  Google  Cloud,  Google  Compute  Engine   •  Other  (Go,  Google  Apps,  ..)    
  3. 3. Chrome  Dev  Summit,  Nov  ‘13   •  Focus  on  mobile  web  app  development  and   performance  opHmizaHon  tools  &  pracHces   Presenters:    Chrome  Dev  Engineers,  Advocates   Topics:  Blink,  Dart,  DevTools,  APIs,  UX  paPerns,..     •  •  •  Schedule  &  Slides  available:  here   •  Videos  archives:  Day  1  here    Day  2  here  
  4. 4. Talk  about  perfect  Jming  ..   In yesterday’s news… Full  ar=cle  here,  published  on   TheNextWeb,  Dec  3  2013   Full  ar=cle  here,  published  on   TheNextWeb,  Dec  3  2013  
  5. 5. DevTools  for  Mobile   The  evolu=on  of  remote  debugging  with  emphasis  on  mobile  web  apps   Nitya  Narasimhan  |  Dec  4  2013  |  GDG  NY  Meetup  
  6. 6. DevTools  for  Mobile   DevTools  for  Mobile  brings  USB-­‐based   remote  debugging  to  mobile  web  apps.   Run  app  on  phone,  interact+debug  on   desktop  just  as  you  do  a  regular  web  app   Full  ar=cle  here,  published  on   TheNextWeb,  Dec  3  2013  
  7. 7. The  EvoluJon  of  Debugging   Everything on Desktop Browser Debug on Mobile (over USB) Debug Mobile, but on Desktop browser Guesswork Awareness Knowledge •  Eliminating ‘guesswork’, decreasing developer ‘effort’. •  Ability to “reuse” tools/knowledge across mobile/desktop
  8. 8. Remote  Debugging     Click  video  for  short  demo  (1:07)  or  view   directly  on  YouTube  at  this  URL       REQUIRES  CHROME  28  &  HIGHER     1.  Install  Chrome  28  on  Android/iOS   2.  Install  Chrome  31  (Stable)  or   Chrome  32  (Beta)  on  Desktop   3.  Enable  USB  Debugging  on  Phone   4.  Enable  ‘DevTools  Experiments’  in   chrome://flags  on  deskop.   5.  Restart  Chrome   6.  Go  to  chrome://inspect  on  Desktop   and  ‘discover’  your  phone  
  9. 9. Remote  Debugging  Features   •  •  •  •  •  •    See  ‘exact’  user  experience  on  mobile  web  app   Desktop  DevTools  reflects  mobile  Chrome  version   Reverse  Port  Forwarding  (mobile  accesses  web  over  USB)   “Inspect  Element”  for  mobile  browser   “Network  waterfall”  analysis  (if  cellular  acHve)   “Screencast”  for  single-­‐display  debugging  (achieved  by   repeated  screen  captures  –  has  performance  overheads)  
  10. 10. The  ScreencasJng  Difference   Type  on  desktop   –  keystrokes  sent   to  device   Click  to  tap.   Desktop  mouse   events  auto-­‐ mapped  to  device   touch  events   Scroll,  Zoom,   Back,  Refresh,   Focus  etc.  from   desktop  DevTools   HANDS ON DEMO “Inspect  Element”   directly  on  mobile   phone  web  app.     Debug  Android   WebViews  (requires   KitKat  device,  Chrome   30+  on  desktop)   For  More  Info:     Remote   Debugging   Chrome  on   Android  
  11. 11. Chrome  Dev  Summit  Links   Link  to    YouTube  Video   (23:40)   Link  to  PresentaHon     (41  Slides)  
  12. 12. Mobile  Chrome  Apps   Packaging  your  web  apps  for  mobile  app  markets  (Android  &  iOS)   Nitya  Narasimhan  |  Dec  4  2013  |  GDG  NY  Meetup  
  13. 13. Mobile  Chrome  Apps   Uses  Apache  Cordova,  the  ‘engine’  behind   PhoneGap.  Open-­‐sourced  by  Adobe  and   managed  by  Apache,  it  supports  na=ve   phone  app  dev.  using  HTML/CSS/JS   Full  ar=cle  here,  published  on   TheNextWeb,  Dec  3  2013  
  14. 14. What’s  a  Chrome  App?   (from Joe Marini’s slides at Chrome Dev Summit 2013)
  15. 15. What’s  a  Mobile  Chrome  App?   (from Joe Marini’s slides at Chrome Dev Summit 2013)
  16. 16. GeCng  Started..   DEMO -- TBD GitHub  Repos:   Mobile  Chrome   App  Toolkit     Mobile  Chrome   Apps  Samples   Read full article here
  17. 17. #2:  Dev  Summit  Talk/Video   Link to YouTube Video (skip ahead to the 7:36:00 mark) Link to Presentation (29 Slides)
  18. 18. Thank  You   We’d  love  to  see  more  hands-­‐on  demos  of  the   features  presented  in  these  two  talks.     If  you  explore  ‘Mobile  Chrome  Apps’  or  ‘Dev  Tools   for  Chrome’  do  consider  presenHng  a  lightning   talk  on  the  topic  at  a  future  GDG  

×