轻松掌控前端错误：浏览器断点调试的实用本领

无论是跟踪JavaScript错误还是优化页面性能，把握浏览器的断点调试本领都能让你轻松解决开发中的难题，本文将带你深入探索这些本领，让你从头痛的调试过程变革为得心应手的开发体验。
  目次
chrome断点调试
debugger调试

---

chrome断点调试

前端如果想知道怎样对浏览器举行断点调试，首先就应该先知道源代码操作面板的区域分别代表什么意思，这里博主做一个简朴的介绍，如下所示源代码重要分为三个区域：

   红区：表现整个页面所加载出来的资源(包括JS、CSS、图片等)，重要利用的就是网页：
  top文件夹：表现我们整个页面，文件夹下的内容表现整个页面加载的资源
  localhost:5173：表现资源所在的域，也就是表现当前资源是在本地域名下的，域下面的文件就是详细的代码文件了
  绿区：表现域下面详细文件的内容
  蓝区：断点调试的具体面板
  问题产生：接下来我们给出一个示例来演示，在我们找到页面bug的时间，怎样通过浏览器调试定位到问题所在，示例代码如下所示：

1. <template>
2.     <h3>number1:</h3>
3.     <input type="text" v-model="num[0]">
4.     <h3>number2:</h3>
5.     <input type="text" v-model="num[1]">
6.     <button @click="() => handleSum()">Add number1 and number2</button>
7.     <div v-if="sum">{{ num[0] }} + {{ num[1] }} = {{ sum }}</div>
8. </template>
10. <script setup>
11. import { ref } from 'vue'
12. const num = ref(['', ''])
13. const sum = ref('')
15. function handleSum() {
16.     const num1 = num.value[0]
17.     const num2 = num.value[1]
18.     const numAll = num1 + num2
19.     sum.value = numAll
20. }
21. </script>

复制代码

这里我本意是想让两个数字举行相加，但是效果却是两个数字拼接了，如下所示，这是为什么呢？

问题分析：遇到这个问题该怎么调试呢？我先假装自己不知道原因，我即便是不去看源代码也可以准确的定位到错误发生在哪个位置，怎样定位？根据观察我们发现这个错误是我们点击了按钮之后才产生的，我们是不是可以找到这个按钮的点击变乱举行分析，怎样找到点击变乱呢？可以通过如下的变乱监听器定位的代码位置：

断点调试：找到对应的点击变乱之后，我们给这个点击变乱打上一个断点，在右侧的断点调试面板处就会出现我们设置的这个断点信息，如下：

通过断点调试我们可以看到作用域当中的一些相关数据，如果想检察的话也可以按下Esc键输入：

可以看到我们找到的原因就是我们输入的文本是字符串范例而不是整型，回到代码中将文本输入的范例转换成整型后然后赋值给sum即可，这里趁便表明一下断点调试的按钮的作用：

   1）继续执行脚本：
  让代码规复执行，跳过中间的调试过程，继续运行到下一个断点或步伐结束
  2）跳过下一个函数调用：
  跳过当前函数的调用，避免进入函数内部调试，适用于你不须要关心某个函数的内部实现时
  3）进入下一个函数调用：
  当你希望检察某个函数内部的执行细节时，利用此按钮可以进入函数内部举行徐徐调试
  4）跳出当前函数：
  如果你已经进入一个函数，但发现不须要继续检察该函数的执行细节时，可以利用此按钮跳出函数，继续调试外层代码
  5）单步调试：
  逐行执行代码，得当在你想准确相识每一行代码怎样影响步伐行为时利用。它有助于捕获在每一行代码执行时大概出现的错误
  6）停用断点：
  临时禁用断点，使得代码继续执行，不会在断点处停息。适用于你想要跳过某些断点举行快速调试时
  debugger调试

前端采用debugger调试重要目的是为了准确控制代码执行的时机以及动态调试复杂的前端逻辑，尤其是在处置惩罚异步或UI渲染时，比如给出如下代码，可以看到我们访问不存在的数据的长度肯定是会报错的，如下所示：

1. <template>
2.     <h3>number1:</h3>
3.     <input type="text" v-model="num[0]">
4.     <h3>number2:</h3>
5.     <input type="text" v-model="num[1]">
6.     <button @click="() => handleSum()">Add number1 and number2</button>
7.     <div v-if="sum">{{ num[0] }} + {{ num[1] }} = {{ sum }}</div>
8. </template>
10. <script setup>
11. import { ref } from 'vue'
12. const num = ref(['', ''])
13. const sum = ref('')
15. function handleSum() {
16.     const num1 = num.value[0]
17.     const num2 = num.value[2].length
18.     const numAll = num1 + num2
19.     sum.value = numAll
20. }
21. </script>

复制代码

然后我们根据控制台给出的报错信息定位到报错的代码位置，在报错代码前给出debugger：

然后我们回到浏览器，革新页面重新在输入框中输入相关数据点击按钮之后就会执行断点调试：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。