vconsole_移动端h5开启控制台的实现

更新日期: 2019-04-30阅读: 4.7k标签: 控制台

由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。


代码如下:

// 加载控制台
export const loadScript = (url, callback) => {
 const script = document.createElement('script')
 script.onload = () => callback()
 script.src = url
 document.body.appendChild(script)
}
 
loadScript(
'https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js',
 () => {
// eslint-disable-next-line
new VConsole()
 })

复制以上代码,在 main.js 引入,在手机上运行,即可出现如下按钮。 

 

或者使用npm 安装:

npm install vconsole

使用webpack,然后js代码中 

import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化

或者找到这个模块下面的 dist/vconsole.min.js ,然后复制到自己的项目中

<head>
    <script src="dist/vconsole.min.js"></script>
</head>
<!--建议在 `<head>` 中引入哦~ -->
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('VConsole is cool');
</script>


链接: https://fly63.com/article/detial/3141

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!