摘要:简介是一款类似于和的网页调试工具,它的不同之处在于可以用于进行远程调试,比如调试手机上面的网页。
weinre简介
weinre 是一款类似于firebug 和Web Inspector的网页调试工具, 它的不同之处在于可以用于进行远程调试,比如调试手机上面的网页。
weinre的安装weinre是用node编写的,可以用npm来进行安装(前提是您的机器上已经装了node)
npm install -g weinre
Mac 和Linux下推荐使用
sudo npm install -g weinre如何运行?
运行weinre之前,首先需要了解三个专有名词
Debug Server: 部署weinre的那台服务器
Debug Client: Web Inspector 界面,主要用来展示页面元素和控制台面板。
Debug Target: 你想要调试的网页,通常是位于手机上的网页。
安装完成后在termial中运行以下命令
weinre --httpPort=8081 --boundHost=znchen.waijule.cn //你自己Debug Server的域名, 也可以使用ip地址)
想了解更多weinre的配置启动项可以通过 weinre --help 命令来查看
也可以在HOME目录下创建 .weinre/server.properties 文件
boundHost: znchen.waijule.cn httpPort: 8081 reuseAddr: true readTimeout: 1 deathTimeout: 5
这样可以直接运行weinre 命令,它会自动读取server.properties 里面的配置项。
打开浏览器, 输入 http://znchen.waijule.cn:8081
在需要调试的网页中加入Target Script
打开debug client 界面
http://znchen.waijule.cn:8081/client/#anonymous
用手机设备打开待调试的网页,这时候你可以在 debug client界面上清晰的看到 Targets 列表(调试目标列表)
到此,你就可以方便的查看Elements, Resource, Console, Timeline 等面板了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81257.html
摘要:我个人比较推荐的方法是或者安卓手机的这种方式,比较简单方便快捷,然后根据具体的环境再选择更为合适的调试方法。 本文首次发表于本人的个人博客:http://cherryblog.site/ ,欢迎大家到我的博客查看更多文章~ 前言 在开发中前端免不了要进行移动端的开发,然而在电脑上看的样式和手机上还是有一定的差距的,因为手机上有顶部的状态栏和底部的菜单栏,特别是在qq内置浏览器中打开,差...
摘要:移动端调试困难很多时候,我们在进行移动端开发时,都是先在端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。 移动端调试困难 很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化...
摘要:可以在上调试运行在移动端上的页面。启动调试客户端在浏览器中打开即可启动调试客户端创建创建个页面,并加入以下表示从代理服务中引入。 一、背景: H5页面在PC上调试起来很方便,但是在手机上却很麻烦,此时移动端就像一个黑匣子,查看或修改DOM、CSS,localStore等变的很困难。这个时候远程调试就孕育而生了。 二、weinre 2.1 什么是weinre Weinre是单词缩写,全称...
阅读 3024·2021-10-12 10:12
阅读 5229·2021-09-26 10:20
阅读 1466·2021-07-26 23:38
阅读 2790·2019-08-30 15:54
阅读 1619·2019-08-30 13:45
阅读 1931·2019-08-30 11:23
阅读 3052·2019-08-29 13:49
阅读 742·2019-08-26 18:23