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

npm http GET https://registry.npmjs.org/weinre/-/weinre-2.0.0-pre-HH0SN197.tgz
npm 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命令可以启动服务器,具体的选项可以参考官网http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html,挺简单,一般使用weinre --httpPort 8080 --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下显示出了映射到的页面,绿绿的。然后可以点击你熟悉的标签来进行调试了~

在本地调试移动设备上的页面——神器weinre介绍相关推荐

  1. window使用chrome调试ios设备的H5页面(Safari和APP)

    window使用chrome调试ios设备的H5页面(Safari和APP) 1:用管理员身份打开PowerShell,不同操作系统打开方式不太一样,win10的话在搜索栏搜索就能找到( 2:查看Po ...

  2. safari 调试 打印刚加载界面时缓存的log信息 iOS Safari调试iPhone设备上的网页

    文章目录 1.开启电脑端safari的调试 2.开启手机端iphone的safari调试 3.打印刚加载界面时的log信息:进入到要调试的网页后点击刷新(reload)就可以了 4.参考博客 1.开启 ...

  3. MIUI开启开发者模式以及使用chrome调试移动设备上打开的网页

    想利用chrome自带的调试功能调试小米3上打开的页面. 需要以下配备 1 PC上装有chrome 2 小米上装有chrome(PC上chrome版本最好与小米上的chrome版本一致.) 3 小米U ...

  4. Android 页面布局xd,页面布局(XD):小尺寸设备上的页面布局《 从设计到代码:布局设计 》...

    双击这个画板的名字,这个名字可以是中等尺寸,下面我们再创建一个小尺寸设备上的网站应用布局,按一下 a,选择创建一个手机尺寸的画板. 修改一下画板的名字,可以是 小尺寸. esc,再按一下 v,打开选择 ...

  5. h5微信本地调试 vue_VUE开发微信H5页面总结

    写在前面 刚入门前端的时候写过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫.现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录.防止自己以后再去解决解决过的问题. ...

  6. 使用Mac的浏览器调试ios设备上的cordova app

    原文链接:http://blog.csdn.net/lovelyelfpop/article/details/70213326 在web开发的过程中,抓包.调试页面样式.查看请求头是很常用的技巧. 其 ...

  7. 如何在 SAP UI5 应用中集成第三方库 :一个在移动设备上查看 Web 应用打印调试信息的小技巧

    这是 Jerry 2021 年的第 43 篇文章,也是汪子熙公众号总共第 320 篇原创文章. 做 Web 开发的程序员,无论使用 SAP UI5,还是 Angular,React,Vue,每天都离不 ...

  8. android allow usb debugging,远程调试Android设备 - Chrome 开发者工具中文文档

    在Windows,Mac 或 Linux 上远程调试 Android 设备上的实时内容. TL;DR 设置你的Android设备进行远程调试,并从开发机中发现它. 从您的开发机器检查和调试Androi ...

  9. 调试远程服务器上的代码时报错:调试设置中的Python路径无效

    错误 当在本地调试远程服务器上的代码时,报错: 调试设置中的Python路径无效 踩坑 根据提示去launch.json文件里 以为是"python": "${comma ...

最新文章

  1. ospf和pat及nat的配置
  2. laydate 时间控件去掉秒以及解决在移动端不能滑动的问题
  3. pb自定义控件 事件_Android WebView与下拉刷新控件滑动冲突的解决方法
  4. JAVA编程技巧之如何实现HTTP的断点续传(原理篇)
  5. 已解决 selenium.common.exceptions.NoSuchWindowException: Message: no such window
  6. CSDN博客下载器v2.5(解决严重bug)
  7. kotlin-中文免费文档(后台,android,前端)
  8. Typora(就是个浏览器)自定义设置。附带:Typora免费版链接
  9. 搭建基于 Nginx 的 RTMP 服务器,并用 ffmpeg 来进行推流和拉流
  10. 螃蟹效应:表现优秀遭嫉妒,如何应对职场竞争?
  11. 分门别类刷leetcode——链表 1
  12. Mac软件无响应怎么办?
  13. Oracle Order by 按汉字拼音排序
  14. 计算机应用大赛PPT题库,2016年9月计算机应用基础统考题库 ppt演示文稿
  15. android模拟按键方法,Android随笔之——模拟按键操作的几种方式
  16. VBA按列名称或是按表格标题给EXCEL表格做排序
  17. JavaScript学习笔记2——JavaScript操作BOM对象
  18. 同态加密能否拯救云计算
  19. 如何让中文转换成其拼音首字母大写
  20. Windows权限维持方案(可过360主动防御)

热门文章

  1. Android ViewFlipper 使用
  2. 一文详解窄脉冲LIV测试系统的特点和功能
  3. Java毕业设计_集美大学诚毅学院校友录系统设计与开发
  4. 创建订单轮询查看支付状态
  5. karma+phantomjs+mocha+chai使用心得
  6. chrome点击书签栏书签_如何显示(或隐藏)Google Chrome书签栏
  7. 猜数字游戏(数字炸弹)
  8. mac 微信备份到外接硬盘方案(软链接)
  9. 量化高频交易从0到1(期货CTP,纳秒级,高频、趋势及套利策略)课程大纲
  10. visualvm下载和安装