Chrome Dev Summit Highlights (NYC GDG Dec 2013)

Mobile Chrome Apps & DevTools for Mobile

Nitya Narasimhan | Dec 4 2013 | GDG NY Meetup

highlights from the Chrome Dev Summit (Nov 21-‐23, 2013)

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, ..)

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

Talk about perfect Jming ..

Full ar=cle here, published on TheNextWeb, Dec 3 2013


In yesterday’s news…

DevTools for Mobile


The evolu=on of remote debugging with emphasis on mobile web apps

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


The EvoluJon of Debugging

Everything on Desktop Browser

Guesswork

Debug on Mobile (over USB)

Awareness

Debug Mobile, but on Desktop browser

Knowledge

•  Eliminating ‘guesswork’, decreasing developer ‘effort’. •  Ability to “reuse” tools/knowledge across mobile/desktop

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

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)

The ScreencasJng Difference Type on desktop – keystrokes sent to device

“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

Click to tap. Desktop mouse events auto-‐mapped to device touch events

Scroll, Zoom, Back, Refresh, Focus etc. from desktop DevTools

HANDS ON DEMO

Chrome Dev Summit Links

Link to YouTube Video (23:40)

Link to PresentaHon (41 Slides)

Mobile Chrome Apps


Packaging your web apps for mobile app markets (Android & iOS)

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


What’s a Chrome App?

(from Joe Marini’s slides at Chrome Dev Summit 2013)

What’s a Mobile Chrome App?

(from Joe Marini’s slides at Chrome Dev Summit 2013)

GeCng Started..

GitHub Repos: Mobile Chrome App Toolkit

Mobile Chrome Apps Samples

Read full article here

DEMO -- TBD

#2: Dev Summit Talk/Video

Link to YouTube Video (skip ahead to the 7:36:00 mark)

Link to Presentation (29 Slides)

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

Chrome Dev Summit Highlights (NYC GDG Dec 2013)

Technology

Transcript of Chrome Dev Summit Highlights (NYC GDG Dec 2013)