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:

  

  • Twitter: @ryanseddon

  • Blog: thecssninja.com

  • Github: github.com/ryanseddon

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

Joe the barbarian (aka Joe Hewitt) brought a secret weapon, firebug

• Replace our alerts with console calls

  console.log("No longer do I block")

• Inspect the HTML and CSS, and make changes on the fly!

  

• Best of all we could set breakpoints and step through our code

  

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

jsconsole in action

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

Weinre in action

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!

Aardwolf in action

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

Opera remote debugging in action

How does it work - Opera

• Connects to remote device using Scope Transport Protocol (STP)

  Dragonfly <--> Scope Protocol <--> Device

• Communicates using JSON instructions

Webkit/Chrome

• Just as powerful as Opera

• Start Chrome with special flag

  --remote-debugging-port=9222 --user-data-dir=remote-profile

• Android 4+ has support for remote debugging via USB

• iOS6 will have support for remote debugging via USB

• Blackberry playbook and BBOS7 devices all have support

Chrome remote debugging in action

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

• Has landed in FF15 for Android

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

Thank you!

Any question?

• Slides:
  thecssninja.com/talks/remote_debugging/

• Links:
  http://bitly.com/pdrMyc

• Tweet:
  @ryanseddon

• Wiki:
  http://j.mp/remote-wiki