1. 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.

2. 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.

3. 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,

4. 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.

5. 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.