h5调试工具

vConsole

方式一(推荐)

使用npm安装的方式引入

$ npm install vconsole

import VConsole from 'vconsole';

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

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

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

方式二

使用CDN方式引入

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

Eruda

方式一

使用npm安装的方式引入

npm install eruda --save

<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

方式二

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

方式三(推荐)

动态引用。最好是根据是否开启调试来动态加载。还可以，判断编译环境，决定是否需要加载。一般来说，只有在dev需要加载，还可以加上是否在手机端中（PC端本身就有控制台）

;(function () {
    var src = 'https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();