平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具。但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有developer Tool,只能傻傻的用alert来输出一些调试信息,修改了CSS样式也必须不断的刷新,文件多了有时候还得经常清缓存,效率极其低下。神啊,救救我吧!

  于是weinre出现了!它是一个基于nodejs的工具。可以把远程的页面运行情况映射到本地,在本地的浏览器中查看调试信息,修改的css样式也可以实时同步到远程页面上,欧耶!话不多说,赶快看看如何使用吧~

安装

  对于习惯在windows下开发的程序猿,看到nodejs总有一种隔海相望的感觉,但现在nodejs在windows下的支持已经比较完善了。我就是在win7下顺利配置好该环境。

  1. 首先保证你安装了nodejs环境,如果没有,先去官网下载安装。

  2. nodejs v0.10已经集成了npm,所以可以直接使用npm安装,在cmd中敲:npm install weinre -g。

  3. 安装完成后,你会在目录C:\Users\Administrator\AppData\Roaming\npm\node_modules下看到weinre,这便是它的主目录了。

  4. 在cmd中运行weinre --httpPort 8080 --all,然后打开浏览器访问127.0.0.1:8080,如果出现如下页面,就说明安装成功

使用

  在使用之前我们需要明白weinre中都有哪些角色:

  目标页面——我们真正要调试的页面,也就是要运行在移动设备上的页面

  调试端——我们的本地浏览器,在这里对目标页面进行调试

  服务器——监控目标页面和调试端的动作,向两端推送消息

  首先,weinre已经包含了一个http服务器,它的根目录就是C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web。该目录下放置目标页面和调试端页面。

  为了组织好你的目标页面,可以在当前目录下新建一个文件夹,如www。

  该目录下client即为调试端。

  使用weinre命令可以启动服务器,具体的选项可以参考官网http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html,挺简单,一般使用weinre --httpPort 8080 --boundHost -all- 就可以了。

  服务器启动后,在本地浏览器地址栏访问http://127.0.0.1:8080/client/即可打开调试端,界面如下:

  相信你不会陌生~ Targets即显示当前映射的远程页面,下面该把远程端运行起来了。

  在用移动设备访问你的目标页面前,还有一件事要做。在web/target下,有一个target-script-min.js文件,讲它引入你的目标页面头部,像这样:

<script src="../target/target-script-min.js" /></script>

  好了,可以用你的ipad来访问目标页面了,当连接到服务器之后,你会看到调试端有变化了:

  Targets下显示出了映射到的页面,绿绿的。然后可以点击你熟悉的标签来进行调试了~

要啥自行车?

  细细一看,不对呀?少了Sources一项,我要打断点怎么办?这功能目前还真没有,让我们期待它的出现吧。。。

  

在本地调试移动设备上的页面——神器weinre介绍的更多相关文章

  1. 解放双手:如何在本地调试远程服务器上的Node代码

    写在前面 谈到node断点调试,目前主要有三种方式,通过node内置调试工具.通过IDE(如vscode).通过node-inspector,三者本质上差不多.本文着重点在于介绍 如何在本地通过nod ...

  2. 如何通过Chrome远程调试android设备上的Web网站

    网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模 ...

  3. 使用Chrome(PC)调试移动设备上的网页

    最早开始调试移动端网页时,本人都是采取PC上改几行代码,手机上刷新一下看效果这种笨方法来开发的,效率低而且容易让人抓狂.最近偶然发现原来可以使用PC上的浏览器来调试移动设备,不由得感叹相逢恨晚. 工具 ...

  4. NodeJS学习笔记 进阶 (6)本地调试远程服务器上的Node代码(ok)

    https://github.com/chyingp/nodejs-learning-guide

  5. 本地调试H5页面

    摘要 详细讲述微信H5页面调试(安装在安卓或iOS手机上的),钉钉内H5页面的调试,QQ.微博以及各浏览器上H5页面的调试方法 背景 大学毕业快要一年了,用leader的话说我也是有一年开发经验的前端 ...

  6. 理解WebKit和Chromium: 调试Android系统上的Chromium

    转载请注明原文地址:http://blog.csdn.net/milado_nju 1. Android上的调试技术 在Android系统上,开发人员能够使用两种不同的语言来开发应用程序,一种是Jav ...

  7. 远程调试 Android 设备使用入门(谷歌翻译版)

    移动前端调试方案(Android + Chrome 实现远程调试) 目录 要求 第 1 步:发现您的 Android 设备 第 2 步:从您的开发计算机调试 Android 设备上的内容. 更多操作: ...

  8. 怎样用fiddler2捕获移动设备上的http或者https请求

    调试移动设备上的问题.看不到发送的请求和得到的响应是比較难过的,fiddler能够实现样的功能. 原理: 在PC上启动fiddler.将手持设备的网络代理改成fiddler. 这样全部的请求和响应都经 ...

  9. 如何在移动设备上调试html5开发的网页

    在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同 ...

随机推荐

  1. 3.awk数组详解及企业实战案例

    awk数组详解及企业实战案例 3.打印数组: [root@nfs-server test]# awk 'BEGIN{array[1]="zhurui";array[2]=" ...

  2. python浅谈正则的常用方法

    python浅谈正则的常用方法覆盖范围70%以上 上一次很多朋友写文字屏蔽说到要用正则表达,其实不是我不想用(我正则用得不是很多,看过我之前爬虫的都知道,我直接用BeautifulSoup的网页标签去 ...

  3. loadrunner性能测试---添加windows多台压力机

    添加多台压力机 1.前置条件 1)保证压力机上都安装了loadrunner Agent,并启动,状态栏中会有小卫星.       2)添加的压力机与controller所在机器是否在同一个网段,建议关 ...

  4. 首页大图淡入淡出效果工具flexslider

    网站首页放几张高清大图轮流播放展示是目首页设计的流行做法,虽然woothemes.com已经公布了比较成熟的flexslider工具,但本着造轮子的心态,我也做了一个自己的flexslider,当然我 ...

  5. 烂泥:ubuntu 14.04搭建OpenVPN服务器

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 公司分部需要连接公司内部的服务器,但是该服务器只允许公司内部的网络访问. 为了解决这个问题,打算使用VPN.对于VPN以前使用最多的是PPTP这个解决方案 ...

  6. LVM 管理减少swap分区空间增加到根分区

    简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,它由Heinz Mauelshagen在Linux 2.4内核上实现 ...

  7. nginx服务傻瓜搭建

    nginx服务傻瓜搭建 安装步骤: 一.先准备好相关源码包和程序包,如下图 所有包都在云服务器的/src目录下. 二.安装 1.安装nginx服务器,支持vod stream.fileupload c ...

  8. MySql in子句 效率低下优化

    MySql in子句 效率低下优化 背景: 更新一张表中的某些记录值,更新条件来自另一张含有200多万记录的表,效率极其低下,耗时高达几分钟. where resid in ( ); 耗时 365s ...

  9. LA 3231 - Fair Share

    You are given N processors and M jobs to be processed. Two processors are specified to each job. To ...

  10. 基于GPU的高分一号影像正射校正的设计与实现

    一 RPC正射校正的原理 影像正射校正的方法有很多,主要包含两大类:一类是严格的几何纠正模型,另一类是近似几何纠正模型.当遥感影像的成像模型和有关参数已知时,可以根据严格的成像模型来校正图像,这种方法 ...