调试WEB APP多设备浏览器

方法：adobe shadow  \ opera远程调试\ weinre

 

adobe shadow:

我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面，JavaScript，DOM元素和CSS样式的调试。但是，当我们为移动Web站点或应用进行调试时，这些工具就很不方便，因为不知道在手机上或者pad看到的效果是怎样的？

       

       解决方案一： adobe shadow

       

       我们先来安装Adobe Edge Inspect CC 

       下载地址：https://creative.adobe.com/products/inspect?promoid=KFKMN

     （tips：下载前要先安装Adobe Creative Cloud才能下载到Adobe Edge Inspect CC http://html.adobe.com/edge/inspect/ ）

       

      下载后打开Adobe Edge Inspect CC，双击任务栏图标就会提示安装chrome插件，或者自行安装插件，插件地址：https://chrome.google.com/webstore/detail/adobe-edge-inspect-cc/ijoeapleklopieoejahbpdnhkjjgddem?hl=zh-TW

 

      安装完成windows客户端后在手机端安装apps：

      IOS:https://itunes.apple.com/tw/app/id498621426

      android:https://play.google.com/store/apps/details?id=com.adobe.shadow.android&hl=tw

      手机安装完成后打开Edge Inspect，点击右上角添加按钮

      

      输入IP

     连接成功显示验证码

     Chrome插件输入验证码：

     

 

     手机即可实时同步chrome的页面到手机上看到调试的实时效果了。

 

         解决方案二：

         UC浏览器开发版

      

      具体可至UC官网了解：http://www.uc.cn/business/developer/

 

    我们一直期望是这样的：

     

 

2、使用Weinre调试Mobile Web

移动web的调试一直是个难题，前期可以使用模拟器来协助调试，但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。
Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等，下面就简单介绍下如何使用。

一、安装及运行Weinre
首先下载Weinre：
https://github.com/callback/callback-weinre/archives/master

以Windows系统为例：
1.下载Weinre的Java版本 weinre-jar-1.6.1.zip 并解压；
2.运行cmd，在weinre文件夹所在路径，运行代码：

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

成功后会出现相应信息(不要关闭cmd)：

3.使用webkit内核浏览器(chrome、safari)访问 http://localhost:8081/，不出意外的话可以看到weinre的基本信息。

二、添加Debug Target
为了让需要调试的页面被weinre检测到，需要添加Debug Target，有两种方法：
1.Target Script
该方法需要在调试的页面中增加一个js：

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

添加后在移动设备中访问该页面即可，如果调试的页面比较少可以使用这个方法，如果多的话推荐第二种方法

2.Target Bookmarklet
该方法是将一段js保存到移动设备的书签中，可以在 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);

我将这段js保存到名为Debug书签中，然后使用移动设备访问我想要调试的页面，比如说 http://iinterest.net，最后点击Debug书签就OK了。

三、真机调试
回到http://localhost:8081页面，点击“debug client user interface:”链接进入weinre的Debug界面，如果成功添加了Debug Target，这里可以看到它。

接下来我们就可用自己熟悉的方式调试页面了，并且调试结果会实时显示在移动设备上

MAC系统更为简单，不用命令行，直接运行app即可启动weinre，接下来的步骤和windows一样。