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 earlier post. 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 postAssuming 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&gt;: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.

Below are some of my previous tutorials that should help you.

  1. Debugging mobile web applications remotely with Weinrehttps://jbkflex.wordpress.com/2012/04/12/debug-mobile-web-applications-remotely-with-weinre/
  2. Adobe Shadow – another way of remote debugging mobile web apps in iOS and Androidhttps://jbkflex.wordpress.com/2012/04/16/adobe-shadow-another-way-of-remote-debugging-mobile-web-apps-in-ios-and-android/
  3. WEINRE – Web Inspector Remote Video by Patrick Muellerhttps://jbkflex.wordpress.com/2012/09/18/weinre-web-inspector-remote-video-by-patrick-mueller/

Update
Adobe Shadow is now Adobe Edge Inspect: Read the post and find out what changes has been made : https://jbkflex.wordpress.com/2012/09/27/adobe-shadow-is-now-adobe-edge-inspect/

One thought on “Use your own Weinre server with Adobe Shadow – Step by step

  1. […] Update 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, performance and keeps the remote traffic local. 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/. Read how to do it here. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s