文档章节

Weinre mobile debugging on Windows

嘻哈开发者
 嘻哈开发者
发布于 2014/02/11 16:37
字数 788
阅读 49
收藏 0

Tales Of A (Former) SFU Computing Scientist

Views From The Hill

« ESXi 5.0 JMicron ATA Driver for non AHCI mode

Ubuntu 12.04 SSTP-Client installation »

Getting started with Weinre mobile debugging on Windows


Weinre (WEb INspector REmote) is a debugger for webpages that is designed to work remotely. This is especially helpful for debugging web pages that are running on mobile devices.

We are going to need several things to get weinre up and running. First we are going to install node.js, which will host the weinre webserver; next, we will install the node package manager (npm); then, finally we will install weinre.

Getting node.js

The easiest way to get node.js is to go to nodejs.org and download the windows installer (This has the added benefit of automatically installing npm. However, I preferred to skip the installer and get just the latest executable from the download site here: node.exe.

Installation

Getting npm

If you used the installer to get node.js, npm is already in node.js’s installation directory. Otherwise, head over to http://npmjs.org/dist/ and grab the most recent version (npm-1.1.44.zip) at time of writing. After downloading the file, unzip it to the same directory that contains the node.js executable.

Getting weinre

Next, open a command prompt and navigate to the directory that holds the node and npm executables. At this point, you have two options, you can use the weinre binary thats deployed on npmjs.org by issuing:

npm install weinre

Or you can provide a full url. Since, at time of writing, there are no official builds for weinre on the Apache mirrors, I would recommend just using the npmjs binaries as their location will not change as the transition to the incubator project continues. If you do want to specify a full url for installing weinre, you can get the up-to-date binary package locations from here.

Running

Now that weinre is installed, you can run it by opening a command window to your node.js executable directory and running:

node.exe node_modules\weinre\weinre --boundHost -all-

This will start a new weinre instance at http://localhost:8080, and it will listen on all your computers interfaces, which will allow remote clients (the mobile device) to connect to the server.

If a Windows firewall dialog pops up, you should grant access to node.js. Once weinre starts up, it should display a message such as:

2012-07-20T00:39:40.998Z weinre: starting server at http://localhost:8080

In the console.

Enabling weinre on the mobile device

After weinre starts, navigate to http://localhost:8080 in a WebKit-based browser (Such as Google Chrome). You will be presented with a dashboard showing access points and target scripts.

One gotcha is if you go to http://localhost:8080, the target script is going to display a localhost IP for the script file. This won’t work if we are debugging on a mobile device – we need to use the IP of the computer’s interface that connects it to the network. This can be determined by running the ipconfig command in a console.

For example:

C:\Users\Dustin>ipconfig------------Windows IP Configuration
 
 
Ethernet adapter Local Area Connection 2:
 
   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :
 
Ethernet adapter Local Area Connection:
 
   Connection-specific DNS Suffix  . : 
   Link-local IPv6 Address . . . . . : fe80::20cf:d407:7d2b:f8eb%10
   IPv4 Address. . . . . . . . . . . : 192.168.1.24
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . : 192.168.1.1

By navigating to my IPv4 address (http://192.168.1.24:8080), I can be sure that the mobile devices on my network will be able to access the weinre server.

To enable the mobile device to connect to the weinre server, you must add the target script to the code of the webpage. I’m developing using PhoneGap, so I simply pasted the target script into the header of my index.html file, and rebuilt my application.

Debugging with weinre

After building and deploying the updated app to my device, I simply run it on the device, and navigate to the client access point (eg: http://192.168.1.24:8080/client/#anonymous). Notice the url fragment anonymous. This must match on both the target script and on the client access point, as it provides a way to have multiple debug sessions, and to keep others from discovering your debug sessions if they are on the same network. More information can be found on the MultiUser page of the weinre site.

Debugging in Blackberry Webworks

Webworks doesn’t like the local weinre server – it’s expecting a publicly routable address. You can either open the appropriate ports on your router to let external devices access your winre instance, or you can use the public phonegap instance at debug.phonegap.com.


本文转载自:http://dustint.com/post/482/getting-started-with-weinre-mobile-debugging-on-windows

嘻哈开发者
粉丝 55
博文 122
码字总数 1563
作品 0
广州
程序员
私信 提问
如何调试 Android 手机网页

兵马未动,粮草先行。安排好 debug 工作的道理也一样,调试的基本工作务必先于开发之前搞得好,不然后果很严重……!哈哈,这样的开场白太那个了……其实实不相瞒,俺的实际情况是,到项目后...

sp42
2012/10/13
0
0
我想用手机测试自己写的web页面,该怎么做?

作者:不爱吃西红柿的鱼 链接:https://www.zhihu.com/question/37361845/answer/71674280 来源:知乎 一、IOS 移动端 (Safari开发者工具) 手机端:设置 → Safari → 高级 → Web 检查器 ...

hhj187
2016/10/16
133
0
Mac Phonegap + Weinre环境搭建

phonegap官网下载desktop app,并安装 下载并安装手机版的mobile app 安装npm,由于npm是随nodejs安装的,所以下载安装nodejs即可. 使用npm安装weinre 运行weinre 使用weinre 这样就可以实现...

蜡笔小白
2016/11/15
24
0
pc调试移动终端web代码(工具Weinre)

做移动web开发的同仁,多少都为各个浏览器困扰。基于手机浏览器的性能和各个开发商的私人考虑,我们现在在android、ios等系统还很难使用到完全统一的浏览器内核。无论是ucweb、chrome、safar...

嘻哈开发者
2014/02/11
254
0
Web移动应用调试工具——Weinre

由于前面介绍的方式不太给力,于是找到了资深的学长问了问,他告诉我有个叫weinre的插件很不错,在进一步了解,发现了这篇文章。 weinre官网:http://people.apache.org/~pmuellr/weinre/do...

Megan_zhou
2013/06/14
502
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot 操作ActiveMQ

一、消息队列中间件介绍 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合、异步消息、流量削锋等问题,实现高性能、高可用、可伸缩和最终一致性架构,是大型分布式系统不可缺少的...

zw965
3分钟前
1
0
xx

为什么会引入Storage(sessionStorage,localStorage,globalStorage) Web storage的目的是克服由cookie带来的限制,当数据需要严格控制在客户端上时,无须持续将数据发回服务器。主要是提供一...

五公里
12分钟前
2
0
Qt编写自定义控件57-直方波形图

一、前言 直方波形图控件非原创控件,控件大全中大概有20-30个控件非自己原创,而是参考了网上开源的代码,自己加以整理和完善,新增了插件的代码使得可以直接集成到QtDesigner或者QtCreator...

飞扬青云
12分钟前
1
0
或许你不知道的10条SQL技巧

这几天在写索引,想到一些有意思的TIPS,希望大家有收获。 一、一些常见的SQL实践 (1)负向条件查询不能使用索引 select * from order where status!=0 and stauts!=1 not in/not exists都不...

mskk
18分钟前
4
0
IntelliJ IDEA (Mac) 运行速度优化(JVM+localhost)

1.1. JVM 参数配置 打开 idea,菜单 –> help –> edit custom vm options,调整参数,重启即可。 具体调整参数: -Xms2g -Xmx2g -XX:ReservedCodeCacheSize=1024m -XX:+UseCompressedOops 1......

指尖Coding
27分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部