JavaScript全栈开发-工具篇（下）
文章目录
四、测试工具
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论坛。
腾讯云开发者
