SlideShare a Scribd company logo
1 of 5
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.

More Related Content

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

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

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