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


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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

  1. 1. Use your own Weinre server with Adobe Shadow – Step by stepActual blog post link: that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using yourown Weinre debug server with Shadow. What it does is that it fastens up the connection time and reduces the waittime when you are using the default Weinre debug server that Adobe has hosted on their servers. So if you have alocal instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadowinstead of using the remote debug server hosted by Adobe at So let’s seehow 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 fileand Java installed in your computer. I have a full detailed tutorial on setting up and using Weinre in one of myearlierpost. So please have a look at it and set up the server. You can check out the “Configuring and running theWeinre debug server” section in the post. Assuming that you have the server set it up on your computer, then youneed 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 outthe port and the details from the command prompt after you have run the server. The screenshot below shows myinstance,So my server is listening to port number 8080 which is normally the port that Weinre server listens to. If this port isbusy you can also manually specify a port number, for that please check my previous tutorial. Now, coming back tothe verification of server actually running, you can navigate to http://your-ip:8080 and check if the default Weinreserver page is opening. If you can see a page as shown in image below that means your server is up and runningand you are good to go.
  2. 2. Now that you have a Weinre server instance running in your computer you can specify this path in the Adobe Shadowoptions page. So lets see how to do that. I assume that you already have Adobe Shadow set it up and know how touse Adobe Shadow. I have a tutorial for that, you can check that out (although its a bit old but the process remainssame). Or you can check out the Adobe Labs page for Shadow:’s now focus on setting up your local Weinre debug server with Shadow, I will go step – by- step here1) Launch the Adobe Shadow helper application in your computer. From Shadow release 4 onward, Shadow lives inthe taskbar notification area in Windows 7 and the menu bar on Mac OSX. Once you have run the helper applicationthe 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. 3. 4) You can see a select list under Weinre Server. By default the value selected will be Default(Adobe) which meansthat 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 upyour Weinre server’s path (you did open the server path earlier in your browser. So the same path goes here) andthen Save it. Now Shadow will know to use your local Weinre debug server for remote debugging. With a localinstance of debug server running the overall process of debugging and mobile-computer communication is muchfaster.Then for remote debugging your mobile web application open the remote inspection window (click on the remoteinspection button) for the target mobile device,
  4. 4. After that the Weinre web inspector will open and you can see your mobile device connecting to the local Weinreserver running as shown below,Now that everything is set up click on the Elements tab on the weinre web inspector window and start makingchanges to the HTML markup, or change CSS styles. Open the Console window to check for javascript console.logmessages.
  5. 5. This is it. Now, you should be able to use your own local Weinre debug server with Adobe Shadow. In case you haveissues you can always revert back to the default Weinre server that Adobe has hosted.