chrome dev summit highlights (nyc gdg dec 2013)
DESCRIPTION
Lightning Talk on Chrome DevTools for Mobile, and MobileChromeAppsTRANSCRIPT
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
Full ar=cle here, published on TheNextWeb, Dec 3 2013
In yesterday’s news…
DevTools for Mobile
Nitya Narasimhan | Dec 4 2013 | GDG NY Meetup
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
Full ar=cle here, published on TheNextWeb, Dec 3 2013
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
Nitya Narasimhan | Dec 4 2013 | GDG NY Meetup
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
Full ar=cle here, published on TheNextWeb, Dec 3 2013
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