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. 持续二分缩小范围,快速锁定出错行。

相关推荐
欢迎来到祖安!1 小时前
企业微信 API 接口能力介绍:支持消息收发、图片发送、表情互动、联系人管理等多场景应用
java·前端·数据仓库·spring cloud·企业微信
子非鱼a7 小时前
【WEB】multiSQL
前端
lemon_sjdk8 小时前
DOM 节点
java·前端·javascript
nvd118 小时前
深入现代 Web 鉴权架构:网关统一代理 (Forward-Auth) vs 前端持有 JWT 的终极选型与边缘同域实践
前端·架构·状态模式
leoZ2318 小时前
2026-09-09-springboot-cloud-deploy-pitfalls
java·前端·javascript·vue.js·人工智能·spring boot·后端
YWL8 小时前
OpenLayers弹窗Overlay深度实战
前端·vue·openlayers
YWL9 小时前
OpenLayers+ECharts联动:地图点击联动图表,数据可视化大屏方案
前端·信息可视化·vue·echarts·openlayers
芭拉拉小魔仙9 小时前
Vue 2 门诊收费系统中的医保结算流程设计与实践
前端·javascript·vue.js
moonrailgun9 小时前
用 Node.js 复刻 Codex Astra 的终端星光
前端·javascript·算法