JavaScript | 浏览器调试与代码测试

最新推荐文章于 2021-02-18 15:21:03 发布

ceynri

最新推荐文章于 2021-02-18 15:21:03 发布

阅读量414

点赞数

分类专栏：前端笔记 JavaScript

本文链接：https://blog.csdn.net/weixin_41596737/article/details/100335904

版权

笔记同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端

25 篇文章 1 订阅

订阅专栏

JavaScript

20 篇文章 0 订阅

订阅专栏

介绍如何使用现代浏览器进行简单的代码调试与编写自动化测试。

浏览器控制台

在浏览器（如 Firefox 与 Chrome）中的控制台测试功能时，换行需要使用 Shift+Enter 键，单独的 Enter 键会直接运行代码。

或者尝试以下方法：

(function() {
    "use strict";

    // 脚本代码...

})

Chrome 调试快捷键

快捷键	功能
F8	继续执行
F10	下一步（跳过函数）
F11	下一步（进入函数）
Shift+F11	执行到函数末尾

此外，在代码的某一行右键菜单中有一个“Continue to here”的选项运行代码到指定位置，十分方便。

debugger 命令

function hello(name) {
  let phrase = `Hello, ${name}!`;
  debugger;  // <-- 调试器会在这停止
  say(phrase);
}

日志记录

console.log(msg);

消息会发送到控制台中。

代码编写规范

javascript.info 上有一篇反讽糟糕的编写习惯的文章值得一阅：ninja code

自动化测试

常用库

在原教程中使用了一下 JavaScript 库进行测试：

Mocha —— 核心框架：提供了包括 describe 和 it 的通用型测试函数和运行测试的主函数。
Chai —— 提供很多断言支持的库。它可以用很多不同的断言。现在我们只需要用 assert.equal。
Sinon —— 用于监视函数、模拟内置函数和其他函数的库。

样例

function pow() {
  return 8; // :) 我们作弊啦！
}

describe("pow", function() {

  it("2 raised to power 3 is 8", function() {
    assert.equal(pow(2, 3), 8);
  });

  it("3 raised to power 3 is 27", function() {
    assert.equal(pow(3, 3), 27);
  });

});

describe("title", function() { ... })

表示我们正在描述的功能是什么。用于组织 it 代码块。

it("title", function() { ... })

it 里面的 “title” 中我们以人类可读的方式描述特定的用例，第二个参数是一个测试它的函数。

最好一个it函数体内写一个测试，否则前面的测试报错会停止后面的测试。

assert.equal(value1, value2)

it 块中的代码。

将改代码包含进HTML页面中：

<!DOCTYPE html>
<html>
<head>
  <!-- add mocha css, to show results -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
  <!-- add mocha framework code -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
  <script>
    mocha.setup("bdd"); // minimal setup
  </script>
  <!-- add chai -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
  <script>
    // chai has a lot of stuff, let's make assert global
    let assert = chai.assert;
  </script>
</head>

<body>

  <script>
    function pow() {
      return 8; // :) 我们作弊啦！
    }
  </script>

  <!-- the script with tests (describe, it...) -->
  <script src="test.js"></script>

  <!-- the element with id="mocha" will contain test results -->
  <div id="mocha"></div>

  <!-- run tests! -->
  <script>
    mocha.run();
  </script>
</body>

</html>

该页面内容可分为四部分：

<head> 为测试添加第三方库和样式文件。
<script> 包含测试函数，在我们的例子中 --和 pow 相关的代码。
test.js 测试代码 – 包含上面 describe("pow", ...)。
HTML 元素 <div id="mocha"> 将会被 Mocha 用来输出结果。

测试将以 mocha.run() 命令开始。

效果：

另：测试函数支持嵌套。

其他函数

包含于Mocha库中还有一些函数。

例如 before/after 和 beforeEach/afterEach

例子：

describe("test", function() {

  before(() => alert("Testing started – before all tests"));
  after(() => alert("Testing finished – after all tests"));

  beforeEach(() => alert("Before a test – enter a test"));
  afterEach(() => alert("After a test – exit a test"));

  it("test 1", () => alert(1));
  it("test 2", () => alert(2));

});

其他断言

Chai库中的常用断言例如：

断言函数	作用
assert.equal(value1, value2)	检测相等 value1 == value2
assert.strictEqual(value1, value2)	检测严格相等 value1 === value2
assert.notEqual, assert.notStrictEqual	刚好和上面做相反的检查
assert.isTrue(value)	检查 value === true
assert.isFalse(value)	检查 value === false
assert.isNaN(value)	检查 value === NaN