资讯专栏INFORMATION COLUMN

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

Zhuxy / 978人阅读

摘要:如何使用是的缩写,可以远程调试页面。安装配置获取本机开启本地监听服务器浏览器打开效果如下将这段脚本放在需要调试的手机页面中就可以远程调试了,加载好之后就可以在下找到需要调试的页面了,和类似,也可以查看元素和控制台等。

调试移动端页面,优先选择使用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:192.168.0.199
$ ipconfig getifaddr en0

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

浏览器打开 192.168.0.199:8080

效果如下

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

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

点击elements 查看相应的元素,并修改,即时生效

原帖子地址 https://www.cnblogs.com/fanyo...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117411.html

相关文章

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

    摘要:如何使用是的缩写,可以远程调试页面。安装配置获取本机开启本地监听服务器浏览器打开效果如下将这段脚本放在需要调试的手机页面中就可以远程调试了,加载好之后就可以在下找到需要调试的页面了,和类似,也可以查看元素和控制台等。 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的chrome://inspect/#devices 安卓真机调...

    seanlook 评论0 收藏0
  • 手机H5 web调试利器——WEINRE (WEb INspector REmote) 安卓手机

    摘要:如何使用是的缩写,可以远程调试页面。安装配置获取本机开启本地监听服务器浏览器打开效果如下将这段脚本放在需要调试的手机页面中就可以远程调试了,加载好之后就可以在下找到需要调试的页面了,和类似,也可以查看元素和控制台等。 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的chrome://inspect/#devices 安卓真机调...

    linkin 评论0 收藏0
  • 手机H5 web调试利器——WEINRE (WEb INspector REmote) 安卓手机

    摘要:如何使用是的缩写,可以远程调试页面。安装配置获取本机开启本地监听服务器浏览器打开效果如下将这段脚本放在需要调试的手机页面中就可以远程调试了,加载好之后就可以在下找到需要调试的页面了,和类似,也可以查看元素和控制台等。 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的chrome://inspect/#devices 安卓真机调...

    kid143 评论0 收藏0
  • 移动端真机调试实战经验

    摘要:我个人比较推荐的方法是或者安卓手机的这种方式,比较简单方便快捷,然后根据具体的环境再选择更为合适的调试方法。 本文首次发表于本人的个人博客:http://cherryblog.site/ ,欢迎大家到我的博客查看更多文章~ 前言 在开发中前端免不了要进行移动端的开发,然而在电脑上看的样式和手机上还是有一定的差距的,因为手机上有顶部的状态栏和底部的菜单栏,特别是在qq内置浏览器中打开,差...

    qingshanli1988 评论0 收藏0
  • 移动端真机调试实战经验

    摘要:我个人比较推荐的方法是或者安卓手机的这种方式,比较简单方便快捷,然后根据具体的环境再选择更为合适的调试方法。 本文首次发表于本人的个人博客:http://cherryblog.site/ ,欢迎大家到我的博客查看更多文章~ 前言 在开发中前端免不了要进行移动端的开发,然而在电脑上看的样式和手机上还是有一定的差距的,因为手机上有顶部的状态栏和底部的菜单栏,特别是在qq内置浏览器中打开,差...

    rainyang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<