移动端开发调试工具神器--Weinre使用方法
前端开发调试必备:
- DOM操作断点调试;
- debugger断点调试;
- native方法hook(个人暂时还没有试过,不知效果如何);
- 远程映射本地测试;
- Weinre移动调试(详细介绍);
像Dom断点调试和debugger断点调试我认为是大家经常用到的方法,或者是当前比较火狐下比较流行的Fiexbug调试工具;今天我们主要是研究Weinre调试工具的;
当然,作为前端开发人员,令人比较乏味的即使手机端各个版本的支持程度,例如就拿iphone来说,虽然都是-webkit内核,如果你添加的动画,如-webkit-translate…….当然考虑到兼容性问题,你会带上前缀-webkit,但你本想手机端大多是支持HTML5和css3的,所以就试下了不带前缀-webkit,结果,呵呵,那么问题来了,iphone5s以下会有问题,以上就没有问题,所以你懂得,最好加上前缀-webkit,不过像最近比较新的版本的Andirod对CSS3的属性支持度还是不错的;
接下来,我们介绍下重点:
安装weinre
weinre可以通过npm按照(个人也是比较推荐的)
npm install -g weinre (按照完成后,可以在cmd上,查看下版本号,看是否按照成功)
weinre --httpPort 8080 --boundHost -all-
ok!如果没有什么问题的话,我们打开谷歌浏览器(-webkit内核)输入:http://127.0.0.1:8080/ 会看到以下界面
以上这个便是庐山正面目了,上图的“debug client user interface”是weinre的Debug客户端,点击进入后看到目前还没有被测试的网页:
Targets显示的none
OK!那么我们继续,添加Debug Target
有两种方式:
- Target Script(需要向页面中添加一个js):
<script src="http://192.168.1.69:8080/target/target-script-min.js#anonymous" type="text/javascript"></script>
注意:标红的部分是你自己的IP地址和端口号,自己适配去调;
- 我们也可以将一段js保存到移动设备的书签中
javascript:(function(e){e.setAttribute(“src”,”http://127.0.0.1:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
最后:手机测试:
- 手机连接Wifi,必须和电脑在同一段网络,我用的是XAMPP模拟服务器,大家可以上网查用法,然后用自己的手机测试你要测试的网页即可;
现在回到电脑端 http://127.0.0.1:8080 点击“debug client user interface:” 如果没有问题的话,就已经成功添加了Debug Target:
提示:注意手机不要锁屏,不然调试会断开!
- 调试开始:
自己可以查查各个组件!
移动端开发调试工具神器--Weinre使用方法的更多相关文章
- 移动端开发demo—移动端web相册(一)
本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...
- 移动端开发:使用jQuery Mobile还是Zepto
原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobil ...
- Day01_搭建环境&CMS服务端开发
学成在线 第1天 讲义-项目概述 CMS接口开发 1 项目的功能构架 1.1 项目背景 受互联网+概念的催化,当今中国在线教育市场的发展可谓是百花齐放.如火如荼. 按照市场领域细分为:学前教育.K12 ...
- web移动端开发技巧与注意事项汇总
一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...
- 移动端开发概览【webview和touch事件】
作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...
- Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发
Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...
- 在线教学、视频会议 Webus Fox(2) 服务端开发手册
上次在<在线教学.视频会议软件 Webus Fox(1)文本.语音.视频聊天及电子白板基本用法>里介绍了软件的基本用法.本文主要介绍服务器端如何配置.开发. 1. 配置 1.1 IIS配置 ...
- Android 服务端开发之开发环境配置
Android 服务端开发之开发环境配置 这里是在Eclipse的基础上安装PhpEclipse插件方法,PHPEclipse是Eclipse的 一个用于开发PHP的插件.当然也可以采用Java开发a ...
- Unity3D开发必备神器(Visual Studio Tools for Unity)
Unity3D开发必备神器(Visual Studio Tools for Unity) 开发Unity3D程序你用的什么IDE呢? 1.MonoDevelop 2.VS 可能你的回答是这样的,我用的 ...
随机推荐
- [LeetCode] Quad Tree Intersection 四叉树相交
A quadtree is a tree data in which each internal node has exactly four children: topLeft, topRight, ...
- HDFS基础配置
HADOOP-3.1.0-----HDFS基础配置 执行步骤:(1)配置集群(2)启动.测试集群增.删.查(3)执行wordcount案例 一.配置集群 1.在 hadoop-env.sh配置文件添加 ...
- python3 load Iris.data数据集出现报错key words: b'Iris-setosa'
通过搜索原因,发现有可能是在对文件读取是编译出现了问题,并且Keyword中提示b'Iris-setosa',而我们的string转float函数中没有字母b,很奇怪.所以尝试将转换函数所有的stri ...
- 泡泡一分钟: Deep-LK for Efficient Adaptive Object Tracking
Deep-LK for Efficient Adaptive Object Tracking "链接:https://pan.baidu.com/s/1Hn-CVgiR7WV0jvaYBv5 ...
- [daily] emacs显示file name buffer的全路径
在用emacs看代码的时候,在文件间跳来跳去,如果工程太大的话,很可能会有重名文件,这个时候, 你就不知道自己在什么的地方了.需要一个查看当前正在编辑区的文件的名字的方法. emacs在这个地方,存储 ...
- 栈->栈的基本定义
定义: 栈是限定仅在表尾进行插入或删除操作的线性表.因此,对栈来说,表尾端有特殊含义,称为栈顶,相应地,表头端称为栈底.不含元素的空表成为空栈. 示意图: 顺序栈的表示和实现 可以在初始化时分配一块连 ...
- JVM性能调优总结
引自其它博客 : https://www.cnblogs.com/donaldlee2008/p/5469685.html 注 : 该条同样适用于Tomcat调优 调优配置说明 堆大小设置JVM 中最 ...
- Ionic3多个自定义过滤器--管道(pipe)
往往我们创建自定义管道一般都不止只会创建一个自定义管道,和自定义组件类似,创建多个方式如下. 一.命令行生成管道 ionic g pipe formateDate ionic g pipemoneyD ...
- IntelliJ IDEA 指定Java编译版本
在IntelliJ IDEA 15中使用Maven时,IDEA将默认的编译版本.源码版本设置为jdk5.编译项目的时候出现警告:”Warning:Java: 源值1.5已过时, 将在未来所有发行版中删 ...
- 未能执行URL
在 <compilation debug="true"> 下 加入: <buildProviders> <add extension=".h ...