Use your own Weinre server with Adobe Shadow – Step by step

Actual blog post link: http://jbkflex.wordpress.com/2012/08/28/use-your-own-weinre-server-with-adobe-shadow-step-by-step/Now that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using your

own Weinre debug server with Shadow. What it does is that it fastens up the connection time and reduces the wait

time when you are using the default Weinre debug server that Adobe has hosted on their servers. So if you have a

local instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadow

instead of using the remote debug server hosted by Adobe at http://debug.shadow.adobe.com:8080/. So let’s see

how to do it.

First of all you will need to have the Weinre server set up in your computer. For that you will need the weinre jar file

and Java installed in your computer. I have a full detailed tutorial on setting up and using Weinre in one of my

earlierpost. So please have a look at it and set up the server. You can check out the “Configuring and running the

Weinre debug server” section in the post. Assuming that you have the server set it up on your computer, then you

need to start it. You can check my previous post for that too. Its all there.

Then you can verify if the server has started. Open your browser and navigate to http://<yourip>:port where <yourip>

is your machine’s ip address and port is the port number where the Weinre debug server listens to. You can find out

the port and the details from the command prompt after you have run the server. The screenshot below shows my

instance,

So my server is listening to port number 8080 which is normally the port that Weinre server listens to. If this port is

busy you can also manually specify a port number, for that please check my previous tutorial. Now, coming back to

the verification of server actually running, you can navigate to http://your-ip:8080 and check if the default Weinre

server page is opening. If you can see a page as shown in image below that means your server is up and running

and you are good to go.

Now that you have a Weinre server instance running in your computer you can specify this path in the Adobe Shadow

options page. So lets see how to do that. I assume that you already have Adobe Shadow set it up and know how to

use Adobe Shadow. I have a tutorial   for that, you can check that out (although its a bit old but the process remains

same). Or you can check out the Adobe Labs page for Shadow: http://labs.adobe.com/technologies/shadow/

Let’s now focus on setting up your local Weinre debug server with Shadow, I will go step – by- step here

1) Launch the Adobe Shadow helper application in your computer. From Shadow release 4 onward, Shadow lives in

the taskbar notification area in Windows 7 and the menu bar on Mac OSX. Once you have run the helper application

the Shadow icon in Google Chrome turns blue. This means Shadow is activated.

2)  Now right click on the Shadow icon in Google Chrome and select Options.

3) After selecting options it opens up an options page as shown below.

4) You can see a select list under Weinre Server. By default the value selected will be Default(Adobe) which means

that Adobe Shadow is using the Weinre debug server hosted by Adobe. There is one more option in the select list –

Custom. Select that and you will see a textfield on the right where you can specify your local Weinre server’s path.

As you can see in the image, I have specified the path of my local Weinre server in the text box. Similarly, you fill up

your Weinre server’s path (you did open the server path earlier in your browser. So the same path goes here) and

then Save it. Now Shadow will know to use your local Weinre debug server for remote debugging. With a local

instance of debug server running the overall process of debugging and mobile-computer communication is much

faster.

Then for remote debugging your mobile web application open the remote inspection window (click on the remote

inspection button) for the target mobile device,

After that the Weinre web inspector will open and you can see your mobile device connecting to the local Weinre

server running as shown below,

Now that everything is set up click on the Elements tab on the weinre web inspector window and start making

changes to the HTML markup, or change CSS styles. Open the Console window to check for javascript console.log

messages.

This is it. Now, you should be able to use your own local Weinre debug server with Adobe Shadow. In case you have

issues you can always revert back to the default Weinre server that Adobe has hosted.