移动端web调式工具分享（01）

移动端web调式工具分享(01)

前提：

你是不是有时会因为在Chrome或是Firebug上调式web的时候都能遇到什么bug,然后放到真机上跑一下bug成堆冒出来，然后调式又发现不了问题，于是疑惑不解。现在福利来啦，在真机上也能调式！今天我们就介绍一下关于移动端的调式工具。

IOS端调式之MIHTool

   在开始调式之前，你需要到AppStore下载MIHTool。
   没错，MIHTool是针对IOS的Web调式工具。你可以访问MIHTool的官方网站(http://www.mihtool.com/)一看究竟。

如图所示：

OK，现在我们来看看怎么使用这个“很黄很暴力”的工具吧！
（1）首先，你需要让自己电脑的网络与手机的网络处于同一个wifi下；
（这对于用台式机的孩子伤不起呀T_T...）

（2）打开MIHTool这个App，你会看到这么一个提示：
这时，你需要记住的是提示框中的url,如图所示：

然后，我们点击OK，在MIHToll提供的地址栏输入你所要调式的Web的url。

（3）在电脑上打开谷歌浏览器chrome，在地址栏输入前面你记录下来的url,如果出现这样的画面，表示你和Iphone上的MIHTool连接成功啦~

如图所示：

（4）接下来，我们在这个页面上点击"Web Inspector"，选择第1个“ Web Inspector Remote(远程审查)”的方式，这也是MIHTool推荐的方式。
点击后，如果网络情况好的话，你会看到这个页面，然后点击Targets下面的链接。
点击前，链接是蓝色的：

如图：

点击后，链接变成绿色，则表示可以进入调式状态。

如图：

然后我们在该页面的Tab导航栏选择第二项，进入调式功能：
如图：

我们选择body这个标签，这时去看你手机上的MIHTool页面，会相应的给出选择的区域。

如图：

怎么样？是不是热血沸腾了呢~
不过，你需要注意的是在调式之前一定要让你的Iphone/Ipad与PC处于同一个网段下。
好吧，关于在IOS上的Web调式就这样。