Categories
Code

Quick and Dirty way to view page source on a Mobile Phone Emulator Browser

I’m not sure if this is even a problem that needed a solution but I needed to get the source code off of an Android Emulator running version 2.3.3 and using the stock Android Browser.   There isn’t a view source capability on the browser, and other methods that include displaying source code in a alert box seem didn’t seem to be useful.

The instructions in this post will show you how to install an open-source tool called weinre (yes. ok. pronounced winery but you, dear reader, will call it something else).     This tool will run on your desktop and allow you to view the dom and source for any pages that you view in a mobile device.  It’s written in node.js but if you have never used that or you don’t consider yourself a programmer, then dont worry!   If you’ve installed programs then you’re good to go.
First, Install Node
a) Install Node.js.   If you’re on Mac OS/X, you should use brew install node.   For Windows go to http://nodejs.org/download/ grab it and install it.
b) Install weinre (Home) .  This is the application that will support the debugging process and get the source.  This is a nodes package manager.  It’s very easy to install.  From a terminal or command enter without quotes “npm -g install weinre”;  If you are on Mac OS/X use “sudo npm -g install weinre” without quotes.

Then, Start up and Setup Weinre
c) run weinre:  weinre –httpPort 7897  –boundHost -all- –verbose      You’ll want to give a httpPort of something that is free on your system.  I happened to choose 7897

d) On your desktop browser, hit <MACHINE_ip>:7897  where machine ip is the ip address of your machine

d2) You’ll see a URL Bookmarker at the bottom.  This bookmark will need to be copied Android Device browser bookmarks.  Copy this into your clipboard and paste into a text editor on your desktop.   Ensure that the bookmark is pointing to the IP Address of your machine.  We’re going to make this as a bookmark on your emulator or device.

d3) On your desktop browser, hit <MACHINE_IP>:7897/client    This brings up the debug page.  Keep an eye on this page when you inject the bookmark later on.  You’ll see this page magically come to life when you hit the link in your Emulator Browser.

From here on out it depends on what device type you want to prepare this with.

Either you can follow Android 2.3.3 Emulator Browser steps..
e) Open up terminal and type telnet localhost 5554 (windows syntax might be different but you’ll just need to telnet into the android device)

f) Once you connect to telnet type the following string without quotes “sms send 1234 <paste javascript message in>”   You just texted yourself!

g) Open the Messages app.  We’re going to copy the message.    You’ll see a text message from 1234 there.  Hover your mouse over it, hold the left mouse button down and wait for the menu to come up.   Click Copy Message.

h) Go back to Android Browser.  Open bookmarks, Hold the bookmark icon to add it.  When Add bookmark comes up add Name as “Debug Page” and add location as the contents of the the android clip board by holding mouse down and selecting paste.

Or you can follow these steps for iPhone Emulator or Physical Device … (i’m sure it will work with 4.2.2 android)
e) On your physical device you can hit MACHINE_IP:7897

f) if you can do this then scroll to the bottom and copy the bookmark and add it to your device.  Steps vary depending on the device.

Viewing the Source Code for a Page
In this next set of steps, we’ll look at the source code for any page that you hit with the Android Emulator.

i) Hit any page you want to view in the  Android 2.3.3 browser emulator.

j) Now keep an eye on your desktop browser that is open to MACHINE_IP:7897/client while you do this step.  On your android browser open bookmarks and click the debug page.  This will inject some code into the page and make it available for Weinre to look at.    You’ll notice that hopefully the page becomes triggered and sees the target debug device.  What you did is send a message over to the Weinre server on your machine.  This message contains the HTML page that you were viewing on the Android Emulator.

k) Go to your desktop browser and click Elements.  You’ll see all the source tree for the page on the android browser.

l) Click Console and type in without the quotes ‘document.body.innerHTML’  There is your source.

At this point you’ve got your source, and you’ve got a way to drill around the dom to see exactly what’s being send to the Android Emulator.
NOTE: Android Emulator doesn’t have 127.0.0.1 pointing to the host machine.   You’ll have to use 10.0.2.2 while on the Android Browser to get ahold of the host machine.   There is more information at this great StackOverflow.com post: http://stackoverflow.com/questions/5806220/how-to-connect-to-my-http-localhost-web-server-from-android-emulator-in-eclips

If you want a wonderful deep dive analysis into several ways of getting source code from the browser, take a look at Tim Buschtöns’ wonderful “Debugging JavaScript on Android and iOS” article.

Leave a Reply