前端读者 | 前端开发者调试面板vConsole
2024-09-04 13:59:18
来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。
特性
- 查看 console 日志
- 查看网络请求
- 查看页面 element 结构
- 查看 Cookies 和 localStorage
- 手动执行 JS 命令行
- 自定义插件
上手
下载 vConsole 的最新版本。(不要直接下载 dev 分支下的 dist/vconsole.min.js
)
或者使用 npm 安装:
npm install vconsole
引入 dist/vconsole.min.js
到项目中:
<script src="path/to/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>
如果使用了 AMD/CMD 规范,可在 module 内使用 require()
引入模块:
var vConsole = require('path/to/vconsole.min.js');
打印日志
- 与 PC 端打印 log 一致,可直接使用 console.log() 等方法直接打印日志
console.log('Hello World');
未加载 vConsole 模块时,console.log() 会直接打印到原生控制台中;加载 vConsole 后,日志会打印到页面前端+原生控制台
- 支持 4 种不同类型的日志,会以不同的颜色输出到前端面板
console.log('foo'); //白底黑字
console.info('bar'); //白底紫字
console.debug('oh'); //白底黄字
console.warn('foo'); //黄底黄字
console.error('bar'); //红底红字
- 支持打印 Object 对象,会以 JSON 字符串格式输出
var obj = {};
obj.foo = 'bar';
console.log(obj); // 打印出 {foo: 'bar'}
手机预览
最新文章
- 记得初学JS时候练个九九乘法表都写的要死要活
- nginx有关.htaccess小结
- Meet Python: little notes 3 - function
- Docker学习笔记 — 配置国内免费registry mirror
- JavaScript原型理解
- 借助adb与gdb确认app内存缓存中是否存在用户敏感数据
- Android用自己的app替换Launcher
- 【UOJ】【34】多项式乘法
- Hbase Basic Prerequisites
- 学习之spring属性文件注入
- 驱动之路-platform简例按键驱动☆☆☆
- C# #if DEBUG
- phpcms 源码分析四: 数据库类实现
- 关于采用MVC开发默认路由导致首页部分文件访问失效的临时解决方案
- Android开发实现HttpClient工具类
- VR元年,VR虚拟现实这只风口上的猪有怎样的变化?
- poj 2566 Bound Found
- docker pull centos慢问题的解决方案
- C++ Primer读书笔记(2)
- http指定状态码
热门文章
- TP-LINK TL-WN725N V2 / rtl8188eu Linux驱动安装
- JS 中类型鉴别
- Linux查看内核和系统版本
- python读书笔记-《A Byte of Python》中文第三版后半部分
- [Coding Practice] Maximum number of zeros in NxN matrix
- ES6中字符串的扩展
- SpringBoot打war包并部署到tomcat下运行
- Item 11 谨慎地覆盖Clone
- 【BZOJ】1598: [Usaco2008 Mar]牛跑步
- 【51NOD-0】1018 排序