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论坛。

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-09-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

Appium+python自动化16-启动ios上Safari浏览器

前言 在mac上搭建appium踩了不少坑,先是版本低了,启动后无限重启模拟器。后来全部升级最新版本,就稳稳的了。本篇介绍如何用appium启动ios上的saf...

5274
来自专栏性能与架构

linux查看CPU和内存的使用情况

image.png CPU使用情况 通常使用top命令查看CPU的当前状态,如果是多核CPU,也可以看到每核的信息 # top 执行后按数字1,可以显示多个CP...

3857
来自专栏乐百川的学习频道

Visual Studio Code介绍

应该有很多人都知道Atom编辑器吧,它是由Github开发的一个跨平台的编辑器。它使用了跨平台的Electron,用前端技术编写图形界面。一开始我也推荐过这个编...

2825
来自专栏DeveWork

WordPress免插件仅代码实现文章归档(模板页面)I

许多博友喜欢为自己的博客建立一个文章归档页面。WordPress 可以用插件来实现,但我们一贯遵守可以不用插件则不用的准则,现在Jeff 就为大家带来免插件仅代...

2208
来自专栏君赏技术博客

第一次和你见面,我就深深的爱上你-Xcode Bot

最近研究起了 APP 的自动化测试,发现了 Xcode Bot自动化打包测试发布的功能,就开始研究起来。

1891
来自专栏老马寒门IT

05-移动端开发教程-CSS3兼容处理

CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准...

2316
来自专栏Jerry的SAP技术分享

SAP CRM点了附件的超链接后报错的处理方式

SAP CRM系统里,点击了附件的这些超链接后,如果是文本文件,会在浏览器里打开。如果是其他类型的文件,会弹出下载对话框。

1012
来自专栏软件测试经验与教训

SoapUI测试WS接口实战

4469
来自专栏Jerry的SAP技术分享

SAP CRM和C4C的客户主数据修改历史记录查询

Change History assignment block里显示出了这条修改记录:

3072
来自专栏杨建荣的学习笔记

ASM基本配置问题(r5笔记第89天)

ASM自10g开始作为Grid的一部分,对于存储管理层的一个重大变革。重要性和丰富的功能就不多说了,主要的一点,是完全免费的。所以对于高端存储望而却步,而且不希...

2635

扫码关注云+社区

领取腾讯云代金券