• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Debugging Web Apps on Real Mobile Devices
 

Debugging Web Apps on Real Mobile Devices

on

  • 13,275 views

 

Statistics

Views

Total Views
13,275
Views on SlideShare
5,629
Embed Views
7,646

Actions

Likes
7
Downloads
36
Comments
1

14 Embeds 7,646

http://blog.saltfactory.net 6362
http://blog.hibrainapps.net 402
http://linuxism.tistory.com 376
http://dalelane.co.uk 290
http://lanyrd.com 84
http://hibrainapps.tistory.com 55
http://saltfactory.tistory.com 49
http://beta.babelverse.com 9
http://sotech.org.uk 9
http://search.daum.net 3
http://webcache.googleusercontent.com 3
http://d.babelverse.com 2
http://translate.googleusercontent.com 1
http://www.hanrss.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Here is another web based debugging tool that I'm working on : www.farjs.com It uses bookmarklet to inject the debugging code to a mobile device.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Debugging Web Apps on Real Mobile Devices Debugging Web Apps on Real Mobile Devices Presentation Transcript

    • Debugging web apps on mobile devicesDale Lanehttp://dalelane.co.uk/blog@dalelane
    • Who am I?● Emerging Technologies Specialist for IBM● Native mobile developer ● Web developer for since 1999 desktops since 1999 ● Palm OS ● jQuery ● Pocket PC ● Dojo ● BlackBerry ● Android ● Mobile web developer since 2011... ● jQuery Mobile ● Dojo Mobile
    • Who are you?● You know web development● You havent worked out all the tricks for developing web apps for mobile, yet● Right?
    • Web debugging on the desktop● What tools are available?
    • Web debugging on the desktop● Firebug
    • Web debugging on the desktop● WebKit Web Inspector
    • Web debugging on the desktop● IE Development Tools
    • Web debugging on the desktop● What do we use them for?
    • Web debugging on the desktop● What do we use them for? ● Stepping through code
    • Web debugging on the desktop
    • Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, debug, info, error, dir ...
    • Web debugging on the desktop
    • Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, debug, info, error, dir … ● Evaluating at the console
    • Web debugging on the desktop
    • Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, debug, info, error, dir … ● Evaluating at the console ● Manipulating and querying the DOM
    • Web debugging on the desktop
    • Web debugging on the desktop● What do we use them for? ● Stepping through code ● Console log, err, dir … ● Evaluating at the console ● Manipulating and querying the DOM ● etc...
    • Web debugging on mobile● alerts● console on Mobile Safari
    • weinre● Web Inspector Remote
    • weinre● Open source
    • weinre● Demo time
    • weinre● Demo time ● View the DOM
    • weinre
    • weinre● Demo time ● View the DOM – Select parts of the page – View style properties of page elements
    • weinre● Demo time ● View the DOM ● Edit the DOM
    • weinre
    • weinre● Demo time ● View the DOM ● Edit the DOM – Edit text in the page – Edit style of something – Disable CSS rules
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console
    • weinre
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console – Tab complete – Alerts that pop up on the phone – Edit the page using document access – Run a function on the page
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace
    • weinre
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace – Console log, error, debug
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage
    • weinre
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage – Inspect local and session storage – Edit storage items
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage ● Timing
    • weinre
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage ● Timing – Show events from timer and replay – console.markTimeline
    • weinre● Demo time ● View the DOM ● Edit the DOM ● Interactive console ● Log and trace ● Storage ● Timing
    • How does it work?● Three parts: ● Debug target ● Server ● Client
    • How does it work – debug target? ● Your webpage + some weinre-specific JS ● Client-side hooks overriding JavaScript functions to send output to...http://code.google.com/chrome/devtools/docs/remote-debugging.html
    • How does it work – server?● A Java server built using Jetty
    • How does it work – client?
    • How does it work?● Three parts: ● Debug target ● Server ● Client
    • How does it work?● In the future... http://code.google.com/chrome/devtools/docs/remote-debugging.html
    • What does it use?● Apache CLI● Jetty● Apache Wink JSON4J● WebKits Web Inspector
    • What is supported?● Supported: ● DOM and CSS inspector ● localStorage and WebSQL inspector ● Event timeline ● console
    • What is supported?● Not supported:
    • How to use it<html><head> <script <script src=”...”> src=”http://yourhost:8080/target/target</head> -script-min.js”></script><body></body></html>
    • How to run it on your own machine$ java -jar weinre.jar –-boundHost -all-
    • How to run it on your own machine
    • How to run it on your own machine<html><head> <script <script src=”...”> src=”http://9.12.229.221:8080/target/ta</head> rget-script-min.js”></script><body></body></html>
    • How to run it on your own machine A tip for debugging on the Android emulator... <script src="http://10.0.2.2:8080/target/target-script-min.js"></script>
    • How to run it on a Mac
    • How to let someone else run it
    • How to inject it into a web page
    • Platform supporthttp://mobilehtml5.org/
    • Where to go● Discussion ● http://groups.google.com/group/weinre
    • Where to go● Source and issues ● https://github.com/phonegap/weinre
    • Where to go● Documentation ● http://phonegap.github.com/weinre/
    • Where to go● Documentation ● http://code.google.com/chrome/devtools/docs/overview.html
    • Where to go ● Download ● http://phonegap.github.com/weinre/https://github.com/phonegap/weinre/archives/master
    • Thanks – for creating itPatrick MuellerEmerging TechnologiesSpecialist, IBM@pmuellrhttp://muellerware.org/
    • Thanks – for introducing me to it Making a web app for iPhone back in January – that kept crashing Mobile Safari... The app:http://dalelane.co.uk/blog/?p=1625 Investigating the crashes:http://dalelane.co.uk/blog/?p=1652
    • Thanks – for introducing me to it James Thomas Emerging Technologies Specialist, IBM @thomasj http://vimeo.com/26258998
    • An alternative: jsconsolehttp://www.jsconsole.com/remote-debugging.html
    • An alternative: Opera DragonFlyhttp://opera.com/dragonfly/documentation/remote/
    • An alternative: BlackBerry Playbook http://devblog.blackberry.com/2011/06/ debugging-blackberry-web-apps/
    • An alternative: socketbughttp://socketbug.com/
    • Any questions?Dale Lane@dalelane