【工具】移动端web调式工具分享

⭐️ 本文首发自 前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

唉，最近公司在研发分布式高性能的云计算平台，其中涉及到了 AI 方面的处理。所以我也在自学 Python，发现没啥门槛😂。不过在 AI 方面的知识却是需要花功夫花时间学习的。在学习的过程中我发现了一个不错的学习教程，推荐给大伙😋，我个人觉得这个教程讲解的通俗易懂，帮我省去了自己苦苦专研的时间，能够得到快速的进步。下一阶段，我也会在这里和大家分享我的学习笔记。

移动端web调式工具分享

前提：

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

远程调试工具weinre使用教程

一：关于weinre
weinre就是一款依赖于nodejs的远程调试工具

二：weinre的安装
步骤一：安装nodejs以及npm（因为weinre是运行在nodejs上的，这一步就不展开了，安装nodejs也是很容易的）
步骤二：npm -g install weinre安装weinre

三：weinre的使用例子
步骤一：打开命令行，输入：weinre --boundHost [IP_address] --httpPort [port] (IP_address 是pc的ip地址, 不能是127.0.0.1，port可以输入一个随便的端口)
假设我的pc的ip地址为192.168.1.131，然后我就可以输入这样的命令：weinre --boundHost 192.168.1.131 --httpPort 1234
步骤二：在浏览器上打开网址192.168.1.131:1234

• https://www.cnblogs.com/oadaM92/p/4377364.html
• 手册 https://github.com/nupthale/weinre

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调式就这样。