java学习网 java教程视频 java论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 455|回复: 69
收起左侧

JavaScript全栈开发-工具篇(上)

  [复制链接]

503

主题

548

帖子

3428

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3428
发表于 2020-8-6 22:49:12 | 显示全部楼层 |阅读模式
文章目录



四、测试工具
1. 单元测试
单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。常见的单元测试工具有:
* QUnit
* NodeUnit

1.1 前端单元测试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

可通过命令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

如需用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

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
PageSpeed是Google开源的优化Web,加速Web加载的工具。
1) 测试示例
在PageSpeed Insights页面(https://developers.google.com/speed/pagespeed/insights/)输入待测试的地址。



2) 测试结果
可根据移动设备及桌面设备给出问题及修复建议。


2.2 Apache Bench

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. 测试工具扩展阅读


五、调试工具

1. 浏览器工具
1.1 Chrome 开发者工具
Chrome浏览器的开发者工具能进行DOM树节点的各种操作,CSS样式各种操作,网络请求的跟踪,JavaScript源码断点调试,性能分析,资源(CPU,内存)分析,页面资源分类浏览,控制台等功能。

1.2 FireBug插件
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

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

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

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语言全栈开发的角度进行阐述,涉及的工具不一定是最好的,也不一定最适合所有的开发者,况且不同的开发语言所用到的开发调试工具差别很大。而且随着时间的发展,软件行业的进步,开源社区的贡献,会涌现越来越多的优化软件。

由于本文主题的关系,所介绍的工具只是简单引入,点到即止,详细的介绍需要参看工具官网或者研究源代码才可以作深度的了解。
--------------------------------------------------------------------------
原文作者:腾讯工程师龙付成。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

22

帖子

32

积分

新手上路

Rank: 1

积分
32
发表于 2020-8-16 01:26:54 | 显示全部楼层
java自学
回复

使用道具 举报

0

主题

18

帖子

26

积分

终身VIP会员

Rank: 5Rank: 5

积分
26
发表于 2020-8-17 04:53:14 | 显示全部楼层
java学习网www.javaj.cn
回复

使用道具 举报

0

主题

18

帖子

26

积分

终身VIP会员

Rank: 5Rank: 5

积分
26
发表于 2020-8-18 07:38:44 | 显示全部楼层
学习java可以做什么
回复

使用道具 举报

0

主题

20

帖子

29

积分

终身VIP会员

Rank: 5Rank: 5

积分
29
发表于 2020-8-18 10:24:52 | 显示全部楼层
怎么学java
回复

使用道具 举报

0

主题

26

帖子

38

积分

终身VIP会员

Rank: 5Rank: 5

积分
38
发表于 2020-8-19 04:27:08 | 显示全部楼层
java从入门到精通pdf
回复

使用道具 举报

0

主题

28

帖子

41

积分

终身VIP会员

Rank: 5Rank: 5

积分
41
发表于 2020-8-21 17:46:00 | 显示全部楼层
java做网页教程
回复

使用道具 举报

0

主题

28

帖子

41

积分

新手上路

Rank: 1

积分
41
发表于 2020-8-21 23:13:28 | 显示全部楼层
培训java的机构
回复

使用道具 举报

0

主题

24

帖子

35

积分

新手上路

Rank: 1

积分
35
发表于 2020-8-23 06:30:56 | 显示全部楼层
现在学java有前途吗
回复

使用道具 举报

0

主题

22

帖子

32

积分

终身VIP会员

Rank: 5Rank: 5

积分
32
发表于 2020-8-23 10:43:08 | 显示全部楼层
java贴吧
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

顶部qrcode底部
请扫码本站微信公众号

QQ|Archiver|手机版|sitemap.xml|java教程视频 ( 豫ICP备2020032868号 )

GMT+8, 2020-11-30 00:51

Powered by www.javaj.cn

Copyright © 2001-2020.

快速回复 返回顶部 返回列表