• 移动前端调试工具-Weinre真机调试


    之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求,后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre,可以在PC端直接调试运行在移动设备上的远程页面,,在PC端可以即时修改目标网页的HTML/CSS/Javascript,调试过程可实时显示移动设备上页面的预览效果,并同步显示设备页面的错误和警告信息,可以查看网络资源的信息,不支持断点调试,听起来是不是很厉害的样子,但真正用起来却很方便。

    1.版本选择 

    Weinre最早是有Java版本的,因此网上的有些博客是Java版本的实现过程,Java版本在13年的时候已经没有更新,所以会出现一些问题,Weinre官网现在介绍自己说是一个基于NodeJS项目,因为需要本地需要安装Node。weinre是一个命途多舛的项目,最早被PhoneGap收购,后来PhoneGap又被Adobe收购,Adobe收购PhoneGap后把PhoneGap捐给了Apache,Apache把PhoneGap放在Cordova的项目中,Weinre也从最初的Java移植到了当前的NodeJS版本。

    2.安装(默认已安装Node,如果没有安装可以参考本人之前博客)

    sudo npm -g install weinre
    

    3.获取ip地址(mac环境)

    ipconfig getifaddr en0
    

    4.运行weinre

    weinre --boundHost 192.168.1.105
    

    5.浏览器中输入http://192.168.168.101:8080即可看到以下页面:

    6.手机上访问需要调试的web页面,然后在页面底部插入脚本(最后的#anonymous标题与PC端对应):

    <script src="http://192.168.1.105:8080/target/target-script-min.js#anonymous"></script>

    7.PC端浏览器访问http://192.168.1.105:8080/client/#anonymous页面,可以看到以下效果:

    对手机端页面实时调试:

    8.小结:

    ①有可能会出现页面无法显示页面的源代码,请注意target中的信息,确保手机和电脑在同一局域网内;

    ②如果出现connection lost请即时刷新页面,如果需要调试时间较长不想丢失链接的话尝试用手机线和电脑链接;

    ③支持主流Android,iOS以及其他平台,不支持iOS 3.1.3及其更早平台以及webOS 1.45或更早平台;

    ④关于weinre有其他命令的介绍可以参考官网,以及书签注入的方式查看手机网页大同小异,可以参考官网http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

  • 相关阅读:
    root用户没有权限编辑其他用户处理
    php中 被遗忘的函数
    erlang file操作(IO编程)
    Linux下的MySQL自动备份脚本
    这就是传说中让理科生沉默,让文科生落泪的文理综合体(转)
    LINUX 忘记root密码
    php中 被遗忘的函数
    分页显示的常用操作方法
    php 接口类:interface
    php垃圾回收机制分析
  • 原文地址:https://www.cnblogs.com/xiaofeixiang/p/4993812.html
Copyright © 2020-2023  润新知