背景

最近开发h5时经常会遇到一些问题：小程序IDE预览正常，但是真机显示有问题；安卓手机预览正常，但是IPhone 预览有问题，所以会遇到需要真机调试的情况，最后我发现两个比较好用的真机调试工具：

1. eruda
2. vconsole

我使用前者是比较多的，因为前者可以选定element然后查看样式。

我的调试思路

我开发的项目目前是使用react框架，以此举例。

1. 先把项目在本地跑起来，这个时候一般在本地预览的url是类似localhost:3000(urlA)这样的一个url

• 如果使用eruda，在public 文件夹下面的index.html放入如下代码：

<script src="//cdn.jsdelivr.net/npm/eruda"></script> 
<script>eruda.init();</script>

• 如果使用vconsole，在public 文件夹下面的index.html放入如下代码：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

    <script

      type="text/javascript"

      src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"

    ></script>

4. 获取电脑ip,将localhost替换为ip地址，则localhost:3000(urlA)会被转换为ip:3000(urlB)
5. 手机和电脑访问同一个局域网，手机打开 urlB
6. 这个时候可以看到对应库的一个悬浮框，悬浮框内可以看日志，也可以选择元素，具体使用方法可以看对应库的文档哦

其他调试工具

在 Github 上面看到一个工具mdebug，页面里面也附了其他常用的工具，如果希望使用其他工具也可以看看这个链接。 github.com/ihtml5/mdeb…