前端|轻松掌控前端错误：浏览器断点调试的实用技巧

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

chrome断点调试

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

红区：表示整个页面所加载出来的资源(包括JS、CSS、图片等)，主要使用的就是网页：

top文件夹：表示我们整个页面，文件夹下的内容表示整个页面加载的资源

localhost:5173：表示资源所在的域，也就是表示当前资源是在本地域名下的，域下面的文件就是具体的代码文件了

绿区：表示域下面具体文件的内容

蓝区：断点调试的具体面板

问题产生：接下来我们给出一个示例来演示，在我们找到页面bug的时候，如何通过浏览器调试定位到问题所在，示例代码如下所示：


<template>
    <h3>number1:h3>
    <input type="text" v-model="num[0]">
    <h3>number2:h3>
    <input type="text" v-model="num[1]">
    <button @click="() => handleSum()">Add number1 and number2button>
    <div v-if="sum">{{ num[0] }} + {{ num[1] }} = {{ sum }}div>
template>
 
<script setup>
import { ref } from 'vue'
const num = ref(['', ''])
const sum = ref('')
 
function handleSum() {
    const num1 = num.value[0]
    const num2 = num.value[1]
    const numAll = num1 + num2
    sum.value = numAll
}
script>

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

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

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

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

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

1）继续执行脚本：

让代码恢复执行，跳过中间的调试过程，继续运行到下一个断点或程序结束

2）跳过下一个函数调用：

跳过当前函数的调用，避免进入函数内部调试，适用于你不需要关心某个函数的内部实现时

3）进入下一个函数调用：

当你希望查看某个函数内部的执行细节时，使用此按钮可以进入函数内部进行逐步调试

4）跳出当前函数：

如果你已经进入一个函数，但发现不需要继续查看该函数的执行细节时，可以使用此按钮跳出函数，继续调试外层代码

5）单步调试：

逐行执行代码，适合在你想精确了解每一行代码如何影响程序行为时使用。它有助于捕捉在每一行代码执行时可能出现的错误

6）停用断点：

临时禁用断点，使得代码继续执行，不会在断点处暂停。适用于你想要跳过某些断点进行快速调试时

debugger调试

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


<template>
    <h3>number1:h3>
    <input type="text" v-model="num[0]">
    <h3>number2:h3>
    <input type="text" v-model="num[1]">
    <button @click="() => handleSum()">Add number1 and number2button>
    <div v-if="sum">{{ num[0] }} + {{ num[1] }} = {{ sum }}div>
template>
 
<script setup>
import { ref } from 'vue'
const num = ref(['', ''])
const sum = ref('')
 
function handleSum() {
    const num1 = num.value[0]
    const num2 = num.value[2].length
    const numAll = num1 + num2
    sum.value = numAll
}
script>

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

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

学习分享/商务合作/技术交流

微信名片

chrome断点调试

debugger调试

评论记录：