移动端调试---谷歌工具+eruda+vconsole

Last updated 3 months ago

Was this helpful?

移动端调试---eruda和vConsole

pc端开发时，各种调试都可以直接看开发着工具栏，就算是移动端页面也可以模拟，但主要是样式，一些功能和不同移动端的兼容优化，只能在真机上调试，下面就是几种移动端调试的方法，一个chrome功能，两个js工具。

chrome移动端工具

电脑: Mac电脑

手机: 小米 10

使用数据线，连接电脑和手机，手机选择仅限充电。

手机打开开发者模式，开启USB调试。

手机打开到chrome浏览器。

电脑打开chrome浏览器，输入地址chrome://inspect/#devices，进入chrome的设备调试工具。

执行了上一步后，手机上会立马出现「运行USB调试」的询问，同意即可。

手机上同意「运行USB调试」后，电脑上的chrome设备调试页面，就会出现这个移动端设备，我可以再红框A处填写网址，在电脑上控制手机的chrome浏览器，打开页面。

最关键的一步来了，进行调试，需要点击inspect按钮。

接着，就会出现一个弹框，熟悉的界面出现了，开发着工具一应俱全，可以在电脑上，进行移动端页面的调试了。

以下是各个步骤时的截图，可以参照着来看一下。

eruda 和 vConsole

这两个工具都需要引入js工具库，用库在移动端实现开发着工具的功能，所以无论什么浏览器都可以使用，比较适合来适配不同的浏览器。

下面是两个工具的中文文档，简介明了，可以直接阅读，我这里就不再抄一遍了。

两个工具，eruda的体积更大一些，100k左右，但功能也更全面，而vConsole会小很多，但功能也比较少。。。少很多吧，具体的取舍就看bug情况了，下面是两个工具的截图，可以稍微对比一下。