Debug Web App multi-device browser

Method: Adobe shadow \ Opera remote debugging \ Weinre

Adobe Shadow:

We often use Firefox's firebug or Chrome developer tools for Web debugging pages, javascript,dom elements and CSS style debugging.              But when we debug for a mobile Web site or app, these tools are inconvenient because we don't know what it looks like on the phone or on the pad. Solution One: Adobe shadowLet's start by installing Adobe Edge Inspect cc:https://creative.adobe.com/products/inspect?promoid=kfkmn (tips: Install adobe creat before downloading I have to download to Adobe edge Inspect cc http://html.adobe.com/edge/inspect/) to open Adobe Edge Inspect cc and double-click the taskbar icon to Prompt to install the chrome plugin, or install the plugin yourself, plug-in address: https://chrome.google.com/webstore/detail/adobe-edge-inspect-cc/ Ijoeapleklopieoejahbpdnhkjjgddem?hl=zh-tw Install apps on the phone after the Windows Client installation is complete:ios:https://itunes.apple.com/tw/app/id498621426 android:https://play.google.com/store/apps/details?id= COM.ADOBE.SHADOW.ANDROID&HL=TW when the phone is installed, turn on edge Inspect, Click the Add button in the top right cornerInput IP connection successfully display verification code chrome plugin input Verification code: the phone can sync the chrome page in real time to see the debugging on the real-time effect of the phone. Solution Two: UC Browser Development versionSpecific to the UC website to understand: http://www.uc.cn/business/developer/
We've been expecting this: 2. Use Weinre to debug the mobile Web

The debugging of mobile web has always been a problem, can use simulator to assist debugging in the prophase, but it is very headache to the debugging stage of the real machine. And Weinre is the weapon to solve this problem.
Weinre is intended to be a web Inspector remote, which is a long-range debugging tool. Functions and Firebug, Webkit inspector similar, can help us to change the page elements, styles, debugging JS, and so on, below is a brief introduction of how to use.

First, installation and operation of Weinre
First download weinre:
Https://github.com/callback/callback-weinre/archives/master

Take Windows system as an example:
1. Download the Java version of Weinre Weinre-jar-1.6.1.zip and unzip it;
2. Run cmd, in the path where the Weinre folder is located, run the code:

java -jar weinre.jar --httpPort 8081 --boundHost -all-

The message will appear after success (do not close cmd):

3. Use the WebKit kernel browser (chrome, Safari) to access http://localhost:8081/, so you can see Weinre's basic information without any surprises.

Second, add debug Target
In order for the page to be debugged to be weinre detected, there are two ways to add debug Target:
1.Target Script
This method needs to add a JS to the Debug page:

http://localhost:8081/target/target-script-min.js#anonymous

After adding to the mobile device to access the page, if you debug the page less can use this method, if more than recommended the second method

2.Target bookmarklet
This method is to save a section of JS to the mobile device bookmarks, can be found in the http://localhost:8081/JS:

javascript:(function(e){e.setAttribute("src","http://localhost:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

I saved this JS to the name debug bookmark, and then I use my mobile device to access the page I want to debug, say Http://iinterest.net, and finally click on the debug bookmark to OK.

Third, the Real machine debugging
Back to the http://localhost:8081 page, click on the "Debug Client User interface:" link into the Weinre debug interface, if you have successfully added the debug Target, you can see it here.

Next we can debug the page in the way we know it, and the debug results will be displayed on the mobile device in real time.

Mac system is simpler, without the command line, run the app directly to start Weinre, the next step is the same as Windows.

Debug Web App multi-device browser