Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）

目录

Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）

一、简单介绍

二、Eruda

1、安装

2、使用

3、实用

三、vConsole

1、安装

2、使用

3、实用

四、关键代码

五、CDN 方式使用 Eruda 、vConsole

六、其他

---

一、简单介绍

       Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

       进行移动端网页开发时，想要查看手机浏览器信息从来都不是一件容易的事。特别是当目标环境为APP内置WebView，需要调用特定的JsBridge接口时，你根本都干不了什么，只能一遍又一遍地修改代码，重新打开页面并alert一下。

这里介绍 Eruda 和 vConsole 移动端调试工具，方便移动端代码测试。

二、Eruda

GitHub 地址：https://github.com/liriliri/eruda

镜像地址：mirrors / liriliri / eruda · GitCode

这里有篇 Eruda的较详细介绍，有兴趣的可以去看看：Eruda首页、文档和下载 - 手机网页前端调试面板 - OSCHINA - 中文开源技术交流社区

1、安装

npm install eruda --save

2、使用

import eruda from ‘eruda’
eruda.init()

3、实用

1）使用 npm install --save eruda 安装 eruda

 

2）在 package.json 中就会看到 eruda 信息

 

3）在 App.vue 中添加使用 eruda 代码

import eruda from ‘eruda’
eruda.init()

 

4）npm run serve 运行服务

 

5）输入对应网址，即可看到 eruda 调试按钮，点击即可打开调试面板 ，调试按钮可以移动

 

 

 

三、vConsole

vConsole  一个轻量、可拓展、针对手机网页的前端开发者调试面板。

vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。

现在 vConsole 是微信小程序的官方调试工具。

GitHub地址：GitHub - Tencent/vConsole: A lightweight, extendable front-end developer tool for mobile web page.

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

1、安装

npm install vconsole

2、使用

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数来初始化，详情见文档
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后，可移除掉
vConsole.destroy();

3、实用

1）使用 npm install vconsole 安装 vConsole

2）在 App.vue 中添加使用 vconsole代码

import VConsole from 'vconsole';

// 或者使用配置参数来初始化，详情见文档
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后，可移除掉
vConsole.destroy();

 

 

 4）npm run serve 运行服务

5）输入对应网址，即可看到 vConsole 调试按钮，点击即可打开调试面板 ，点击调试面板上方空处关闭面板，调试按钮可以移动

 

四、关键代码

1、App.vue

<template>
  <button @click="moveBox" style="width: 80px;height: 40px">ToMoveBox</button>
  <button onclick="moveBox()" style="width: 150px;height: 40px">ToMoveBox(OnClick)</button><br/>
  输入 box x 值<input type="text" @keyup.enter="changeBoxX($event)">
  <div id="container"></div>
</template>

<script>

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from 'three/examples/jsm/libs/stats.module.js';
import eruda from 'eruda';
import VConsole from 'vconsole';

export default {
  name: 'ThreeTest',
  components: {

  },

  data(){
    return{}
  },

  mounted() {

    this.scene;
    this.camera;
    this.renderer;
    this.stats;
    this.box;
    this.vConsole;

    this.init();

  },
  methods:{

    init() {

      // add vConsole Debug
      this.addVConsoleDebug();

      // add Eruda Debug
      //this.addErudaMobileDebug();

      // scene
      this.initScene();

      // camera
      this.initCamera();


      // light
      this.initLight();

      // renderer
      this.initRenderer();

      // OrbitControls
      this.initOrbitControls();


      // onWindowResize
      this.onWindowResize();


      this.axiesHelper();

      this.iniStats();

      this.addBox();

      this.animate();

    },

    initScene() {

      this.scene = new THREE.Scene();

    },

    initCamera() {

      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
      this.camera.position.set(-15, 7, 15);
      this.camera.lookAt(this.scene.position);

    },

    onWindowResize() {

      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      window.addEventListener('resize', this.onWindowResize);

    },

    initLight() {

      const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
      this.scene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
      directionalLight.position.set(-1, 1, 1);
      this.scene.add(directionalLight);

    },

    initRenderer() {

      this.renderer = new THREE.WebGLRenderer({antialias: true});
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setClearColor(0xcccccc);
      document.body.appendChild(this.renderer.domElement);

    },

    initOrbitControls() {

      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.minDistance = 5;
      controls.maxDistance = 50;

    },



    iniStats() {

      this.stats = new Stats();
      document.body.appendChild(this.stats.dom);

    },

    addBox() {

      var boxGeo = new THREE.BoxGeometry(10,10,)
      this.box = new THREE.Mesh(boxGeo,new THREE.MeshPhongMaterial())
      this.scene.add(this.box);
    },

    moveBox(){

      this.box.position.set(10,0,10);

    },

    animate() {

      requestAnimationFrame(this.animate);
      this.stats.update();
      this.render();

    },

    axiesHelper() {

      var helper = new THREE.AxesHelper(20);
      this.scene.add(helper);

    },

    render() {

      this.renderer.render(this.scene, this.camera);

    },

    changeBoxX(e){
      var val = e.target.value;
      this.box.position.x = parseInt(val);
      console.log(val);
    },

    addErudaMobileDebug() {
      eruda.init();

    },

    addVConsoleDebug() {
      this.vConsole = new VConsole({theme:"dark"});
      console.log('test addVConsoleDebug');
    },

    removeVConsoleDebug() {
      this.vConsole?.destroy();
    }

  },

  // beforeDestroy 废弃，使用 beforeUnmount
  beforeUnmount() {

    this.removeVConsoleDebug();

    this.scene = null;
    this.camera = null;
    this.renderer = null;
    this.stats = null;
    this.box = null;
    this.vConsole = null;

  }
}

</script>

<style>
#app {
  text-align: center;
  height: 100%;
}

</style>

五、CDN 方式使用 Eruda 、vConsole

1、Eruda   使用 CDN 直接插入到 HTML

<script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.min.js"></script>
<script>eruda.init()</script>

2、vConsole  使用 CDN 直接插入到 HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

六、其他

参考博文：

Vue CLI + VUE +vConsole/eruda 在移动端进行调试_bubbleTg的博客-程序员宅基地_vue 使用eruda