Any traditional web developer that transitions into the mobile arena will quickly learn that many of the common development tools they take for granted in the web world – are inaccessible on mobile phones. Even someone extremely familiar in the mobile space will need to debug their code on an actual device. No single tool or debugging technique will solve all your debugging needs. Just like traditional web development, a mobile developer needs to rely an entire arsenal of testing tools. Some mobile friendly debugging techniques we commonly use:
- Running Firebug Lite on a tablet. Excellent for some quick debugging, however the interface isn’t ideal for touch devices and isn’t as robust as the full Firebug experience.
- Utilizing “about:debug” in Android native browsers to activate additional debug options.
- Apply some helpful debug overlays using jQuery. Particularly helpful when debugging screen size variations between Android devices.
While these options are great, they lack the convenience of debugging directly in your development environment. Recently, Adobe released a great tool for mobile web app development: Adobe Shadow. Shadow bridges the gap between a traditional web development environment and the mobile space. (Shadow has since matured into Adobe Edge Inspect.)
- Access to WebKit Developer Tools to see the inner workings of a site’s CSS and HTML
- Test on multiple devices all at the same time
- View JavaScript console messages from your desktop
- Execute JavaScript statements from the development environment and they will appear on the test devices.
Check out Webmonkey‘s article detailing how Adobe Shadow simplifies mobile web testing.
- Download the Shadow Desktop client (Windows | Mac)
- Download Google Chrome Extension(Google Chrome only)
- Download Mobile Client, Search for “Adobe Shadow” (App Store |Google Play) (iOS and Android only)
For detailed directions check-out the Adobe Labs site here. While Shadow will ease the pain of mobile testing and development by providing a familiar environment to web developers, there are still a few notable setbacks:
- Does not allow viewing JavaScript files, stepping through scripts and setting debugging breakpoints.
- WebKit Developer Tools loses connection fairly easily.
- WebKit Developer Tools has noticeably slow performance due to remote access.
- Uses a WebKit browser through Adobe Shadow, so testing on non-WebKit mobile browsers such as Dolphin, Opera, native Android is not possible.
For further reading on Adobe Shadow check out these articles and links:
Want to learn more about Apexon? Consult with an expert here.