Debugging Mobile Web
Apps Remotely
James Thomas
Tuesday, 8 May 2012
Slide 2
Slide 2 text
Why do people like
developing applications
for the web?
Tuesday, 8 May 2012
Slide 3
Slide 3 text
Debugging Tools
Tuesday, 8 May 2012
Slide 4
Slide 4 text
Firefox
Tuesday, 8 May 2012
Slide 5
Slide 5 text
Chrome
Tuesday, 8 May 2012
Slide 6
Slide 6 text
Mobile Platforms
?
Tuesday, 8 May 2012
Slide 7
Slide 7 text
Mobile Platforms
Tuesday, 8 May 2012
Slide 8
Slide 8 text
Web Inspector Remote
Tuesday, 8 May 2012
Slide 9
Slide 9 text
> GOTO DEMO
Tuesday, 8 May 2012
Slide 10
Slide 10 text
How does it work?
Tuesday, 8 May 2012
Slide 11
Slide 11 text
Debug Target
Weinre
Server
Client
Tuesday, 8 May 2012
Slide 12
Slide 12 text
Insert custom JS into
target
Debug Target
Weinre
Server
Client
Tuesday, 8 May 2012
Slide 13
Slide 13 text
Connect to client
Debug Target
Weinre
Server
Client
Tuesday, 8 May 2012
Slide 14
Slide 14 text
Client generates debug
events
Debug Target
Weinre
Server
Client
{"args":["alert(\"hello\")","console",true,"442489609::27"...
Tuesday, 8 May 2012
Slide 15
Slide 15 text
Target evaluates and
sends response
Debug Target
Weinre
Server
Client
{"interface":"WeinreTargetCommands","method":"sendCli
entCallback".....
Tuesday, 8 May 2012
Slide 16
Slide 16 text
WebKit Inspector
updated with response
Debug Target
Weinre
Server
Client
Tuesday, 8 May 2012
Slide 17
Slide 17 text
Running a server
locally? Ugh :(
Tuesday, 8 May 2012
Slide 18
Slide 18 text
debug.phonegap.com
Tuesday, 8 May 2012
Slide 19
Slide 19 text
What are the other
alternatives?
Tuesday, 8 May 2012
Slide 20
Slide 20 text
JS Console
Tuesday, 8 May 2012
Slide 21
Slide 21 text
WebKit Remote Debug
Text
Text
Chromium --remote-debugging-port=9222
Tuesday, 8 May 2012
Slide 22
Slide 22 text
Summary
Tuesday, 8 May 2012
Slide 23
Slide 23 text
Summary
• Weinre is a great solution for mobile
environments...
Tuesday, 8 May 2012
Slide 24
Slide 24 text
Summary
• Weinre is a great solution for mobile
environments...
• ...but hopefully a temporary one!
Tuesday, 8 May 2012
Slide 25
Slide 25 text
Summary
• Weinre is a great solution for mobile
environments...
• ...but hopefully a temporary one!
• Not finished, follow the progress on Github
Tuesday, 8 May 2012