tip:eruda和Chrome浏览器的从console台很像,推荐使用
方式一:直接引用eruda
官方镜像:GitHub - liriliri/eruda: Console for mobile browsers
缺点:首次请求资源很慢
优点:使用简单,比较靠谱
tip:官方有详细的使用教程,但有点难理解……
项目》public》index.html》head中添加:
<script src="/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