Debug 调试与排错规范

一、前端 Debug 核心思想

Debug 就是找 bug、定位问题、修复代码,并且总结经验防止以后再犯。前端所有问题,一共就三大类:

语法错误:单纯代码写错,单词拼错,少引号少括号。代码直接跑不起来。

逻辑错误:代码没有红色报错,可以正常执行,但是运行结果不对,是思路问题。

网络错误:AJAX 接口请求相关问题,跨域、请求方式选错、参数传错、后端接口异常。

二、浏览器开发者工具四大调试面板

  1. Console 控制台

用来排查 JS 语法错误,打印变量,验证逻辑。

常见报错:

SyntaxError 语法错误,符号漏写、单词拼写错误。

ReferenceError 引用错误,变量没有定义就直接使用。

TypeError 类型错误,用 undefined 或者 null 调用属性 / 方法。

调试小规范:

在关键位置写 console.log 打印变量,看变量真实的值。

报错优先看最顶部第一条错误,很多后面报错都是连带产生的,修好第一条后面一堆报错会自动消失。

三标准 Debug 排错五步流程

  1. 打开 Console 控制台,看有没有语法、变量相关报错。

  2. 打开 Network 网络面板,确认接口有没有正常发起,请求方法是否正确。

  3. 查看载荷 Payload,核对传给后端的参数名称、值是否符合接口要求。

  4. 查看响应 Response,读取后端返回的信息,确认后端给了什么数据。

  5. 回到源码,定位代码,修改语法、请求头、参数或者逻辑。
    四分定位法(核心推荐)
    核心思路:不断缩小出错代码范围

  6. 先注释后半段代码,运行测试;

  7. 如果错误消失 → bug 在被注释代码;

  8. 错误依旧 → bug 在保留代码;

  9. 持续二分缩小范围,快速锁定出错行。

相关推荐
子兮曰5 小时前
把 649 种文件格式塞进一个网页里:一个「文件不出浏览器」的预览器
前端·javascript·后端
paopaokaka_luck8 小时前
基于springboot+vue的智慧家政管理系统(AI问答、 WebSocket实时沟通、ECharts运营分析、订单规则与服务追踪)
java·javascript·spring boot·数据分析·echarts·mybatis
sm_926787058 小时前
RFID 标签打印的技术实现要点与二次开发实践
java·大数据·前端·c++·编辑器
IMPYLH9 小时前
HTML 的 <video> 元素
前端·html
溪语流沙9 小时前
【每天一个CSS | Day19】流光文字与一笔写成的手写签名
前端·javascript·css
逐光者9339 小时前
STM32——SPI 屏 · Flash · 高速
java·前端·stm32
To_OC9 小时前
同样是让 AI 写全栈,为什么别人一句话就够了
前端·前端框架·next.js
CDwenhuohuo10 小时前
electron pc项目打包成桌面端
前端·javascript·electron
前端大斗师10 小时前
「大于 1000」把 1000 元那单也算进去了:我在 Vue3 订单页对了 10 句话
前端·人工智能·typescript·大模型·原力计划
Jmyd012310 小时前
用 Web VR 引擎搭建 3D 虚拟展厅:从素材上云到多端实时渲染的完整数据链路
前端·3d·vr·三维数字化