文章目录
四、测试工具
1. 单元测试
单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。常见的单元测试工具有:
* QUnit
* NodeUnit
1.1 前端单元测试QUnit
首页:http://qunitjs.com
源码:https://github.com/jquery/qunit
QUnit是jQuery团队开发的JavaScript单元测试工具,功能强大且使用简单。目前所有的JQuery代码都使用QUnit进行测试,原生的JavaScript也可以使用QUnit。
1) 测试结果页面 qunit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.18.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
<script src="js/qunitcase.js"></script>
</body>
</html>
2) 单元测试脚本文件 qunitcase.js
QUnit.test("hello test", function (assert) {
assert.ok(1 == "1", "相等比较");
assert.ok(1 === "1", "全等比较");
});
3) 测试结果
1.2 后端单元测试NodeUnit
首页:https://github.com/caolan/nodeunit
可通过命令npm install nodeunit -g进行npm全局安装。前面构建工具Grunt也有NodeUnit的插件。
1) 单元测试脚本示例 nodeunitcase.js
exports.testSomething1 = function (test) {
test.ok(1 == "1", "相等比较");
test.done();
};
exports.testSomething2 = function (test) {
test.ok(1 === "1", "全等比较");
test.done();
};
2) 命令行界面执行测试
在项目根目录下运行命令:
nodeunit nodeunitcase.js
3) 测试结果
1.3 NodeJS自带测试模块Assert
API首页:https://nodejs.org/api/assert.html
如需用NodeJS自带测试模块来断言测试,需用 require('assert') 添加模块引用。
assert.equal(actual, expected, message) 方法执行 actual 与 expected 的浅拷贝比较(类似于==),相等时不作任何输出,不等的时候输出message,并抛出AssertError异常。
1) 测试代码 assertcase.js
var assert = require("assert");
assert.equal(1 == "1", true, "equal test");
assert.equal(1 === "1", true,"congruent test");
2) 命令行运行测试
在项目根目录下运行命令 或 开发工具右键assertcase.js运行测试
node assertcase.js
3) 测试结果
1.4 Mocha
首页:http://mochajs.org
源码:https://github.com/mochajs/mocha
Mocha是一个功能丰富能运行在浏览器端及Node.js程序中的测试框架,支持异步测试,测试覆盖度报告,JS API测试,能和任何Assert集成等功能。详见首页的功能特性。可通过 npm install mocha -g 进行全局安装。mocha默认为运行项目文件夹test目录下的测试脚本文件。
Mocha在浏览器端的测试详见官文文档。
1) 测试代码 mochacase.js
var assert = require("assert");
describe('Array', function () {
describe('#indexOf()', function () {
it('should return -1 when the value is not present', function () {
assert.equal(-1, [1, 2, 3].indexOf(5));
assert.equal(-1, [1, 2, 3].indexOf(4));
});
});
describe('#indexOf()', function () {
it('should return -1 when the value is not present', function () {
assert.equal(1, [1, 2, 3].indexOf(2));
assert.equal(0, [1, 2, 3].indexOf(3));
});
});
});
2) 命令行运行代码
在项目根目录下运行命令:
mocha
3) 测试结果
1.5 单元测试工具小结
不同的测试工具适合不同的应用场景,开发者可根据自己需求选择合适的开发工具。
-- NodeJS系统自带的Assert模块能满足NodeJS简单测试断言的需求。
-- QUnit适合前端JavaScript代码的测试
-- NodeUnit适合后端JavaScript代码的测试
-- Mocha适合前后端(浏览器端,NodeJS端)JavaScript代码的测试,功能相对更丰富
1.6 测试工具扩展阅读
测试驱动开发(TDD,Test-Driven Development):
行为驱动开发(BDD,Behavior-Driven Development):Cucumber.js,Vow
2. 性能测试
常见的Web性能测试工具有
* PageSpeed Insights
* Apache Bench
2.1 PageSpeed Insights
首页:https://developers.google.com/speed/pagespeed
PageSpeed是Google开源的优化Web,加速Web加载的工具。
1) 测试示例
在PageSpeed Insights页面(https://developers.google.com/speed/pagespeed/insights/)输入待测试的地址。
2) 测试结果
可根据移动设备及桌面设备给出问题及修复建议。
2.2 Apache Bench
首页:http://httpd.apache.org
Apache服务器自带Apache Bench (ab)压力测试工具(ab程序在Apache安装目录的bin文件夹下),可用来测试web性能。其用法是在命令行执行:ab [options] [http://]hostname[:port]/path。options参数详见帮助ab -h。
ab常用参数:
-n:总共的请求执行数,默认1
-c:并发数,默认1
-t:测试所进行的总时间,秒为单位,默认50000s
-p:POST时的数据文件
-w:以HTML表的格式输出结果
1) 测试示例
#执行5000次请求,并发200同时执行
ab -n 5000 -c 200 http://localhost/index
2) 测试结果
This is ApacheBench, Version 2.3 <$Revision: 1638069 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking localhost/index (be patient).....done
Server Software:
Server Hostname: localhost/index
Server Port: 80
Document Path: /
Document Length: 142 bytes
Concurrency Level: 10
Time taken for tests: 0.173 seconds
Complete requests: 100
Failed requests: 0
Non-2xx responses: 100
Total transferred: 54100 bytes
HTML transferred: 14200 bytes
Requests per second: 577.98 [#/sec] (mean)
Time per request: 17.302 [ms] (mean)
Time per request: 1.730 [ms] (mean, across all concurrent requests)
Transfer rate: 305.36 [Kbytes/sec] received
Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 2 0.6 2 3
Processing: 2 14 3.6 14 24
Waiting: 2 9 4.7 9 24
Total: 4 16 3.6 16 26
Percentage of the requests served within a certain time (ms)
50% 16
66% 16
75% 16
80% 17
90% 18
95% 25
98% 26
99% 26
100% 26 (longest request)
2.3 性能测试工具小结
可用来进行性能测试的工具很多,后端的性能压力测试工具还有WebBench,LoadRunner等。而页面性能测试工具Show Slow,YSlow也是非常优秀的工具。
3. 测试工具扩展阅读
-- Bower:https://github.com/bower
-- Source Map:https://github.com/floridoo/gulp-sourcemaps
五、调试工具
1. 浏览器工具
1.1 Chrome 开发者工具
Chrome浏览器的开发者工具能进行DOM树节点的各种操作,CSS样式各种操作,网络请求的跟踪,JavaScript源码断点调试,性能分析,资源(CPU,内存)分析,页面资源分类浏览,控制台等功能。
1.2 FireBug插件
首页:http://getfirebug.com
FireBug是Firefox浏览器下的开发者插件,可对Web页面的html,css,JavaScript进行实时编辑,调试和监控。同时有支持IE6+,Opera,Safari,Chrome等浏览器的版本Firebug Lite(http://getfirebug.com/firebuglite)。
1.3 Chrome Inspect开发者工具
Chrome的Inspect工具具备在PC上的Chrome调试手机Chrome页面的能力。
1) 手机USB线连接PC,启用手机允许调试功能
2) 在PC上打开Chrome,并在地址栏输入 chrome://inspect,出现手机连接成功的界面。如图一。
3) 在手机上打开Chrome,并打开任意一个Web页面。PC上Chrome的Inspect界面出现手机Chrome上已打开的页面。如图二。
4) 在其中一个打开的页面下点击inspect就可以进到chrome的开发者工具调试页面了。如图三。
2. Http代理工具
2.1 Fiddler
首页:http://www.telerik.com/fiddler
Fiddler是一款http协议调试代理工具(基于.net开发),支持Web调试,性能测试,Web会话维护,安全测试,Http/Https通信记录,自定义插件扩展等功能特性,是Web开发,Web移动开发最常用工具之一。同时其包含强大的基于事件脚本的子系统,支持.net扩展,满足自定义需求。
步骤:
1) 在PC上配置Fiddler代理(Tools->Fiddler Option->Connections->勾选Allow Remote computer to connect,Fiddler listens on port为8888端口),打开无线网卡,并连接Wifi
2) 手机打开并连接Wifi,长按已连接Wifi->修改网络配置->代理设置选手动->代理主机名输入PC的无线网卡IP地址->代理服务器端口号输入Fiddler的8888端口->存储
3) 在手机浏览器中打开网页,在Fiddler中可看到手机的http请求
注意事项:
1) 手机和PC都连接同一个wifi网络确保PC和手机在同一个网段,可互访。
2) 有时在配置代理及手机Wifi代理都正确的情况下,有可能需要清一下Fiddler的缓存(Tools->Clear WinINet Cache和Cookie)才可以正常连接。
2.2 Fiddler插件-Rosin
首页:https://github.com/AlloyTeam/Rosin
Rosin是Fiddler的插件,可以指定页面过滤规则,接收该页面的console输出的日志,支持对象属性输出及JSON对象树查看。这对于查看移动端web页面的日志输出,调试移动端web很有帮助。具体使用方法见Rosin首页介绍。
2.3 Fiddler插件-Willow
首页:http://km.oa.com/group/willow @@@ 作者为yunishi,dollyden。
Willow作为Fiddler的插件,可以扩展Fiddler的功能,如统计数据包、修改Host、请求重定向、编码转换、低网速模拟、断点调试以及过滤HTTP请求。
该插件可用于将手机Web页面重定向到PC端本地页面文件的能力,可方便地进行手机端页面调试。
2.4 Fiddler插件-SSI Proxy
首页:http://tid.tenpay.com/labs/ssiproxy/index.html @@@
SSI Proxy是财付通设计中心(TID)基于Fiddler开发的插件工具,是业界内首个用于解析include指令的代理工具, 主要亮点是HTML页面模块化开发(使HTML页面支持include指令), 本地开发、调试SHTML页面无需搭建服务器。
2.5 微信、手机QQ WebView及腾讯手机QQ浏览器开发者工具-Inspect @@@
微信、手机QQ及腾讯手机QQ浏览器都内置X5内核,手机Web的调试可以利用MIG事业群自研的Inspect工具进行开发调试。原创调试方法参见 浏览器产品部BrianZheng(郑清江)文章《手机QQ浏览器调试大揭秘》,地址:http://km.oa.com/group/22486/articles/show/221881
简略步骤:
1) 手机端
-- QQ浏览器调试版下载安装并启动:下载地址:http://x5.cs0309.imtt.qq.com/inspector/page/list.html(QQ浏览器选择左侧qb菜单,右边选择最新版本)
-- TBS Inspector下载安装并启动:下载地址:http://x5.cs0309.imtt.qq.com/inspector/page/list.html(QQ浏览器选择左侧tbs菜单,右边选择最新版本)
-- 打开待调试页面:通过扫二维码、复制链接等方式
-- 数据线连接PC与手机
2) PC端
-- 安装python并在安装时勾选添加到系统环境目录。Python下载:https://www.python.org/downloads/
-- 下载python写的x5调试客户端,下载完成后解压缩。下载地址:http://res.imtt.qq.com/tbs_inspect/sq_webview_debug.zip
-- 进到x5调试客户端解压后的目录,运行 inspector.py 文件在9223端口上侦听PC上面chrome的调试监视请求
-- 打开chrome,进到http://localhost:9222页面,可以看到手机QQ浏览器打开的页面列表,点击其中待调试的页面标签即可进到chrome开发工具进行调试。
3. 调试工具小结
调试工具一般为浏览器的开发者工具或自身提供的inspect来满足开发者开发、调试的需要。也有借助Fiddler这个工具及衍生的各类插件完善补充Fiddler的功能,来实现对PC Web端及手机Web端快速开发的方式。开发者根据自己实际业务的需求进行选择。
六、总结
工欲善其事,必先利其器,对于全栈工程师来说,有强大的工具在手才可以提高开发和调试的效率。但是工具的选择和使用因人,因场景不同而不同,以上所述只是以JavaScript语言全栈开发的角度进行阐述,涉及的工具不一定是最好的,也不一定最适合所有的开发者,况且不同的开发语言所用到的开发调试工具差别很大。而且随着时间的发展,软件行业的进步,开源社区的贡献,会涌现越来越多的优化软件。
由于本文主题的关系,所介绍的工具只是简单引入,点到即止,详细的介绍需要参看工具官网或者研究源代码才可以作深度的了解。
--------------------------------------------------------------------------
原文作者:腾讯工程师龙付成。
来源:腾讯内部KM论坛。