Weinre 远程调试移动端手机web页面
调试场景
1.调试页面在手机上。
2.调试工具在PC的chrome
3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi
一.安装 Weinre
1.Weinre是基于nodejs实现的,所以使用它必须先安装node运行环境,新版的node已经集成了npm, 所以直接在在命令行键入下面的命令即可安装, 如果你是Mac/Linux用户, 还需要在前面加入"sudo":
npm -g install weinre
2.安装后输入命令 "weinre", 查看weinre的默认设置
3.启动 Weinre 服务
输入命令, IP是你局域网的IP(httpPort尽量不要占用8080 以免与你的项目端口冲突)
weinre --boundHost 192.168.0.150 --httpPort 9090
4.浏览器打开Weinre调试工具
用上面配置好的ip与端口访问, http://192.168.0.150:9090/
5.将这段js加入到要调试的页面中
<script src="http://192.168.0.150:9090/target/target-script-min.js#anonymous"></script>
6.在浏览器中打开weinre调试工具
第1行的debug Client urse inferface 地址是Debug Client(Weinre调试工具)的用户访问接口,可以通过这个地址进入Debug Client
http://192.168.0.150:9090/client/#anonymous
点击"target"链接, 将其变绿色激活
七.用手机浏览器访问你自己的页面, 点击Element后就可以审查元素了
八.多用户
Weinre的默认使用中,都是用anonymous作为id的;
但是如果多个用户同时调式各自的页面会有问题,weinre使用多用户机制解决该问题。Weinre默认支持多用户的,这样一个局域网同事只需要一台电脑上安装weinre即可,不需要每个人都安装,多个用户同时使用时,每个用户使用自己的id来区分,每个用户调式信息可以独立,不会相互影响;
将后缀改为其他ID, 如: #youlogin
http://192.168.0.150:9090/client/#youlogin
就可以进行多用户调式了;
与chrome,webkit调试工具类似,各个Tab对应各自不同的功能,可以在主机上随意修改远程网页上的dom、查看资源请求等, 同时在手机对应的调试页面里,查看效果。
注意,手机跟Weinre调试工具要在同一个wifi网段下。
weinre缺点:
没有提供JS调试功能。
相关文章
- django pycharm_pycharm调试django
- web基础知识_Web开发基础
- 驱动开发:WinDBG 配置内核双机调试
- 使用VMWare GDB和IDA调试Windows内核
- 免费苹果账号(apple id)申请ios证书p12真机调试
- Linux调试:管理多线程的完美技巧(linux调试线程)
- 调试Oracle存储过程:精确定位问题(oracle存储过程调试)
- Linux编译调试:实现程序最佳性能(linux编译调试信息)
- 服务Linux下的Web服务发布:畅享新体验(linux发布web)
- 快速部署Linux环境下Web项目(linux部署web项目)
- GDB: Linux系统中的强大调试工具(gdblinux)
- 深入Linux内核:调试技术剖析(linux内核调试)
- 深度解析: Linux 进程堆栈信息如何管理与调试!(linux进程堆栈信息)
- 管理MSSQL的好帮手:在线Web管理器来帮忙!(在线web管理mssql)
- MSSQL Web管理工具简介:轻松管理数据库的利器(mssql web 管理)
- 的应用Web开发中Redis的助力极大提升项目效率(web项目中redis)
- Web项目利用Redis提高效率(web项目加入redis)
- 新技术Web环境下Redis配置实战分享(web配置redis)
- Web端快速读取Redis数据的实现方案(web读取redis数据)
- Web端登录Redis提高数据库性能(web登录redis作用)
- 在Web服务器上使用Redis进行高性能处理(web服务器 redis)
- 使用Redis提高Web性能的技巧(web中redis用法)
- 基于Web的Redis管理系统(web redis管理)
- Oracle Web访问企业无线界面新体验(oracle web访问)
- Oracle Web官网让你轻松获取最新技术资讯(oracle web官网)
- 应用基于Redis的Web应用运行稳定性提升(redis运行web)
- MySQLUDF调试方式debugview的相关方法
- php调试利器debug_print_backtrace()
- android调试工具adb命令大全
- VisualStudio中js调试的方法图解