By Ryan Seddon
The run down
-
A bit of history
-
Mobile debugging
-
Remote debugging
Who Am I?
-
Senior Developer @ Seek
-
Developer on Modernizr
-
Stalk Me:
A bit of History
Dark days layed ahead for web developers
We had to rely on alerts and sometimes cryptic error messages
But from the ashes a new browser was born. Phoenix, Firebird, Firefox
One gallant individual rolled into town ready for a fight
Joe the barbarian
Joe the barbarian (aka Joe Hewitt) brought a secret weapon, firebug
Mobile debugging
Built in dev tools are shitty
-
Well most are shitty
-
Heaps of devices
-
...and we usually end up like this
How can I possibly test all these devices?
-
Emulators
-
Aren't always reliable or available
-
But please keep making them better device people
Cloud device access
-
You can access real devices over the internet!
-
Perfectomobile.com
-
DeviceAnywhere.com
-
Lots of devices available
Perfecto Mobile
-
In browser remote device testing
Device Anywhere
-
Uses an application but very similar, better touch support
Remote debugging
Remote what?
-
Communicate with external devices
-
Remotely execute & capture code.
-
Break code execution
-
Inspect html, css and make live edits
Lets look at what developers are doing
jsconsole
-
Javascript console in the browser
-
Remotely connect to devices and execute code
-
Captures any console calls and errors
How does it work - jsconsole
-
Injects iframe
-
Uses postMessage
-
Server Sent Events (SSE) or XHR for older browsers
Weinre
-
Funny name, awesome tool. WEb INspector REmote
-
Uses stripped down webkit inspector for its front-end
What can Weinre do?
-
More powerful, allows you to inspect HTML and CSS
-
Execute javascript on the remote device
-
Part of the phonegap project
-
Hosted version at debug.phonegap.com
-
JSFiddle.net recently added support
How does it work - Weinre
-
Uses XHR polling, needs support of CORS to work.
-
Communicates instructions using JSON-able objects.
-
Plans to switch to node.js + socket.io
Aardwolf
-
Remote javascript debugger, with a twist
-
Like JSConsole you can remotely execute and capture javascript
-
Step through your code! Breakpoints, watches and callstacks
-
Experimental and therefore not 100% stable.
-
Could, maybe, see this integrate into weinre!
How does it work - Aardwolf
-
Rewrites your code on the server and injects debugger hooks
function holla(arg, arg) {
// Stuff
}
function holla(arg, arg) {
aardwolf.updatePosition(
'/holla.js',
1,
false,
function(aardwolfEval){
return eval(aardwolfEval);
}
);
}
-
Breaks code execution using synchronous XHR calls
-
Uses Node.js as the backend
Lets look at what browser vendors are doing
Opera
-
Support for remote debugging, since 2008
-
Dragonfly can remotely connect to an Opera mobile browser
-
Is very powerful
- Breakpoints
- Inspect HTML & CSS
- Anything that can be done on the desktop can be done remotely
How does it work - Chrome
-
Browser acts as a socket server
-
Any webpages visited will show up in inspector
http://localhost:9222/
-
Communicates instructions via structured JSON
request: {
"id": <number>,
"method": "Debugger.resume"
}
response: {
"id": <number>,
"error": <object>
}
-
Great documentation ♥
Mozilla Crossfire/Debug API
-
Crossfire is an experimental plugin for Firebug and other browsers
-
Implements a JSON based protocol
-
Documentation sucks ☹
-
New Debugger API can be decoupled from browser instance
-
That means remote debugging over a network will be easy
-
Crossfire the experiment, Debug API the real deal
-
A very early look at remote debugging on FF mobile
-
Microsoft
-
Gotcha
-
But seriously they've done a 180° spin with IE9 & 10
-
Would probably have something in the works using visual studio
-
Purely speculating, couldn't find much info.
-
The Eclipse JavaScript Development Tools (JSDT) project is working on a Crossfire plugin for IE
Remote fragmentation
-
Three browser vendors and three ways of doing it
-
Spec it out and work on a common solution
-
WebKit Remote Debugging Protocol (WIP)
-
Mozilla has the Remote Debugging Protocol
-
Opera uses their Scope Transport Protocol (STP)
-
Browser Testing and Tools Working Group
←
→
/
#