Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Mobile Debugging
Remy Sharp
September 21, 2012
Technology
75
9.1k
Mobile Debugging
Mobile debugging is a bitch. Let's talk about that, and then fix it.
Remy Sharp
September 21, 2012
Tweet
Share
More Decks by Remy Sharp
See All by Remy Sharp
Using a Modern Web to Recreate 1980s Horribly Slow & Loud Loading Screens
rem
0
51
Recreating the ZX Spectrum loader with Web APIs
rem
0
74
Living Standard
rem
1
120
State of the Gap
rem
1
590
The Art of Debugging
rem
2
1.7k
EdgeConf - Progressive Enhancement
rem
0
110
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
500
Muddling my way through real time
rem
0
430
The Bits Behind JS Bin
rem
4
660
Other Decks in Technology
See All in Technology
ここが好きだよAWS管理ポリシー_devio2022/i_am_iam_lover
yukihirochiba
0
3.2k
CloudWatchアラームによるサービス継続のための監視入門 / Introduction to Monitoring for Service Continuity with CloudWatch Alarms
inomasosan
1
440
聊聊 Cgo 的二三事
david74chou
0
330
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
miu_crescent
0
860
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
19k
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
ryook
5
2.7k
SPAとWebアプリケーションでCognitoの使い方はどう変わるのか? / How do we use cognito with SPA and web applications?
kitano_yuichi
0
410
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
260
AWSを使う上で意識しておきたい、クラウドセキュリティ超入門(駆け足版)
kkmory
0
220
20220803投資先CXO候補者向け 会社紹介資料_合同会社BLUEPRINT
hik
0
480
Istioを活用したセキュアなマイクロサービスの実現/Secure Microservices with Istio
ido_kara_deru
3
440
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
kentosuzuki
1
530
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Design by the Numbers
sachag
271
17k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
How GitHub (no longer) Works
holman
297
140k
Robots, Beer and Maslow
schacon
152
7.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Scaling GitHub
holman
451
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Designing for Performance
lara
597
64k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
Transcript
Mobile Debugging Remy Sharp / @rem
Debugging is a... http://www.flickr.com/photos/grill/2655848033
...and I ❤ debugging http://www.flickr.com/photos/grill/2655848033
Back in early 2000
Our first mobile webapp circa 1999 Amazingly actually still live!!!
XML parsing :( (but strict is strict)
None
http://www.flickr.com/photos/60119893@N00/2883012011/
Art of debugging methodically Replicate so that you can Isolate
and ultimately Eliminate
Principles 1. Know thy enemy 2. Close the gap 3.
Expect the unexpected
1. Know thy enemy
ݾ൴ɼඦፌෆຆɻ “If you know both yourself and your enemy, you
can win a hundred battles without jeopardy.” http://www.flickr.com/photos/katieharbath/4856255673
Simulators mobilexweb.com/emulators
Get real devices http://www.flickr.com/photos/sidesh0w/6675107387 http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
Get FREE devices http://www.flickr.com/photos/sidesh0w/6675107387 http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
Share devices http://www.flickr.com/photos/sidesh0w/6675107387
http://jsconsole.com?this
Understand performance
WTF? Wikipedia has more JavaScript than Gmail? http://remysharp.com/mobile-battery-performance/
"200k of JavaScript held within a block comment adds 240ms
during page load, whereas 200k of JavaScript that is parsed during page load added 2600 ms."
Network monitoring
Charles - $50 Fiddler - windows - free
http://code.google.com/p/pcaphar
Make test cases
2. Close the gap http://www.flickr.com/photos/bowbrick/2093650123
Save Refresh
Host locally •Network Utility (mac) ifconfig en0 inet / ifconfig
eth0 ipconfig (look for ip4v) •Point mobile to that IP •localtunnel (to get out of VMs)
None
jsconsole :listen
weinre “Pronounced like the word ‘winery’. Or maybe like the
word ‘weiner’. Who knows, really.” http://www.flickr.com/photos/booleansplit/6924192819/
Adobe Shadow
iWebInspector / Hooking Web Inspector iWebInspector
jsbin.com
None
Aardwolf http://www.flickr.com/photos/brostad/6294164371
Real debuggers http://www.flickr.com/photos/sidesh0w/6675107387
Chrome for Android
:1337 http://www.flickr.com/photos/blackberryimages/6932160681
:7001
:6000
iOS6
Build your own tools http://www.flickr.com/photos/jannem/3312946500 Test for events Performance metrics
Emulate APIs & event types etc...
remote-tilt.com
jsbin 3 jsbin.com
3. Expect the unexpected http://www.flickr.com/photos/jdhancock/3669455809
Once upon a time... Demoing mobile app Same code Same
mobile device Same OS version But different result
Wifi != ISP network
msie=/*@cc_on!@*/0;
Tether and check via desktop O2 you can change username
to "bypass" to confirm bugs, not to solve them. Also will need to check with providers to be sure.
iPod Touch would crash upon render
Last resort debugging 50/50
Emulating slow connections http://www.flickr.com/photos/63885769@N00/4696519429
Network Link Conditioner (xcode + mac) Slowy.app (mac + $)
ipfw (mac / *nix) sloppy http://www.dallaway.com/sloppy/ (java app) wipfw (windows)
Beware of red herrings console.log
“When you have eliminated the impossible, whatever remains, however improbable,
must be the truth”
If all else fails, take a break.
We need to demand more
My dream: Single Debugging Tool 1. Can we build this
ourselves? 2. Can we hook in and normalise all the remote protocols? 3. Can we do step debugging?
I think so, but it'll be a challenge.....
Otherwise: rock on. @rem leftlogic.com Hire us @