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

adobe shadow:

我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,JavaScript,DOM元素和CSS样式的调试。但是,当我们为移动Web站点或应用进行调试时,这些工具就很不方便,因为不知道在手机上或者pad看到的效果是怎样的?
       
       解决方案一: adobe shadow
       
       我们先来安装Adobe Edge Inspect CC 
     (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:
      手机安装完成后打开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一样。

调试WEB APP多设备浏览器的更多相关文章

  1. 调试WEB APP多设备浏览器(转)

      方法:adobe shadow  \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,J ...

  2. 让你在PC上调试Web App,UC浏览器发布开发者版

    目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实. 因此,UC使用技术将手机网页调试信息分离,实现一种能在大屏幕.高配置P ...

  3. 在GOOGLE浏览器中模拟移动浏览器 调试Web app

    在此记录下,以便在今后的工作中用到. 首先通过F12 or Ctrl+Shift+i,打开开发者工具,点击开发者工具面板的 (show  drawer)按钮,出现如下图所示的面板: 切换至Emulat ...

  4. web app 禁用手机浏览器缓存方法

    开发过web app的同学,特别是前端人员,都碰到这烦人的事情,JS或CSS代码改变,可手机浏览器怎么刷新都不更新,手机浏览器的缓存特别恶劣. 所以今天贴个方法解决这问题.记得,本地调试的时候贴上,上 ...

  5. 夜神模拟器调试web APP

    前言:之前工作之余的时间自己做了一个web APP,但是都是在浏览器上调试的,这次想看看在手机上啥效果,所以下载了一个夜神模拟器 一.下载夜神模拟器 https://www.yeshen.com/ 二 ...

  6. 远程调试 Azure Web App

    当我们将 Web App 部署在 Azure 上时,如果能够实现远程调试,将会极大的提高我们修复 bug 的效率.Visual Studio 一贯以功能强大.易用著称,当然可以实现基于 Azure 应 ...

  7. VS 远程调试 Azure Web App

    如果能够远程调试部署在 Azure 上的 Web App,将会极大的提高我们修复 bug 的效率.Visual Studio 一贯以功能强大.好用著称,当然可以通吃基于 Azure 应用的创建.发布和 ...

  8. Web App和Native App 谁将是未来

    未来是Web App的天下,还是Native App的天下?作为设计师,我们是应该努力把客户端的体验提升到最优,还是在网页应用层面上做更多的设计?这个一直是大家关心的话题.那么,我们首先应该立体的认识 ...

  9. 何为Web App,何为Hybird App

    这些概念听起来很火,当下也很流行,真正理解起来却并非易事.如果让我来全面的解释Web App和Hybird App,我觉得还有些困难. 这篇文章只是我深入了解移动领域开发过程中的不断整理和总结,其中涉 ...

随机推荐

  1. 用Access作为后台数据库支撑。

    /// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称&l ...

  2. Fragment详解之三——管理Fragment(1)

    相关文章: 1.<Fragment详解之一--概述>2.<Fragment详解之二--基本使用方法>3.<Fragment详解之三--管理Fragment(1)>4 ...

  3. Portlet简述

    一.Portlet是什么? Portlet是基于java的web组件,由portlet容器管理,并由容器处理请求,生产动态内容.Portals使用portlets作为可插拔用户接口组件,提供信息系统的 ...

  4. Linux定时,计划任务cron

    假如你有一些任务要定期执行,比如清理磁盘.删除过期文件.发送邮件和提醒,这个时候可以用cron来实现. crond是后台进程,而crontab则是定制好的计划任务表. 启动与停止 查看状态/sbin/ ...

  5. JavaScript中设置元素class的三种方法小结

    第一.element.setAttribute('class','abc');  第二.element.setAttribute('className', 'abc') : 第三.element.cl ...

  6. Android性能优化之布局优化

    最新最准确内容建议直接访问原文:Android性能优化之布局优化 本文为Android性能优化的第二篇——布局优化,主要介绍使用抽象布局标签(include, viewstub, merge).去除不 ...

  7. Ajax实现点击省份显示相应城市

    功能:不用级联效果,自己写ajax,从接口读取省份城市数据,实现点击省份显示相应城市.后端根据省份ID,给前端返回城市. 一.DOM结构(套用blade模板) <div class=" ...

  8. Java 生成16/32位 MD5

    http://blog.csdn.net/codeeer/article/details/30044831

  9. 贪心+模拟 Codeforces Round #288 (Div. 2) C. Anya and Ghosts

    题目传送门 /* 贪心 + 模拟:首先,如果蜡烛的燃烧时间小于最少需要点燃的蜡烛数一定是-1(蜡烛是1秒点一支), num[g[i]]记录每个鬼访问时已点燃的蜡烛数,若不够,tmp为还需要的蜡烛数, ...

  10. 【转】如果成为一个牛比的BI售前

    转自:天善智能 没有最厉害,只有更厉害啊.也没有一定哪儿厉害,会因人定制各有不同啊.打个比方,如果你长得很庄重,年长,光头或布满银丝,然后以专业的态度,以饱满的激情去跟你客户宣讲,杀伤力巨大.所以,卖 ...