vConsole-随地用的js console

介绍

最近在搞移动端开发,被各种兼容性bug搞得焦头烂额。

关键是还特喵的没办法调试。

良知大佬告诉了我一个叫 vConsole 的工具,由微信前端团队开发,开源,可以直接查看mobile web上的js console以及其他功能。贴一下官方的功能列表:

  • View console logs
  • View network requests
  • View document elements
  • View Cookies and localStorages
  • Execute JS command manually
  • Custom plugin

渣翻一下:

  • 查看控制台log
  • 查看网络请求
  • 查看dom元素
  • 查看Cookies和localStorages
  • 手动执行JS命令
  • 自定义插件

挺强大的哈。

安装和用法

用法也简单,可以用npm安装:

npm install vconsole

然后把它引用到html里面,new一个对象:

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

就可以了。打开你的页面,下面就会出现一个vconsole的小绿button,像这样:

console1.jpg

打开小绿button,会弹出一个工具面板:

console2.jpg

工具里面就是上述的功能了,东西太多我也不赘述。

有一个问题要说一下,由于是js写的工具,所以有一些限制,比如new vconsole 对象之前的console不会显示,所以要做调试要先new 再console。



评论

暂无评论

在这里输入