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.
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.
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
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:
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
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
On your desktop computer you will see a new client connected to weinre server:
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.
Resource tab is limited to Session Storage, Local Storage and Databases.
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.
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.
The only one configuration step is to set a port number.
In Opera Mobile navigate to:
In the debug window fill in IP address of your desktop computer and the chosen port number, tap
You'll be able to debug any opened website in Mobile Opera via the desktop Dragonfly.
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
After restarting, Firefox will reveal a new option in the menu bar (tools -> web developer):
You have to enable the same property in Firefox for Android. When you navigate to the
about:config type in a search box
You will see a list of devtools properties, set the
true and the
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.
The web console will be available in the version 19. Debugger will support CSS/Network etc., better late than never.