调试(修复错误)

什么是一个软件bug?

● 软件错误:计算机程序中的缺陷或问题。基本上,计算机程序的任何意外或非预期的行为都是软件缺陷。
● bug在软件开发中是完全正常的!

● 例如,现在我们存在数组,我们现在需要将这个数组颠倒排序
调试(修复错误)_第1张图片

意外的结果:数组被打乱了,没有反转所以反向函数中有一个bug

这个时候我们需要调试
调试:发现、修复和防止错误的过程;

调试过程

  1. 确认(意识到有一个错误)
    a. 在开发过程中
    b. 测试软件中
    c. 生产过程中的用户报告
    d. 上下文:浏览器、用户等
  2. 找到(隔离代码中错误发生的确切位置)
    a. 开发者控制台(简单代码)
    b. 调试器(复杂代码)
  3. 修复(更正错误)
    a. 用新的正确的解决方案替换错误的解决方案
  4. 预防(防止它再次发生)
    a. 在类似的代码中搜索相同的BUG
    b. 使用测试软件编写测试

使用控制台和断点调试

举个例子,之前我们写了一个温度的例子,现在我们要将他编程开尔文温度(摄氏温度+273)

const measureKelvin = function() {
    const measurement = {
        type: "temp",
        unit: "celsius",
        value: prompt('Degrees celsius'),
    };

    const kelvin = measurement.value + 273;
    return kelvin;
}

console.log(measureKelvin());

这个代码看上去就是让用户输入一个温度,然后将温度转换为开尔文温度,就是加上273,然后返回开尔文温度,
调试(修复错误)_第2张图片

1.确认错误

我们输入的温度是37度,但是他并没有返回37+273度,而是返回一个预期之外的数字,说明这串代码中肯定存在一个bug

2.寻找错误

● 首先,我们可能怀疑是不是这个value输出的时候有问题,所以我们将代码中间加一个console查看下

const measureKelvin = function () {
  const measurement = {
    type: 'temp',
    unit: 'celsius',
    value: prompt('Degrees celsius'),
  };
console.log(measurement.value);
  const kelvin = measurement.value + 273;
  return kelvin;
};

console.log(measureKelvin());

调试(修复错误)_第3张图片

好像并没有什么问题,我们输入的确实是37!

● 那么接下来,我们肯定会考虑,那我们直接查看整个对象,看下能不能找到什么线索!

const measureKelvin = function () {
  const measurement = {
    type: 'temp',
    unit: 'celsius',
    value: prompt('Degrees celsius'),
  };
  console.log(measurement);
  const kelvin = measurement.value + 273;
  return kelvin;
};

console.log(measureKelvin());

调试(修复错误)_第4张图片

这里我们找到真正的原因了,value的值是个字符串!(其实我们之前说过,使用prompt传入的值总是字符串)

3.修复错误

这时候我们就来修复它,修复它很简单,告诉对象它的值是number类型的即可

const measureKelvin = function () {
  const measurement = {
    type: 'temp',
    unit: 'celsius',
    value: Number(prompt('Degrees celsius')),
  };
  const kelvin = measurement.value + 273;
  return kelvin;
};

console.log(measureKelvin());

调试(修复错误)_第5张图片

这样我们就修复了这个错误

除此之外,我们还可以使用浏览器断点的方式去查找我们的错误
调试(修复错误)_第6张图片

我们可以点击你觉得会出问题的代码,将他打上断点,这样来执行串代码中,想运行到这行代码就停止,如果我们可以判断出,运行之前的代码没有出现BUG,那肯定出现bug的带代码就在这行!

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)