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.8k
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
100
Recreating the ZX Spectrum loader with Web APIs
rem
0
200
Living Standard
rem
1
280
State of the Gap
rem
1
840
The Art of Debugging
rem
2
2.2k
EdgeConf - Progressive Enhancement
rem
0
270
Toxic Side of Free. Or: how I lost the love for my side project.
rem
0
740
Muddling my way through real time
rem
0
710
The Bits Behind JS Bin
rem
4
880
Other Decks in Technology
See All in Technology
Amazon Q Developerで.NET Frameworkプロジェクトをモダナイズしてみた
kenichirokimura
1
170
Copilotの力を実感!3ヶ月間の生成AI研修の試行錯誤&成功事例をご紹介。果たして得たものとは・・?
ktc_shiori
0
280
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
1
5k
AI×医用画像の現状と可能性_2024年版/AI×medical_imaging_in_japan_2024
tdys13
1
1.3k
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
780
ZOZOTOWN の推薦における KPI モニタリング/KPI monitoring for ZOZOTOWN recommendations
rayuron
1
1.1k
OPENLOGI Company Profile for engineer
hr01
1
18k
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
1.2k
Git scrapingで始める継続的なデータ追跡 / Git Scraping
ohbarye
4
150
Cloudflareで実現する AIエージェント ワークフロー基盤
kmd09
0
250
プロダクトの寿命を延ばすためにエンジニアが考えるべきこと 〜バージョンアップってなんのためにやるのか〜 / Strategies for product longevity
kaonavi
0
100
AWSの生成AIサービス Amazon Bedrock入門!(2025年1月版)
minorun365
PRO
7
420
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
950
Speed Design
sergeychernyshev
25
730
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Faster Mobile Websites
deanohume
305
30k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How STYLIGHT went responsive
nonsquared
96
5.3k
GitHub's CSS Performance
jonrohan
1030
460k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Six Lessons from altMBA
skipperchong
27
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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 @