By Ne0 — May 20, 2024

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

一、简单介绍

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

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

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

二、Eruda

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

镜像地址：

这里有篇 Eruda的较详细介绍，有兴趣的可以去看看：

1、安装

npm install eruda --save

2、使用

import eruda from ‘eruda’
eruda.init()

3、实用

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

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

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地址：

镜像地址：

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 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）