Lightning Talk on Chrome DevTools for Mobile, and MobileChromeApps

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. 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. 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. 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. DevTools
for
Mobile
The
evolu=on
of
remote
debugging
with
emphasis
on
mobile
web
apps
Nitya
Narasimhan
|
Dec
4
2013
|
GDG
NY
Meetup

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. 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. 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. 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. 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. Chrome
Dev
Summit
Links
Link
to
YouTube
Video
(23:40)
Link
to
PresentaHon
(41
Slides)

12. Mobile
Chrome
Apps
Packaging
your
web
apps
for
mobile
app
markets
(Android
&
iOS)
Nitya
Narasimhan
|
Dec
4
2013
|
GDG
NY
Meetup

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. What’s
a
Chrome
App?
(from Joe Marini’s slides at Chrome Dev Summit 2013)

15. What’s
a
Mobile
Chrome
App?
(from Joe Marini’s slides at Chrome Dev Summit 2013)

16. GeCng
Started..
DEMO -- TBD
GitHub
Repos:
Mobile
Chrome
App
Toolkit
Mobile
Chrome
Apps
Samples
Read full article here

17. #2:
Dev
Summit
Talk/Video
Link to
YouTube Video
(skip ahead to the
7:36:00 mark)
Link to
Presentation (29
Slides)

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