手机H5 web调试利器——WEINRE (WEb INspector REmote)

调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的chrome://inspect/#devices 安卓真机调试,不过这个要求比较高:
首先,你的 Chrome 版本必须高于 32
其次你的测试机 Android 系统高于 4.0,
再其次,测试机安装 Chrome for Android 才可以使用 Chrome 远程调试这项功能,
最后, 手机需要开启USB调试模式

比如需要调试嵌入在APP中webView中的页面, 恰好安卓的版本比较低,没办法真机调试,
这时候weinre就是最好的选择。

如何使用 weinre

WEINRE 是 WEb INspector REmote 的缩写, 可以远程调试web页面。

安装

$ sudo npm install -g weinre
$ weinre -v

配置

获取本机IP:172.19.17.62
$ ipconfig getifaddr en0

开启本地监听服务器:
weinre --boundHost 172.19.17.62

打开http://172.19.17.62:8080 ,

将这段脚本放在需要调试的手机页面中就可以远程调试了,

加载好之后就可以在remote tab下找到需要调试的页面了, 和chrome devTools类似, 也可以查看DOM元素和控制台等。

手机H5 web调试利器——WEINRE (WEb INspector REmote)的更多相关文章

  1. web调试利器_fiddler

    此文已由作者夏君授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.fiddler简介 直接引用官网介绍 The free web debugging proxy for a ...

  2. 移动端H5测试调试利器 chrome://inspect/#devices

    使用 chrome://inspect/#devices,可以使安卓手机里的WebView也能和chrome一样审查元素,调试和测试移动端H5页面. 我使用的是三星S6 (该功能支持安卓系统4.4及以 ...

  3. Web调试利器fiddler介绍

    转载:http://blog.chinaunix.net/uid-27105712-id-3738821.html 最近在使用fiddler,发现这个真是非常最犀利的web调试工具,笔者这里强烈推荐给 ...

  4. Web调试利器OpenWindow

    有些时候调试web页面,在循环里面我们不方便设置断点进行调试,或者调试起来比较麻烦,我们就可以用openWindow的方法打印出想要查看的信息,既方便又省时. 代码如下: OpenWindow = w ...

  5. Web调试利器fiddler使用

    fiddler官网:http://fiddler2.com/ http://wenku.baidu.com/view/053e79d776a20029bd642dc1 http://www.cnblo ...

  6. Web调试利器fiddler(转)

    http://blog.chinaunix.net/uid-27105712-id-3738821.html

  7. 手机前端开发调试利器 – vConsole

    我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...

  8. 手机前端开发调试利器-vConsole

    最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测 在网上搜索后发现此插件,大大解决了问题 ...

  9. Fiddler(Web/HTTP调试利器)

    简述 Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出"Fiddler的数据(指cookie.htm ...

随机推荐

  1. Asp.Net 获取FileUpload控件的文件路径、文件名、扩展名

    string fileNameNo = Path.GetFileName(FileUploadImg.PostedFile.FileName); //获取文件名和扩展名string Directory ...

  2. 手把手教你编写一个具有基本功能的shell(已开源)

    刚接触Linux时,对shell总有种神秘感:在对shell的工作原理有所了解之后,便尝试着动手写一个shell.下面是一个从最简单的情况开始,一步步完成一个模拟的shell(我命名之为wshell) ...

  3. PL/SQL中SELECT总结

      一.SELECT 语句的各个关键词的顺序及作用简解(这个我简略点写~) 1.SELECT 2.FROM 3.WHERE 4.GROUP BY ---对结果集进行分组,通常与聚合函数一起使用 5.H ...

  4. java1.7集合源码阅读:LinkedList

    先看看类定义: public class LinkedList<E> extends AbstractSequentialList<E> implements List< ...

  5. c语言知识点

    1.在c语言中,函数,声明,调用的类型务必是一致的, 2.主机id:指ip地址最后一个字节,例如,203.86.61.106,---->106指主机id, 3,端口号:6789,换成16进制1A ...

  6. json传值以及ajax接收

    一开始进入公司,做起项目来比较不知所措,现在一个月过去了,越来越得心应手,下面是json向前端传值以及前端ajax接收,给自己记下也分享给大家. 这是两个类型不同的json与ajax的数据交互(集合. ...

  7. 《机器学习实战》学习笔记——第2章 KNN

    一. KNN原理: 1. 有监督的学习 根据已知事例及其类标,对新的实例按照离他最近的K的邻居中出现频率最高的类别进行分类.伪代码如下: 1)计算已知类别数据集中的点与当前点之间的距离 2)按照距离从 ...

  8. 简单介绍Android应用特色及详解四大组件

    Android应用特色 Android主要有什么特色呢,有以下几个方面来体现: 四大组件 丰富的系统控件 SQLite数据库等持久化技术 地理位置定位 强大的多媒体 传感器 1,四大组件 Androi ...

  9. instancetype、id、NSObject的联系和区别

    1.id和instancetype都能省去具体类型,提高代码的通用性.而NSObject *则没有这种功能. 2.instancetype只能用于方法的返回类型,而id用处和NSObject *类似. ...

  10. 抓包工具Charles,anyproxy,mitmproxy等

    Charles:图形化界面,看着比较方便友好,也可以抓取https,不过电脑和手机都要下载证书,主要我的电脑上不能添加一添加就卡死 所以,抓取https的话,就用mitmproxy比较简单 1.安装C ...