Weinre是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Weinre,在PC上可以即时修改目标网页的HTML/CSS/Javascript,调试过程可实时显示移动设备上页面的预览效果,并同步显示设备页面的错误和警告信息,可以查看网络资源的信息,不过weinre不支持断点调试。该项目目前是 Apache Cordova 的一部分。     
     
 
Weinre系统支持性
 
iOS 3.1.3或更低版本不支持
 
webOS 1.45或更早版本不支持
 
Debug客户端支持的平台
 
weinre的Mac程序(自带客户端) - Mac OSX 10.6 64-bit
 
Google Chrome 8及以上版本浏览器
 
Apple Safari 5及以上版本浏览器
 
Debug目标页面支持的平台
 
Android 2.2+系统浏览器
 
Android 2.2+ 中的phonegap
 
iOS 4+ 的safari浏览器
 
BlackBerry v6.x 模拟器
 
webOS
 
chrome8+
 
safari5+
 

一:关于weinre

weinre就是一款依赖于nodejs的远程调试工具

二:weinre的安装

1:安装nodejs以及npm

2:安装weinre:npm -g install weinre

三:weinre的使用例子

1:打开命令行,输入:weinre --boundHost [IP_address] --httpPort [port] (IP_address 是pc的ip地址, 不能是127.0.0.1,port可以输入一个随便的端口:最好是8000以上的)

我的pc的ip地址为10.57.225.53,在终端输入:weinre --boundHost 10.57.225.53 --httpPort 8999

2:在浏览器上打开网址http://10.57.225.53:8999,然后我们就可以看到以下界面:

3:按照标签1

4:按照标签2进入调试界面了

5:利用手机打开所要调试的页面(也就是刚才添加了script的那个页面)

  可以通过sublime的sublimeServer:配置见:http://www.cnblogs.com/lhy-93/p/5741274.html

6:点击调试页面里对应的Targets,然后点击Elements工具,就可以进行调试了。

 
 
 

Weinre(pc调试手机页面)的更多相关文章

  1. 【前端调试手机页面】分享一款便捷的调试工具--spy-debugger

    spy-debugger  :  微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址: ...

  2. 使用fiddler4做代理调试手机页面

    由于一般手机不能改host,手机页面如果涉及到各个域名ip的混合使用,在手机上调试看效果非常麻烦. 使用fiddler4做代理,手机跟电脑连到同一个局域网,手机上网通过电脑做个代理上网,那么一切请求就 ...

  3. 通过chrome浏览器调试手机页面(IOS和Android)

    开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设 ...

  4. 使用weinre调试手机页面

    阅读目录 介绍Weinre 安装Weinre 通过Weinre调试页面 启动target 介绍Weinre Weinre(Web Inspector Remote),是一种远程调试工具.功能与Fire ...

  5. UC浏览器开发者版调试手机页面

    1 关于RI 目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实. 因此,我们使用技术将手机网页调试信息分离,实现一种能在大 ...

  6. Chrome调试手机页面

    新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chro ...

  7. 样式PC和手机页面

    /*媒体查询--当页面大于1200px时*/ @media (min-width: 1200px) { } /*在922和1199像素之间的屏幕里,中等屏幕*/ @media (min-width: ...

  8. APICloud和海马玩模拟器结合调试手机页面

    https://blog.csdn.net/pleasecallme_522/article/details/54577904

  9. 使用weinre远程调试

    1.调试环境: 1)使用nodejs搭建调试服务器: 先安装node,然后使用npm安装weinre,在node.js安装目录输入以下命令 npm install weinre 2)需要wifi环境和 ...

随机推荐

  1. Redis-数据操作

    数据操作 redis是key-value的数据,所以每个数据都是一个键值对 键的类型是字符串 值的类型分为五种: 字符串string 哈希hash 列表list 集合set 有序集合zset 数据操作 ...

  2. 配置linux内核输出所有的log信息

    答案:修改内核文件include/linux/printk.h  (内核版本为4.9) 修改前 #define CONSOLE_LOGLEVEL_DEFAULT 7 /* anything MORE ...

  3. Docker Mysql主从同步配置搭建Demo

    进行Docker操作前,先建立目录,我的路径是d:/docker/mysql,目录结构如下: --mysql --master --data --conf --my.cnf --slaver --da ...

  4. IE8下打印内容缩小问题

    去掉启动缩小字体填充的设置项勾选 来自为知笔记(Wiz)

  5. perl I/O和缓存的关系

    最近在查看日志时,突然发现信息没有及时写入日志,研究了很久,突然醒悟:原来是print的缓存原因. 顺着这个详细了解了下perl里的IO缓存机制: 1.正常情况下,操作系统的读写都有缓存(buffer ...

  6. 在Web API 2 中实现带JSON的Patch请求

    译文:http://www.cnblogs.com/kexxxfeng/p/the-patch-verb-in-web-api-2-with-json.html 原文:https://carly.io ...

  7. DML,DML,DCL,DQL

    可以先看看这篇微博:http://blog.csdn.net/jiben2qingshan/article/details/7832344 http://blog.163.com/chenwenlin ...

  8. ItemsSource数据源 或 集合属性 的定义 ——> 的数据源定义(典型)

    在Xaml中: ItemsSource="{Binding Path=GridDataSource.PoliceforceDataSource}" 在ViewModel中: Obs ...

  9. winform版本自动更新

    我们在使用软件的时候经常会遇到升级版本,这也是Winform程序的一个功能,今天就大概说下我是怎么实现的吧(代码有点不完美有小BUG,后面再说) 先说下我的思路:首先在打开程序的时候去拿到我之前在网站 ...

  10. Anaconda Install

    Linux 安装 首先下载Anaconda Linux安装包,然后打开终端输入: bash ~/Downloads/Anaconda3-2.4.0-Linux-x86_64.sh 注意:如果你接受默认 ...