从一个异常角度重新审视前端开发调试

2023-11-14 21:25:32

在前端开发中，调试是一个不可或缺的环节。通过调试，我们可以快速定位并修复代码中的问题，提高开发效率。在调试过程中，异常信息是一个非常重要的参考。异常信息可以帮助我们快速了解问题的根源，并找到解决问题的办法。

本文将分享一个 iView 调试案例，从一个异常角度重新审视前端开发调试。我们将通过这个案例来探讨如何通过异常信息快速定位问题，提高开发效率。

案例背景

在开发一个 iView 项目时，遇到了一个异常。异常信息如下：

TypeError: Cannot read properties of null (reading 'offsetWidth')

从异常信息中，我们可以看出，问题出在读取 offsetWidth 属性时。但是，我们不知道为什么会读取 offsetWidth 属性。为了找到问题的根源，我们需要分析调用的上下文代码。

分析上下文代码

分析调用的上下文代码后，发现在将 AutoComplete 组件的值设置为 null 时，会触发这个异常。我们简化了调用的上下文代码，做了一个 Demo，代码如下所示。

<template>
  <AutoComplete :value="value" @on-change="handleChange" />
</template>

<script>
export default {
  data() {
    return {
      value: '123'
    }
  },
  methods: {
    handleChange(value) {
      this.value = value
    }
  }
}
</script>

我们在 codepen 上放了实例，建议点进去看看，直观感受下，记住：请打开控制台看报错信息。

从异常信息看，问题出在读取 offsetWidth 属性时。而 offsetWidth 属性是 DOM 元素的属性。因此，我们可以猜测，在将 AutoComplete 组件的值设置为 null 时，导致了 DOM 元素被删除。

解决问题

为了解决这个问题，我们需要在将 AutoComplete 组件的值设置为 null 时，避免 DOM 元素被删除。我们可以使用 v-if 指令来控制 DOM 元素的显示和隐藏。

修改后的代码如下所示：

<template>
  <div v-if="value">
    <AutoComplete :value="value" @on-change="handleChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '123'
    }
  },
  methods: {
    handleChange(value) {
      this.value = value
    }
  }
}
</script>