移动端调试模式vConsole

vConsole:

　　一个轻量、可拓展、针对手机网页的前端开发者调试面板，是微信官方出品，主要用于移动调试。

vConsole特点：

  • 查看控制台日志
  • 查看网络请求
  • 查看文档元素
  • 查看 Cookie、LocalStorage 和 SessionStorage
  • 手动执行JS命令
  • 自定义插件

功能预览：http://wechatfe.github.io/vconsole/demo.html

npm地址：https://www.npmjs.com/package/vconsole

demo1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是一个页面balaba
    <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
    </script>
</body>
</html>

demo2：

npm install vconsole
import VConsole from 'vconsole';

const vConsole = new VConsole();
// or init with options
const vConsole = new VConsole({ maxLogNumber: 1000 });

// call `console` methods as usual
console.log('Hello world');

// remove it when you finish debugging
vConsole.destroy();

展示：

 

posted @ 2021-06-11 15:11  惊蛰丶  阅读(439)  评论(0)  编辑  收藏  举报