项目开辟时经常需要debug调试 , 但在移动端debug则会阻断代码运行 , 而且很难判定犯错在哪里 , 这里我们需要借助第三方插件 vconsole
![移动端调试工具vconsole安装](http://img12.hunanlong.com/exp/w=500/sign=c04908a7d862853592e0d221a0ef76f2/18d8bc3eb13533fad992e17ba5d3fd1f41345bba.jpg)
文章插图
方式/
1下载vconsole最新版本或者直接用npm下载nom install vconsole
![移动端调试工具vconsole安装](http://img12.hunanlong.com/exp/w=500/sign=ede634bc801001e94e3c140f880e7b06/48540923dd54564edc72996cbede9c82d1584f4b.jpg)
文章插图
2引入vconsole到项目中:
<script src=https://vvvtt.com/article/"path/to/vconsole.min.js">
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
![移动端调试工具vconsole安装](http://img12.hunanlong.com/exp/w=500/sign=01d751bdb13eb13544c7b7bb961fa8cb/d31b0ef41bd5ad6e5c1919bf8ccb39dbb7fd3c86.jpg)
文章插图
3或者经由过程import 初试化:
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化
![移动端调试工具vconsole安装](http://img12.hunanlong.com/exp/w=500/sign=763db14166600c33f079dec82a4d5134/5882b2b7d0a20cf42cf38c8a7b094b36acaf9907.jpg)
文章插图
4项目运行 , 点击页面右下角vconsole图标 , 即可看到debug内容
![移动端调试工具vconsole安装](http://img12.hunanlong.com/exp/w=500/sign=319a7ebebbfd5266a72b3c149b199799/1f178a82b9014a90465234e8a4773912b31bee73.jpg)
文章插图
5【移动端调试工具vconsole安装】若是想要查看接口挪用环境 , 和浏览器一样直接点击network按钮即可
![移动端调试工具vconsole安装](http://img12.hunanlong.com/exp/w=500/sign=65e3711fd7b44aed594ebee4831d876a/3c6d55fbb2fb43168ed9082f2da4462308f7d3a5.jpg)
文章插图
6
![移动端调试工具vconsole安装](http://img12.hunanlong.com/exp/w=500/sign=1b15772b281f95caa6f592b6f9177fc5/d1160924ab18972b5818729febcd7b899e510a40.jpg)
文章插图
以上内容就是移动端调试工具vconsole安装的内容啦 , 希望对你有所帮助哦!
推荐阅读
- 电脑端如何蓝牙连接莱仕达手柄
- 中国移动随e行wlan怎么用
- 小米5s如何进入开发者模式
- 端午节鸡蛋网兜怎么编
- 热血传奇客户端十周怎么下载
- 怎样 如何打开魅族手机的USB调试?
- 唐代贡茶及其弊端,经常喝绿茶的好处
- 梦想世界新下的客户端怎么变回老版本
- 对特殊儿童教育的看法 特殊儿童教育弊端
- 如何查看操作系统445端口的状态