Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mobile Debugging
Search
Remy Sharp
September 21, 2012
Technology
74
9.6k
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
83
Recreating the ZX Spectrum loader with Web APIs
rem
0
170
Living Standard
rem
1
240
State of the Gap
rem
1
790
The Art of Debugging
rem
2
2k
EdgeConf - Progressive Enhancement
rem
0
230
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
690
Muddling my way through real time
rem
0
640
The Bits Behind JS Bin
rem
4
840
Other Decks in Technology
See All in Technology
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
640
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
A better future with KSS
kneath
231
17k
Fireside Chat
paigeccino
25
2.8k
Adopting Sorbet at Scale
ufuk
71
8.8k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Automating Front-end Workflow
addyosmani
1362
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
What's new in Ruby 2.0
geeforr
338
31k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Docker and Python
trallard
37
2.9k
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 @