移动端网页调试利器-vConsole

追格官方小助手/ 2022年11月15日/ 开源推荐/ 浏览 1413

熟悉微信小程序开发的朋友,大概对 vConsole 这个微信小程序的官方调试工具是比较熟悉的。


如果在开发调试移动端网页的时候,也可以使用这个工具,是不是也挺方便的。


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


vConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。


功能特性


日志(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>


开源地址:


https://toscode.gitee.com/Tencent/vConsole


发表评论

暂无评论,抢个沙发...

客服 工单