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结构:

    [原创]响应式设计之移动端调试工具

原文地址:https://www.cnblogs.com/liulinjie/p/5670899.html