移动端调试工具vconsole

前几天遇见了js不兼容问题，然后使用了一下vconsole，发现连这个也不兼容，于是放弃了修复。今天刚好有人问到移动端的问题，于是就想分享一下vconsole这个移动端的调试工具。一篇水文，随意看看。

先水一些内容，当我们电脑启动服务之后，只要是手机连接跟电脑同一个网络的WiFi，是能访问启动的项目的。

一般我们启动项目访问的地址是：

http://localhost:8080/home

把localhost改成本机的ip也是能访问的（获取本机IP就不水了）：

http://192.168.164.31:8080/

这个手机直接打开就能访问了。

localhost其实是一个域名，指向的是127.0.0.1，所以你改成这样也能访问：

http://127.0.0.1:8080/home

但是这个手机是不能访问的。

这边建议给浏览器安装一个二维码生成插件，这样手机要访问的时候可以直接扫码，本人这边使用的是：Anything to QRcode

可能很多人知道vconsole这个东西，毕竟在调试移动端的时候确实是不错。开发移动端的都知道，很多时候在chrom手机模式下没有任何问题，到了真机的时候很容易出现一些奇奇怪怪的问题。

去bootcdn下载vconsolejs，然后引入：

初始化：

new VConsole();

就能看见页面出现了一个按钮：

点开：

一些js的调试就很方便了。

也可以通过npm安装依赖：

npm install vconsole

然后使用：

import VConsole from ‘vconsole’

new VConsole();

进行判断一下，开发环境就引入和初始化，线上环境就不使用。

用过几次，觉得调试js还不错，就是不能调试css，之前有大佬用mac通过usb调试过，跟PC端一样，说是Android也有，但是没去试过。