Mobile Web Dev

This presentation mainly give a overview of debugging tools that is useful at mobile web development

Transcript

1. Mobile Web Dev Debugging Tools Rick Mak Sept 2012 Thursday, 27 September, 12
2. What to know? Layout DOM object count Event count Memory usage Network Time, Header, Response, etc Thursday, 27 September, 12
3. Layout As long as IE support is not a consideration Use Chrome will fine for 90% Thursday, 27 September, 12
4. Important things Networks Time Memory JS CPU bottleneck Thursday, 27 September, 12
5. Tools Mobile Chrome Mobile Safari weinre iWebInspector - For iOS Android Firefox Thursday, 27 September, 12
6. Connect to browser Native Mobile Chrome <-> Chrome Mobile Firefox <-> Firefox Simulation Mobile Safari(iOS5) <-> iWebInspector weinre Thursday, 27 September, 12
7. Mobile Chrome Android only adb forward tcp:9222 localabstract:chrome_devtools_remote open http://localhost:9222/ You get full feature developer tools Yeah, you got native memory report. Thursday, 27 September, 12
8. Thursday, 27 September, 12
9. Mobile Firefox Android adb forward tcp:6000 tcp:6000 Desktop: about:config -> devtools.debugger.remote-enabled: true Android: about:config devtools.debugger.force-local: false devtools.debugger.remote-enabled: true This is not firebug - and I can’t connect..... about:memory Thursday, 27 September, 12
10. Apache Cordova URL: http://incubator.apache.org/cordova/ We are talking weinre Build it - https://github.com/apache/ incubator-cordova-weinre This is not NATIVE - no memory, more buggy Thursday, 27 September, 12
11. Thursday, 27 September, 12
12. Mobile Safari (iOS 5) iWebInspector - using webkit remote debugging protocol No memory The console don’t works It can debug standalone webapp Simulator use desktop CPU/RAM - no real meaning iOS6 have remote debugging with Safari 6 Thursday, 27 September, 12
13. Thursday, 27 September, 12