手机前端开发调试利器 – vConsole

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

特性：

  • 查看 console 日志
  • 查看网络请求
  • 手动执行 JS 命令行
  • 自定义插件

上手

下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js）
或者使用 npm 安装：

npm install vconsole

引入 dist/vconsole.min.js 到项目中：

1
2
3
4
5
<script src="path/to/vconsole.min.js"></script>
<script>
console.log('Hello world');
// 然后点击右下角 vConsole 按钮即可查看到 log
</script>

 demo代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vConsole/Demo</title>
    <link href="weui.min.css" rel="stylesheet"/>
    <link href="demo.css?v=1.1.0" rel="stylesheet"/>
 
    <script src="zepto.min.js"></script>
    <script src="zepto.touch.min.js"></script>
 
    <!-- 引入vConsole的JS库 -->
    <script src="vconsole.min.js?v=2.2.0"></script>
</head>
<body ontouchstart>
    <div class="page">
        <h1 class="page_title">vConsole</h1>
        <div class="weui_text_area">
            <p class="weui_msg_desc">点击下面的按钮，即可打印 log。<br/>点击右下角按钮，即可查看 log。</p>
        </div>
        <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="log">普通日志(log)</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="info">信息日志(info)</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="debug">调试日志(debug)</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="warn">警告日志(warn)</a>
        <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="error">报错日志(error)</a>
 
        <a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_obj">打印Object</a>
        <a href="javascript:;" class="weui_btn weui_btn_default js_btn_trigger_error">触发JS Error</a>
        <a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_sys">打印到系统面板</a>
        <a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax">发起AJAX</a>
 
         
    </div>
    <div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
</body>
 
<script>
console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');
 
$('.js_btn_log').on('tap', function(e) {
    var type = $(this).data('type');
    console[type](type); // 例如，console.log(type)
    showTips();
});
$('.js_btn_log_obj').on('tap', function(e) {
    console.log({
        string: 'foobar',
        number: 233,
        boolean: true,
        object: {
            foo: 'bar'
        },
        array: [8, 7, 6],
        func: function() {}
    });
    showTips();
});
$('.js_btn_trigger_error').on('tap', function(e) {
    showTips();
    var err = undefined;
    err.a = 1;
});
$('.js_btn_log_sys').on('tap', function(e) {
    // 输出到系统面板
    console.log('[system]', '当前时间戳:', (+new Date()));
    showTips();
});
$('.js_btn_ajax').on('tap', function(e) {
  // 发起一个AJAX
  $.get('ajax.html', function(resp) {
    console.log(resp);
  });
  showTips();
});
 
// 用于页面内展示顶部tips
var tipsTimer;
function showTips() {
    tipsTimer && clearTimeout(tipsTimer);
    $('#js_tips').show();
    tipsTimer = setTimeout(function() {
        $('#js_tips').hide();
    }, 1500);
}
</script>
</html>
posted @ 2018-12-18 17:24  小鱼2015  阅读(268)  评论(0)    收藏  举报