Mobile Web调试工具Weinre使用说明

1、安装weinre
weinre官方网站:http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
官方给出的安装方式有两种:npm安装跟下载安装包进行安装。
我们使用npm安装方式为例进行安装。

1)我们需要先安装node.js。node.js官方网站:https://nodejs.org/ 
可以根据你的操作系统选择相应的版本进行下载。这里我以windows10(64)为例进行安装。
安装完成,打开Windows命令提示符,输入‘npm’命令回车。
如果出现如上图信息,表示node.js安装成功。

2)下面通过npm安装weinre。
打开Windows命令提示符,输入“npm install -g weinre ”命令回车。

如果出现如上图信息,表示weinre安装成功。

3)安装完成后,需要在本地开启一个监听服务器,比如我目前的IP地址为:10.203.18.117。
打开Windows命令提示符,输入“weinre –httpProt 9999(输入自定义端口号) –boundHost 10.203.18.117(监听服务器IP地址) ”命令回车。
出现下图,表示监听成功。

 

2、访问weinre以及进行调试

1)在浏览器中,输入设置的监听地址:http://10.203.18.117:9999

2)  引入远程调用页面。

查看 监听地址中,Target Script说明的Example:
<script src="http://10.203.18.117:9999/target/target-script-min.js#anonymous"></script>
将该引用,放入到项目中。例如:..foxitsoftware\webpdf\viewer\webapp\mobile\index.html。
将example的JS代码,引入到index.html页面即可。

3)访问调用。

现在,我们使用手机来访问我们的项目地址。然后在查看刚刚点击进去的页面。

点击[Elements],即可查看HTML元素和修改对应的css代码了。

选中的样式,在手机中,会以粉色效果标注。

Ps:安装过程中,可能会出现的问题

笔者在打开Windows命令提示符中,输入“weinre”会提示【不是内部或外部命令,也不是可运行的程序或批处理文件。】
解决说明:

(1)需将weinre的安装路径(c:\Users\foxit\AppData|roaming\npm\)放入到node.js路径(笔者路径为C:\Program Files\nodejs)下。

如图所示:

(2)配置nodejs的环境变量

重新打开Windows命令提示符中,输入“weinre”就可以生效。

时间: 2024-10-22 09:11:21

Mobile Web调试工具Weinre使用说明的相关文章

Mobile Web调试工具Weinre (reproduce)

Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而Weinre就是解决这难题的利器. Weinre的本意是Web Inspector Remote,它是一种远程调试工具.功能与Firebug.Webkit inspector类似,可以帮助我们即时更改页面元素.样式,调试JS等,下面就简单介绍下如何使用.下面以以Windows系统为例: 一.首先确保

非常实用的mobile web application远程调试工具 weinre

在移动web应用中,由于没有类似chrome和firebug的调试工具,调试起来比在PC上相对麻烦一些,有时候只能反复进行修改比对,但使用weinre我们可以轻松做到远程调试的功能. 什么是weinre? 官方解释: we是指web,in是指inspector,re是指remote,合起来就是weinre. http://people.apache.org/~pmuellr/weinre/ 如何安装? weinre基于node,使用npm快速安装: npm install weinre 使用 使

转 Web移动应用调试工具——Weinre

如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web inspector),重新设计界面的工作往往事半功倍.本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具. Weinre是什么? Weinre代表We b In spector Re mote,是一种远程调试工具.举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素.样式表,或是查

Web移动应用调试工具&mdash;&mdash;Weinre

      如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web inspector),重新设计界面的工作往往事半功倍.本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具. Weinre是什么? Weinre代表We b In spector Re mote,是一种远程调试工具.举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素.样

Web移动应用调试工具——Weinre

如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web inspector),重新设计界面的工作往往事半功倍.本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具. Weinre是什么? Weinre代表We b In spector Re mote,是一种远程调试工具.举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素.样式表,或是查

Mobile Web 开发,布局必须用 table,这要写进手则

直到今天,JavaScript 的世界仍然洪荒. 比如说 Angular 的 ngView 是不能玩儿嵌套的. 试了 angular-ui-router,未果,因和 $locationProvider & ngRoute 的设置冲突.弃之. 是.没有克服不了的技术困难.如果有,绕过去就是了.所以,还是没有. 没有解决不了的技术问题.如果有,让它不是问题就是了.所以,还是没有. -------------------------- 何时冒出一个叫什么猎豹的浏览器?用的是 IE 的内核.IE 下,读

Automating mobile web apps

Automating mobile web apps If you're interested in automating your web app in Mobile Safari on iOS or Chrome on Android, Appium can help you. Basically, you write a normal WebDriver test, and use Appium as the Selenium server with a special set of de

mobile web retina 下 1px 边框解决方案

http://www.tuicool.com/articles/ZRv6bun 再谈mobile web retina 下 1px 边框解决方案 时间 2015-01-03 12:03:31  Hugo Web前端开发 原文  http://www.ghugo.com/css-retina-hairline/ 主题 WebKitiOSCSS 本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6

Web调试工具——Fiddler介绍

Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助. 阅读目录 Fiddler的基本介绍 Fiddler的工作原理 同类的其它工具 Fiddler如何捕获Firefox的会话 Firefox 中使用Fiddler插件 Fiddler如何捕获HTTPS会话 Fiddler的基本界面 Fiddler的统计视图 QuickEx