开篇比较大，后续有新感知再继续完善

一直使用的是console.log()来打印输出的形式，来debug，如果利用一下chrome的devtool工具来帮助我们debug会带来很大的遍历，如果有后端基础，例如javaweb中常用的log4j，强大的junit，这些辅助工具可以在项目的运行中给予我们很多的信息，可以快速的定位bug

chrome js debug

参考：在 Chrome DevTools 中调试 JavaScript 入门（需翻墙）

总结：

重现错误始终是调试的第一步。参考中的例子就是：

输入5，再输入1，点击相加按钮，结果却是51

找到错误后，打断点

  1. 开发者工具
  2. 进入 Sources 标签
  3. 点击 Event Listener Breakpoints(在最右边或者下面，看你拉伸的宽度)

事件监听断点可以对事件进行断点查看，例如我们的错误是点击相加按钮后出现了错误的结果，此时，我们就可以在 Mouse一栏中展开勾选click，注意在已经输好的5和1的情况下

tip：单步调试的几个常用按钮：

Step into next function call： 步进，遇到函数就进入内部

Step over next function call： 步进，但遇到函数就跳过(对其求值但不进入)

step out of current function： 跳出当前函数

打好断点后，可以直接调试，点击相加按钮，此时会跳到一个 document.addEventListener("click", event => ...，这里与官网讲述的不同，需要跳过这个函数，然后就到了function onClick() {

这样找到大致区域后，可以设置代码行断点，直接在源码上打断点即可，之后点Resume script execution，可以快速执行到断点行处

function updateLabel() {
  var addend1 = getNumber1();
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  // 在这行打断点即可
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

查看变量值

  1. Sources 面板上
  2. 点击 Watch
  3. Add Expression +
  4. 输入你想监测的变量或者表达式

例如： typeof sum，结果是string

利用Console

Console 可帮助您测试刚发现的错误的潜在解决方法，可以：输入变量的名称以在当前函数范围中查看其当前值、输入一个 JavaScript 分配语句以更改此值
  1. 按 Esc打开
  2. 直接输入parseInt(addend1) + parseInt(addend2)
  3. Enter后，输出6，说明了错误所在

以上就是google的devTool的get started调试入门部分，接下来，还可以看：

如何单步调试代码

Pause Your Code With Breakpoints-所有的断点类型

vscode debug

vscode vue debug

nodejs log

为什么需要log:

纯粹的在console里打印，不仅找不到应用信息，而且log没有分级，很难定位到问题所在

而且在node中，一般用pm2来跑服务，这样的话除非到pm2的运行log中查看log，不然不可直观的看到

js test

设想一下这样的场景：写了一个计算两个日期中相差几天的函数，但是我们不知道这个函数是不是正常工作啊？

需要给一些值去测一下，在一个项目中测试一个单独的函数不方便，于是我们新建一个单独的测试环境，例如建一个简单的rollup项目，在src目录新建一个index.js,util.js，把那个函数拷进util.js里面，加上export

export const days = (start, end)=> { ... }

然后在index.js里面就可以这样写：

import { days } from "./util";
console.log(days('2012-05-12', '2021-08-30')); 
console.log(days('2007-05-12', '2008-08-30')); 
console.log(days('2020-05-13', '2033-07-13')); 
console.log(days('2018-01-01', '2018-02-01')); 
console.log(days('2018-01-01', '2018-12-31')); 
console.log(days('2018-01-01', '2018-01-31'));

当然直接用node也行...，于是现在就得到了我们填入的测试数据的输出(用index.html引用打包后的js接口，在浏览器的控制台)，然后我们在去找到正确的数据进行比较....

说到这里...如果有java后端背景的同学想必就跳出来了，哇靠，这么麻烦吗？js里面就没有一个像junit的测试框架吗？

有的，那就是jest

回过头看一下我们的需求：

  1. 直接在项目里面测试，最好npm script就好，这样一行命令搞定
  2. 像junit一样，给予期望值，如果函数能通过则报ok

于是，jest的安装：直接npm install --save-dev jest，然后在你的npm scripts里面新增一个"test": "jest"即可

使用：像上述例子，我们直接在原本的项目中，新建一个util.test.js文件，然后写上：

const utils = require('./util.js');

test("from 2020-05-13 to 2033-07-13 is ", () => {
    expect(utils.days("2020-05-13", "2033-07-13")).toBe(4809);
});

test("from 2018-07-26 to 2018-09-04 is ", () => {
    expect(utils.days("2018-07-26", "2018-09-04")).toBe(40);
});

然后在命令行中敲：npm run test，于是结果就出来了：

> jest

 PASS  src/common/utils/util.test.js
  √ from 2020-05-13 to 2033-07-13 is  (7ms)
  √ from 2018-07-26 to 2018-09-04 is

 PASS  dist/common/utils/util.test.js
  √ from 2020-05-13 to 2033-07-13 is  (7ms)
  √ from 2018-07-26 to 2018-09-04 is  (1ms)

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        5.589s
Ran all test suites.

有一个插曲，一开始会报错，SecurityError: localStorage is not available for opaque origins #6769，这时候需要修改配置文件，而jest的配置项就可以直接写在package.json里面，新增如下即可：

"jest": {
    "verbose": true,
    "testURL": "http://localhost/"
},

注意这里因为我的项目已经build过一次，结果就dist目录也跑了测试...

现在足以看出jest的简捷、强大，应该已经成为非ban必选的包了，哦也！，更多详情看官方文档即可

标签: none

添加新评论