细数腾讯开源的前端项目及实践

感谢Tencent提供如此丰富的前端开源项目

1. TSW Tencent Server Web

官方GitHub地址

中文文档

Tencent Server Web(TSW) 是一套面向 WEB 前端开发者,以提升问题定位效率为初衷,提供染色抓包全息日志异常发现的 Node.js 基础设施。TSW 关注业务的运维监控能力,适用于 http、websocket 协议的业务场景,可无缝与现有应用(Koa、Express)进行整合。

Tencent Server Web的介绍及私有部署

 

2. QTAF

官方GitHub地址

中文文档

QTA测试框架

 

3. Feflow

官方GitHub地址

中文文档

Feflow (读音 /ˈfefləʊ/)是腾讯开源的用于提升工程效率的前端工作流和规范工具。最新版本是v0.15.8,托管在Github上:feflow。目前已经在NOW直播、花样直播、花样交友、手Q附近、群视频、群送礼、回音、应用宝、企鹅号等业务广泛使用。有80+ WEB/IOS/Andriod 稳定用户,累计投入生产项目达到240+。

Feflow 借鉴了 Pipline 的思想,将日常的研发工作划分为:初始化、本地开发、打包构建、检查、发布上线五个步骤。分别对应 init、dev、build、test和deploy五个基本命令。

除了服务好基本的开发工作流和规范,Feflow 提供了易于扩展的插件机制,用于打造团队统一的工具链生态。

 

 

未完待续!

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中。 标签:腾讯  前端工具
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值