【文件属性】：
文件名称：腾讯开源的手机前端开发调试利器 vConsole.zip
文件大小：514KB
文件格式：ZIP
更新时间：2022-08-08 00:30:05
开源项目
1 前言我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log； (2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？2 vConsole前端调试面板莫慌，抱紧vConsole！vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。细心的同学可能会发现上面的log颜色各有不同。与电脑端的Developer Tools一样，开发者可以通过调用不同的方法来打出不同的颜色，以便快速区分日志类型：console.log('foo'); // 白底黑字
console.info('bar'); // 白底紫字
console.debug('oh'); // 白底黄字
console.warn('foo'); // 黄底黄字
console.error('bar'); // 红底红字第二个是“系统”面板，vConsole会自动将一些基础信息（如系统版本）打印出来，方便开发者定位问题。若页面是在微信内置浏览器中打开的，vConsole还会打印出微信版本号、当前网络类型等额外信息。默认情况下，vConsole的面板是隐藏起来的。我们可以点击右下角的“面板”悬浮按钮来显示vConsole面板。3 使用方法Talk is cheap, show me the code.首先，在需要展示日志的页面引入vConsole模块。我们建议在<head>中而非<body>底部引入，方便后续的新版本vConsole在页面初始化时预埋各种debug钩子。引入后，会自动生成window.vConsole对象实例。<head>
[removed][removed]
</head>对于更通常的情况，我们只需在调试模式下才启用vConsole，平时用户无需看到调试面板。这时候就需要开发者自行判断引入模块的时机。以PHP为例，通过判断URL中有无 dev_mode参数来选择性加载vConsole：<?php if($_GET['dev_mode'=='1'){?>
[removed][removed]
<?php}?>如果项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式，可以在module中使用require()引入vConsole：var vConsole =require('path/to/vconsole.min.js');好了，怎么打印log呢？与电脑端一致，可以直接使用console.log()等方法来打印日志，目前支持的方法有：console.log('foo');
console.info('bar');
console.debug('oh');
console.warn('foo');
console.error('bar');若页面未加载vConsole模块，console.log()会直接输出到原生控制台中；加载模块后，日志则会输出到原生控制台 前端面板。因此不必担心兼容性问题。引入模块后，vConsole会有一小段时间用于初始化工作，在渲染出面板HTML之前将无法立即打印log。因此，若要在引入模块后立即打印log，应使用vConsole.ready()方法：vConsole.ready(function() { console.log('Hello World');
});4 在线demo微信扫描以下二维码（或微信内长按图片识别二维码），即可体验vConsole面板。目前vConsole已开源到WeChatFE的Github中。
标签：腾讯 前端工具
【文件预览】：
vConsole-dev
----webpack.config.js(2KB)
----src()
--------log()
--------vconsole.d.ts(3KB)
--------lib()
--------element()
--------core()
--------vconsole.js(933B)
--------network()
--------storage()
----.babelrc(407B)
----CHANGELOG_CN.md(8KB)
----doc()
--------public_properties_methods_CN.md(4KB)
--------tutorial_CN.md(3KB)
--------a_doc_index.md(432B)
--------a_doc_index_CN.md(445B)
--------helper_functions.md(6KB)
--------plugin_building_a_plugin_CN.md(3KB)
--------plugin_building_a_plugin.md(2KB)
--------plugin_getting_started_CN.md(601B)
--------plugin_event_list.md(5KB)
--------tutorial.md(3KB)
--------public_properties_methods.md(4KB)
--------plugin_getting_started.md(500B)
--------plugin_event_list_CN.md(5KB)
--------helper_functions_CN.md(6KB)
----example()
--------demo1.html(5KB)
--------snapshot()
--------lib()
--------ajax.php(164B)
--------demo3.php(2KB)
--------demo2.php(2KB)
----README_CN.md(2KB)
----LICENSE(792B)
----test()
--------success.json(20B)
--------test.js(4KB)
--------log.html(3KB)
--------plugin.html(4KB)
--------webpack()
--------ajax.html(2KB)
----README.md(2KB)
----dist()
--------vconsole.min.d.ts(3KB)
--------vconsole.min.js(91KB)
----.editorconfig(405B)
----.gitignore(37B)
----CHANGELOG.md(7KB)
----package-lock.json(225KB)
----package.json(1KB)