博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在本地调试移动设备上的页面——神器weinre介绍
阅读量:3592 次
发布时间:2019-05-20

本文共 1727 字,大约阅读时间需要 5 分钟。

就是碰到一个问题:我在运行npm -g install weinre时命令行一直停在下面这两行不动。

npm http GET https://registry.npmjs.org/weinre/-/weinre-2.0.0-pre-HH0SN197.tgznpm http 200 https://registry.npmjs.org/weinre/-/weinre-2.0.0-pre-HH0SN197.tgz
看了一下,貌似是无法下载这个文件,后来看weinre官网还有一种安装方式是直接指定个文件,我就尝试着先把这个文件下载到本地,然后运行下面的命令:
npm -g install C:\weinre-2.0.0-pre-HH0SN197.tgzweinre-2.0.0-pre-HH0SN197.tgz
居然可以了。
 
 
原文链接:http://www.cnblogs.com/lvdabao/p/3436620.html
 

  平时写代码,最喜欢用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命令可以启动服务器,具体的选项可以参考官网,挺简单,一般使用weinre --httpPort 8080 --all就可以了。

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

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

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

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

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

你可能感兴趣的文章
JDK和JRE的区别
查看>>
zookeper正式集群搭建(非伪集群)
查看>>
linux定时备份mysql(可用)
查看>>
linux使用链接下载文件
查看>>
maven配置阿里云仓库
查看>>
配置maven本地仓库路径
查看>>
idea生成mybatis实体的方法
查看>>
idea逆向工程mybatis
查看>>
oracle纯url连接字符串
查看>>
oracle自动提交事务以及手动
查看>>
几分钟学会密码学(一)——维吉尼亚密码
查看>>
vulhub环境搭建+靶场使用
查看>>
Nginx 配置错误导致漏洞
查看>>
Webmin 远程命令执行漏洞
查看>>
Nginx越界读取缓存漏洞(CVE-2017-7529)
查看>>
DNS域传送漏洞——vulhub漏洞复现 007
查看>>
利用21端口的思路
查看>>
木马工作原理——病毒木马 002
查看>>
DHT11使用详解
查看>>
android
查看>>