移动H5调试神器 vConsole

做移动H5时，经常需要真机调试，但是手机端没有像Chrome控制台那样的开发者工具，对于network、console日志没办法查看，所以便有了今天的开发神器——vConsole。

vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。

功能特性

日志(Logs)： console.log|info|error|…
网络(Network)： XMLHttpRequest, Fetch, sendBeacon
节点(Element)： HTML 节点树
存储(Storage)： Cookies, LocalStorage, SessionStorage
手动执行 JS 命令行
自定义插件

使用

方法一：使用 npm（推荐）

npm install vconsole

Import 并初始化后，即可使用 console.log 功能，如 Chrome devtools 上一样。

import VConsole from 'vconsole';const vConsole = new VConsole();
// 或者使用配置参数来初始化，详情见文档
const vConsole = new VConsole({ theme: 'dark' });// 接下来即可照常使用 `console` 等方法
console.log('Hello world');// 结束调试后，可移除掉
vConsole.destroy();

方法二：使用 CDN 直接插入到 HTML

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

可用的 CDN：

https://unpkg.com/vconsole@latest/dist/vconsole.min.js
https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js
https://unpkg.com/vconsole/dist/vconsole.min.js

手机效果

详细文档可查看：https://gitee.com/mirrors/vConsole/

移动H5调试神器 vConsole相关推荐

移动端调试神器 VConsole与eruda
博客内容来自: https://www.jianshu.com/p/a05b90ab03e4 我们在写webapp或者移动端网页需要嵌入到app时候,尤其是在APP内置的webView上加载我们的页面 ...
移动端调试神器vConsole
介绍平时在web应用开发过程中,我们可以console.log去输出一些信息或者看接口返回的信息及接口性能等情况,但是在移动端,也就是在手机上,我们是看不到的. 这种情况下,可以选择使用alert弹 ...
移动端调试神器——vconsole
详情请点击链接: https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
微信公众号(移动端网页)必备的调试神器
1.移动端调试神器vConsole 由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼.之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼 ...
python 如何边改代码边调试_Python 代码调试神器：PySnooper
给大家推荐本我自己写的电子书<PyCharm中文指南>,把各种 PyCharm 的高效的使用技巧用GIF动态图的形式展示出来.有兴趣的可以看它的在线文档: http://pycharm.i ...
json.tojsonstring 导致cpu飙高_阿里调试神器立功了!进程导致Kubernetes节点CPU飙高的排查与解决...
来源:https://www.cnblogs.com/maxzhang1985/p/12673160.html 一.发现问题在一次系统上线后,我们发现某几个节点在长时间运行后会出现CPU持续飙升的问 ...
Vue调试神器vue-devtools - 插件下载安装
文章目录 Google如何安装调试Vue的神器`vue-devtools` ? 安装介绍: demo实例 - 演示代码: 相关文章链接: 1. https://github.com/vuejs/vue ...
嵌入式调试神器-虚拟示波器之JScope
调试神器-虚拟示波器之JScope 在进行嵌入式开发过程中,需要查看某些实时变化的变量,以MDK为例我们通常都是进入DEBUG模式下去肉眼观察,这种方式不太人性化,也比较容易错失掉许多细节.为此我介绍 ...
电子工程师必备的调试神器—H7-TOOL
摘要:今天给小伙伴推荐一款好用的调试神器-H7-TOOL.相信搞嵌入式单片机的都知道正点原子和野火,其实还有一家做单片机也很强--安富莱电子.今天说的就是武汉安富莱电子家的一款开源的H7-TOOL开发 ...

移动H5调试神器 vConsole

使用

方法一：使用 npm（推荐）

方法二：使用 CDN 直接插入到 HTML

手机效果

移动H5调试神器 vConsole相关推荐

最新文章

热门文章