tip：eruda和Chrome浏览器的从console台很像，推荐使用

方式一：直接引用eruda

官方镜像：GitHub - liriliri/eruda: Console for mobile browsers

缺点：首次请求资源很慢

优点：使用简单，比较靠谱

tip：官方有详细的使用教程，但有点难理解……

项目》public》index.html》head中添加：

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

 

方式二：npm安装（推荐）

Git镜像地址：vConsole: vConsole，手机前端开发调试利器

Step1：安装vconsole依赖包

执行命令：npm install vconsole、npm install eruda

 

Step2：package.json检查

 

Step3：main.js引入

注意：eruda与vconsole的使用方式不同，eruda需要初始化

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 抹平各浏览器的样式差异
import 'normalize.css'
// 引入style样式文件
import './style/index.scss'
// 引入vconsole移动端调试工具
import VConsole from 'vconsole'
import eruda from 'eruda'

const vConsole = new VConsole()
eruda.init()

createApp(App).use(store).use(router).use(vConsole).mount('#app')
// export default { vConsole }

Step4：移动端查看效果

齿轮图标是eruda