ios webapp调试神器MIHTool
android平台有直接用chrome beta就可以调试,具体操作办法可以查看这篇教程《Android 设备 Chrome 远程调试》
Mac的高富帅直接可以用safari提供“web检查器”,具体可查看这篇文章《ios6下调试webapp》
那么用pc如何在ios上实时调试我们的移动版主题呢?weinre?麻烦了点儿,本文将为您着重介绍一款国产神器MIHTool,说它是神器,一点都不为过,嗯?为什么?用过就知道了!
本文绿色无公害,适合绝对菜鸟级的新手阅读,高富帅X神请直接飘过……
下载MIHTool安装,打开后会出现以下界面:
打开PC上的Chrome,在地址栏输入以上红框中圈出来的地址,如果出现以下界面就表示连接成功了:
PS.如果没成功,请注意检查pc和ios设备是否都开启了wifi,是否处于同一网段等等。
接着看下一步点击“Load www.google.com in MIHTool”下面的链接测试一下,这时手机上app界面会自动载入对应的网址,找到“Web Inspector”下的“Online Web Inspector”,打开下面的链接,我们就可以看到熟悉的开发人员工具了,别急,得等到Targets和Clients下的文字变成绿色后才能开始,如下图:
接下来就知道该怎么做了吧?
折腾了一番,很带劲,等等,怎么打开本地搭建的wordpress呢?不是说的是wordpress移动版主题开发调试吗?很简单,将chrome地址栏的目标网址替换为本机内网IP/wordpress目录即可,如http://192.168.1.10:1234/loadurl/192.168.1.11/wp。
Oh, My God!!! 没样式,图片不显示,js也没有加载,没关系,路径不对,当然不加载,接着往下看。进入wordpress后台“设置→常规”,将“WordPress地址”改为你的本机内网IP/wordpress目录即可,如http://192.168.1.11/wp,保存再在浏览器地址栏刷新刚才的页面,OK!搞掂,收兵。
方法2
weinre使用方法
安装weinre:
- Windows环境:
npm install -g weinre
- Mac OS X:
sudo npm install -g weinre
- 其他环境请自行查阅安装方法
在项目中引入调试脚本:
- 引入方式:
<script src="http://10.13.124.199:8088/target/target-script-min.js#test"></script>
需注意,host与port要与启动weinre时设置的一直。
启动weinre:
- 普通启动方式:
weinre --httpPort 8088 --boundHost 10.13.124.199
- 所有参数列表:
--help (or -? or -h) 查看使用帮助
--httpPort [portNumber] 设置启动端口,默认8080
--boundHost [hostname | ip address | -all-] 绑定主机地址,默认localhost
--verbose [true | false] 是否允许详细信息写入stdout,默认false
--debug [true | false] 是否允许调试信息写入stdout,默认false
--readTimeout [seconds] 设置服务器将消息发送到目标或客户端的等待时间,默认5s
--deathTimeout [seconds] 设置监听到一个调试客户端或目标终端连接到显示终端信息的等待时间,默认3 * readTimeout
开始调试:
- 打开浏览器[推荐Chrome],输入
http://10.13.124.199:8088
注意:该处不是输入项目地址,需与启动weinre时设置的host和port一直。会得到类似以下界面: - 使用浏览器新窗口或其他终端[例如:ipad]打开项目地址,注意:在项目首页中加入脚本并指定目标,例:
- 再返回weinre调试界面,此时或片刻后会出现:
- 点选目标,此时被选中的目标变为【绿色】,切换至【Elements】选项卡,出现DOM结构:
最新文章
- Weex中文文档
- 用Google Analytics跟踪JavaScript Errors (译)
- activemq Linux下的编译
- BZOJ 1486: [HNOI2009]最小圈 [01分数规划]
- phpstorm 快捷键高效助手扩展 常用快捷键收集整理 2018-04-12 16:42:10
- bzoj4946 Noi2017 蔬菜
- Apache Jakarta Commons 工具集简介
- XVIII Open Cup named after E.V. Pankratiev. Grand Prix of SPb
- es2015(es6)基础知识整理(更新中...)
- 从零开始学 Web 之 JavaScript 高级(一)原型,贪吃蛇案例
- [转载]以及部分总结--Linux下创建单机ASM存储的Oracle实例的过程---感谢方总
- cache 基本原理
- Django----From组件
- 客户端、服务器端中JSON字符串与对象的转换
- JAVA开发微信支付-公众号支付/微信浏览器支付(JSAPI)
- golang 实现海明距离 demo
- 编写shell脚本一键启动zookeeper集群!!
- Asp 将MSXML2.serverXMLHTTP返回的responseBody 内容转换成支持中文编码
- ZOJ - 2402 DP方案数
- NO.010-2018.02.15《上邪》两汉:佚名