键盘屏幕前，阿锋急的是满头大汗，控制台上的红色神秘符文，已经多次出现，

这也预示着阿锋的情绪已经在红温的边缘，马上就要崩溃了！“这完蛋的bug究竟是怎么回事儿啊？！

今天千锋前端虎哥——给你一文解千愁，让你知道bug是怎么来的！也让你知道bug是怎么没的！

一、为什么会出现bug

bug的出现是由于预期与实际之间产生了偏差。白话说就是意料之外。造成bug的原因有几种：

    1、  对所写的代码或者逻辑并不清晰，迷迷糊糊

    2、  覆盖场景不全面，容错率不高

    3、  所使用的第三方代码本身存在bug

举一个例子，一个程序员的女朋友让程序员本人去买苹果。一个经验丰富的程序员会追问对方：是要超市的还是路边摊的？是大的还是小的？是甜的还是酸甜的？是烟台产的还是陕西产的？是富士还是国光或其他品种？等等。一系列问题问完后，女友可能会说算了，我自己去买吧。从这个场景中，我们可以看到，尽可能地考虑各种可能性，以获得更准确的结果，这样出现bug的概率就会更低。

二、bug都有哪些类型

    1、CSS的bug：这种bug通常是由自己编写的CSS代码导致的，或者对已存在的CSS bug不够熟悉。例如高度塌陷、margin-top垂直穿透等问题。

    2、使用第三方组件时出现的bug：这种bug多数情况下是由于没有仔细阅读组件文档，或者组件本身存在bug所导致的。

    3、JavaScript的bug：作为重点讨论的一类bug，前端开发中最常见且最难解决的问题。下面我们将重点讨论JavaScript bug。

JavaScript的bug可以分为以下几类：

● 语法错误：例如缺少分号、括号不匹配等。

● 逻辑错误：代码的逻辑错误导致程序运行不符合预期。

● 类型错误：使用了错误的数据类型或执行了不兼容的操作。

● 异步问题：由于异步操作的执行顺序或时间问题，导致出现bug。

● 作用域问题：变量的作用域不正确，导致访问错误的变量或函数。

● 浏览器兼容性问题：不同浏览器对JavaScript的支持程度不同，导致在某些浏览器上出现bug。

以上是常见的JavaScript bug类型，当然还有其他可能的类型。在调试和解决JavaScript bug时，可以使用开发者工具、日志输出、断点调试等技术手段来定位和修复问题。

三、解决bug的方法

1.  思路，思路一定要捋清楚，bug是哪种类型引起的

   （1） 语法类错误，这个提示很明确，缺少符号、字母、或者是字写错了，代码格式化很重要

    （2）写错了单词，一个“alert”和”alter” ，不仔细看是不是看不出区别？一个是弹窗口，另一个是修改的意思，完全不是一个东西。再来一个”test”和”text” 看起来也很像，自己回看的时候是不是看出不来(看不出来)？这种错误是坑自己特别狠的，解决这类问题需要仔细对比每一个单词或者删掉重新写

    （3） 前后端交互，数据产生的bug，后端完全不按套路出牌，给的数据有时候偏偏没有某个字段，而接口文档中有，这个锅指定后端来背，我们不可能把所有的字段都校验一遍空，由前后端交互引起的bug优先排查ajax的返回值

2.  debug工具的熟练运用（重点）

谷歌浏览器为我们提供了功能完备的bug调试工具，按F12，调出控制台，首先看控制台里面有没有输出js的异常。

（1）控制台有错误。

我们来伪造一个异常看看这个异常如何排查，有如下代码

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
consoel.log('test') //此处写错了
</script>

在浏览器的控制台中会输出

看到一堆错误时，不要慌张，找到我们熟悉的文件名(App.vue:20:1)，点击进去查看，可以找到代码所在的位置。结合报错详情：consoel is not defined，这个错误表示consoel未定义，未定义可能是因为没有正确引入或者拼写错误。修正这个错误即可。

（2）如果控制台没有错误

偏偏出不来我们要的数据，UI没有被渲染，这种问题又要怎么解决呢？答案是截断，在渲染之前使用console.log或者设置断点来查看代码运行过程中的数据。

        1）使用console.log方式

咱们先来一段错误的代码

<template>
  <button @click="getData">获取数据并显示</button>
  <ul>
    <li v-for="item in mydata.lidata">{{ item }}</li>
  </ul>
</template>
<script setup>
import { reactive } from 'vue'
//ajaxData假设为服务端返回的数据
let ajaxData = {
  code: 200,
  msg: "ok",
  data: [100, 200, 300, 500, 900]
}
const mydata = reactive({
  lidata: []
})
function getData() {
  //拿到返回的数据，设置一下
  mydata.lidata = ajaxData //这里有错误
}
</script>

原有的业务本意是将返回数据ajaxData.data设置给响应式数据mydata.lidata，但手滑了一下，写岔劈了，把响应的结果整体赋值给了mydata.lidata，导致页面显示如下：

我们用console.log打印mydata.lidata的值，console.log(mydata.lidata)

function getData() {
  //拿到返回的数据，设置一下
  mydata.lidata = ajaxData //这里有错误
  console.log(mydata.lidata) //在这打印
}

当我们看到控制台打印的数据时，应该反应过来，发现这个数据肯定是不正确的。如果我们期望的数据应该是一个数组而不是一个对象，那么我们可以将代码修改为mydata.lidata = ajaxData.data，这样就可以解决问题了。

（2）断点工具的使用

使用谷歌浏览器，按f12，调出如图的工具，切换到source选项卡处，找到我们写的代码

代码外的行号处，点一下宝贵的左键，如图所示：

这个断点不是瞎点的，是代码会运行到这里时会停留在此处。在页面按钮上点击一下触发这个函数，此时看到如下图

再接下来，将鼠标移动到您想要查看的变量上，停留2秒钟不要移动（如下图所示的绿框），查看变量的值是什么。根据观察和分析的结果，修复bug，并记得断点放行

 和取消断点（与添加断点相同的操作）

当然！断点调试是一项强大而有用的工具，具有许多功能可以帮助我们分析和解决bug。如果希望详细了解断点调试的各种功能和技巧，咱们再单独写一篇文章来探讨。在那篇文章中，我们可以深入讨论如何添加多个断点、逐步执行代码、查看变量值、跳转到下一层代码等

（3） 搜索引擎的使用

大多数小伙伴遇到问题会优先搜索引擎，但往往找不到适合自己的答案。使用搜索引擎搜索问题是需要技巧的，要清楚的问搜索引擎问题，不是把问题丢给搜索引擎。再通过多篇文章的对比，找到和自己情况相符合的答案。另外程序员们有个不成文的习惯，搜索引擎的结果第一条和第一页的往往没有特别精准的答案

（4）AI辅助工具的使用

描述不清楚也没事，AI大概都能懂