CFObjective Notes - Mobile Debugging Tips and Tricks, Ray Camden
May 16, 2013
(Last year I blogged all my notes from the CF.Objective sessions, and received a lot of positive feedback about that. I'll do my best to post them all again this year too...)
Mobile Web Debugging Tips and Tricks - Ray Camden
Debugging is a pain.
Viewing your stuff
Edge Inspect
- an app
- a chrome plugin
Edge Inspect Features
Synchronized browsing
If you own 5 Android devices, an iPad, an iPhone, etc. Edge will let you open one web page and see it on ALL devices at the same time
Doesn't support form "post"
-- but you can do a form "get"
doesn't support sessions -- however you can "login" via the url (http://user:password@something)
you can also hide the browser chrome
can clear the cache (per device or for them all at 1 time)
For Edge to work, it needs a "friendly" network environment
--- so it can pass the "access code" between devices, so devices can talk to each other
--- so probably won't work on "real" large company networks
--- spend 20 bucks, buy a cheap usb wifi router, that works great
Remote Inspection
Chrome Dev tools-
-- can inspect the DOM in Chrome, as it runs on an attached mobile device
-- can write code in the console, and have it execute on the device
Screenshots
Just works
Collects Metadata about each screenshot (this was taken on iPhone running iOS17, on May 1st, etc)
All screenshots go into ONE folder, so remember to clean out old ones once in a while
Can also request s/s for just ONE of the attached devices
Can't run Edge Inspect on an emulator, have to run it on the "real" devices
Responsive Design
Edge Reflow
Updates on attached devices, LIVE as you do the design work
Responsive Indicator
Chrome Extension
Tells you when someone is using a responsive design
Flags / displays sites using media queries
So you can examine how other sites do responsive design, which "break points" they use, etc.
Reminder - extensions exist, lots of stuff already written for debugging, all kinds of stuff
go to the Chrome Extension store and search for what you need, there is probably already an extension for what you need.
Edge Code
the "branded" version of Brackets
slightly more stable but a little behind the Brackets code branch
when it hits 1.0 it will be "brackets plus some extensions"
June 17 -- will have a feature where Edge Code is "tied" to Edge Inspect. so you write code, and it -instantly- shows up in your attached devices.
All these apps are free, part of the creative cloud
http://html.adobe.com/edge/
Debugging JS / HTML / CSS / Performance
A mess
No console (kinda)
iOS has a console but it's hard to get to
every device / version can support different things differently
caniuse.com -- type in a feature, it tells you which browser/device supports it
but that's not enough. have to also worry about "does it support it bad/well/kinda"
Remote Debugging w/ iOS
Requires Safari
Requires iOS6 (and is enabled in the settings)
can be used w/ phone gap
can be used w/ the simulator
somewhat similar to chrome dev tools
if you're not using, say, "local" or "session", they won't even show up in the tools. (Chrome shows them, and they're just blank)
having multiple tabs open does similar "doesn't show it until you use it" behavior, which can be weird at first
More info - developer.apple.com
pretty good docs
Debugging Chrome + Android
this is nOT the Android browser
this is chrome only
requires the android sdk (because...google)
devices needs usb debugging enabled (because..google)
also have a long command line thing to type in
THEN go to chrome on desktop localhost:9222
does not work w/ the android simulator
Weinre
Web Inspector Remote
pronounced "winery"
works via script embed
once you have it installed, go do "weinre" at the command line
-- local weinre server
-- then add some code into your page source to do debugging
-- must remember to take that code OUT before you move to production
Last tips
cheat w/ your desktop
re-use the knowledge you have from the desktop
Chrome lets you edit JS code WHILE the page is still running. only works on desktop so do that to save time
check out Ripple chrome extension too
Don't HAVE to use jQuery. it's a tool that you may or may not need
jQuery is 80K. if you don't need it, don't add it to your app
document.queryselector can select an item on the page too. doesn't need an 80K download to do it.
Mobile Web Debugging Tips and Tricks - Ray Camden
Debugging is a pain.
Viewing your stuff
Edge Inspect
- an app
- a chrome plugin
Edge Inspect Features
Synchronized browsing
If you own 5 Android devices, an iPad, an iPhone, etc. Edge will let you open one web page and see it on ALL devices at the same time
Doesn't support form "post"
-- but you can do a form "get"
doesn't support sessions -- however you can "login" via the url (http://user:password@something)
you can also hide the browser chrome
can clear the cache (per device or for them all at 1 time)
For Edge to work, it needs a "friendly" network environment
--- so it can pass the "access code" between devices, so devices can talk to each other
--- so probably won't work on "real" large company networks
--- spend 20 bucks, buy a cheap usb wifi router, that works great
Remote Inspection
Chrome Dev tools-
-- can inspect the DOM in Chrome, as it runs on an attached mobile device
-- can write code in the console, and have it execute on the device
Screenshots
Just works
Collects Metadata about each screenshot (this was taken on iPhone running iOS17, on May 1st, etc)
All screenshots go into ONE folder, so remember to clean out old ones once in a while
Can also request s/s for just ONE of the attached devices
Can't run Edge Inspect on an emulator, have to run it on the "real" devices
Responsive Design
Edge Reflow
Updates on attached devices, LIVE as you do the design work
Responsive Indicator
Chrome Extension
Tells you when someone is using a responsive design
Flags / displays sites using media queries
So you can examine how other sites do responsive design, which "break points" they use, etc.
Reminder - extensions exist, lots of stuff already written for debugging, all kinds of stuff
go to the Chrome Extension store and search for what you need, there is probably already an extension for what you need.
Edge Code
the "branded" version of Brackets
slightly more stable but a little behind the Brackets code branch
when it hits 1.0 it will be "brackets plus some extensions"
June 17 -- will have a feature where Edge Code is "tied" to Edge Inspect. so you write code, and it -instantly- shows up in your attached devices.
All these apps are free, part of the creative cloud
http://html.adobe.com/edge/
Debugging JS / HTML / CSS / Performance
A mess
No console (kinda)
iOS has a console but it's hard to get to
every device / version can support different things differently
caniuse.com -- type in a feature, it tells you which browser/device supports it
but that's not enough. have to also worry about "does it support it bad/well/kinda"
Remote Debugging w/ iOS
Requires Safari
Requires iOS6 (and is enabled in the settings)
can be used w/ phone gap
can be used w/ the simulator
somewhat similar to chrome dev tools
if you're not using, say, "local" or "session", they won't even show up in the tools. (Chrome shows them, and they're just blank)
having multiple tabs open does similar "doesn't show it until you use it" behavior, which can be weird at first
More info - developer.apple.com
pretty good docs
Debugging Chrome + Android
this is nOT the Android browser
this is chrome only
requires the android sdk (because...google)
devices needs usb debugging enabled (because..google)
also have a long command line thing to type in
THEN go to chrome on desktop localhost:9222
does not work w/ the android simulator
Weinre
Web Inspector Remote
pronounced "winery"
works via script embed
once you have it installed, go do "weinre" at the command line
-- local weinre server
-- then add some code into your page source to do debugging
-- must remember to take that code OUT before you move to production
Last tips
cheat w/ your desktop
re-use the knowledge you have from the desktop
Chrome lets you edit JS code WHILE the page is still running. only works on desktop so do that to save time
check out Ripple chrome extension too
Don't HAVE to use jQuery. it's a tool that you may or may not need
jQuery is 80K. if you don't need it, don't add it to your app
document.queryselector can select an item on the page too. doesn't need an 80K download to do it.