Vue3 has been iterated steadily and is now available for production. Many projects have been upgraded to Vue3, debugging tools are not available during development, vue-devTools has been iterated to 6.0.0.beta15

The installation-free plugin for mobile Debug that I told you about is also getting an update. For details, click -> here

Github address, Star don’t get lost

Preview

Desktop use:

Mobile terminal use:

Experience immediately

CodePen Sample Code for Vue2

CodePen Sample Code for Vue3

Updated features:

  1. Support Vue3
  2. Compatible Vue2
  3. Optimize mobile interaction
  4. Supports simultaneous debugging of multiple App instances
  5. Support the latest plug-in system
  6. Compatible with Safari
  7. Compatible with wechat browser
  8. Compatible with ali MPass and other third-party containers

.

use

There are still two kinds of CDN import and NPM package import

NPM:

yarn add vconsole && yarn add vue-vconsole-devtools
Copy the code
import VConsole from "vconsole"
import { initPlugin } from 'vue-vconsole-devtools'
initPlugin(new VConsole())
Copy the code

CDN:

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue_plugin.js"></script>
<script>
  var vConsole = new window.VConsole();
  const Devtools = window.vueVconsoleDevtools["default"];
  Devtools.initPlugin(vConsole);
</script>
Copy the code

This update has a lot of pitfalls, which will be summarized in a follow-up article. I hope you can use this tool to solve your bugs quickly!

Note: The current version is based on Vue devTools 6.0.0.beta15