zoukankan      html  css  js  c++  java
  • 手机前端开发调试利器 – vConsole

    我们在开发手机版网页的时候,常常会出现下面的情景:

    (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log;

    (2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息。

    如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了。

    作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志?

    答案是肯定的。

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

    特性:

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

    上手

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

    npm install vconsole

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

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

     demo代码:

    <!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>
    
     
  • 相关阅读:
    yii 引入文件
    CodeForces 621C Wet Shark and Flowers
    面试题题解
    POJ 2251 Dungeon Master
    HDU 5935 Car(模拟)
    HDU 5938 Four Operations(暴力枚举)
    CodeForces 722C Destroying Array(并查集)
    HDU 5547 Sudoku(dfs)
    HDU 5583 Kingdom of Black and White(模拟)
    HDU 5512 Pagodas(等差数列)
  • 原文地址:https://www.cnblogs.com/axl234/p/7818617.html
Copyright © 2011-2022 走看看