Chrome for Android

Inspecting remote devices with the desktop Chrome Dev Tools is the best option so far. The only disadvantage is of course limitation to Android 4+ devices, older versions are left behind. Now, all you need is to have Android SDK on your desktop and Chrome on your mobile device. As usual you communicate via ADB so connect your device using USB wire. Launch Chrome and enable debugging Settings > Advanced > Developer tools > Enable USB Web debugging.

Remote Debugging for Mobile Web

On your desktop computer enter the platform-tools SDK's subfolder and type:


    adb devices
    adb forward tcp:9222 localabstract:chrome_devtools_remote

Navigate to localhost:9222 and you'll be able to inspect all the pages opened on a mobile device. All the tabs of Chrome Dev tools are fully usable.

Remote Debugging for Mobile Web

Remote Debugging for Mobile Web

Weinre

Weinre uses the user interface code from the Web Inspector project at WebKit, so it runs only on WebKit-based browsers. It fills a gap for remote debugging tools for Android 2.2+ native browser and iOS 4.2+ Mobile Safari. You can install Weinre using a node package manager:


    npm install weinre

Weinre server takes a few arguments. Most usefull are httpPort and boundHost. boundHost enables access to the server from any other machine, because its default value is localhost, it's useful to change it. To list all of the options type weinre --help. So to start remote debugging choose a free port and type in your ip address/hostname.


    weinre --httpPort [portNumber] --boundHost [hostname | ip address]

In your browser navigate to the weinre server. You'll find a link to the script, which you can inject into your site, while you are in development environment:


    <script src="http://<ADDRESS>/target/target-script-min.js#anonymous"></script>

There is also bookmarklet, which allows you to inspect any web page you are viewing. On your mobile device, open Android Default Browser and navigate to the weinre server. Under the Target Bookmarklet section tap and hold link weinre target debug and choose copy link URL option. Now add new bookmark by pressing star icon. Type in label weinre and in location address paste javascript code from your clipboard. Press OK to save the bookmark.

Remote Debugging for Mobile Web

On your desktop computer choose the link from Access Points section of weinre server debug client user interface. On mobile device navigate to any site, click a bookmarklet icon and choose a newly added weinre. On your desktop computer you will see a new client connected to weinre server:

Remote Debugging for Mobile Web

You can click on it, if you have multiple clients connected you can switch between them just clicking on their name. In the Elements Tab you will find the markup of debugging website, and CSS.

The Resource tab is limited to Session Storage, Local Storage and Databases. The Network tab is limited to XHR request only.

Weinre's inspector is very limited. It doesn’t work on all webkit browsers, but it is the best options for older Android/iOS devices.

Adobe Edge Inspect

Adobe released its own inspector. They use a hosted weinre server on Adobe.com. Don't know why I should use it while I can run a local weinre server anywhere, on any OS. The main advantage is the synchronized browsing and refreshing on all connected devices, but usually you’ll be searching for a bug on a specific device. Moreover, this option is not for free. You have to buy Creative Cloud plan or pay monthly for upgraded version of Edge Inspect.

Opera Dragonfly

Debugging Opera Mobile is available only on Android devices. This is the most user friendly debugging option. On your desktop Opera open Dragonfly Ctrl + Shift + I and choose the Remote Debug Configuration icon.

Remote Debugging for Mobile Web

The only one configuration step is to set a port number.

In Opera Mobile navigate to:

opera:debug

In the debug window fill in IP address of your desktop computer and the chosen port number, tap connect button. You'll be able to debug any opened website in Mobile Opera via the desktop Dragonfly.

Firefox

You can debug Android devices using Firefox too. Connect your mobile device via the USB to a host machine and forward the TCP connection using adb (yes, you need Android SDK):

adb forward tcp:[portNumber] tcp:[portNumber]

On your desktop computer navigate to about:config and set the devtools.debugger.remote-enabled property to true. After restarting, Firefox will reveal a new option in the menu bar (tools -> web developer): Remote Debugger.

You have to enable the same property in Firefox for Android. When you navigate to the about:config type in a search box devtools. You will see a list of devtools properties, set the devtools.debugger.remote-enabled to true and the debugger.force-local to false.

To start a remote connection, you have to know the IP address of your mobile device (Settings -> Wi-Fi -> tap a name of your active connection). On your desktop choose the Remote debugger and fill in IP address of your mobile device and a forwarded via adb port number. You will see a connection prompt and you have 3 seconds to press OK.

In the Firefox 16 the remote debugger is limited to Javascript only and you might be disappointed.

The web console will be available in the version 19. Debugger will support CSS/Network etc., better late than never.