一、前端 Debug 核心思想
Debug 就是找 bug、定位问题、修复代码,并且总结经验防止以后再犯。前端所有问题,一共就三大类:
语法错误:单纯代码写错,单词拼错,少引号少括号。代码直接跑不起来。
逻辑错误:代码没有红色报错,可以正常执行,但是运行结果不对,是思路问题。
网络错误:AJAX 接口请求相关问题,跨域、请求方式选错、参数传错、后端接口异常。
二、浏览器开发者工具四大调试面板
- Console 控制台
用来排查 JS 语法错误,打印变量,验证逻辑。
常见报错:
SyntaxError 语法错误,符号漏写、单词拼写错误。
ReferenceError 引用错误,变量没有定义就直接使用。
TypeError 类型错误,用 undefined 或者 null 调用属性 / 方法。
调试小规范:
在关键位置写 console.log 打印变量,看变量真实的值。
报错优先看最顶部第一条错误,很多后面报错都是连带产生的,修好第一条后面一堆报错会自动消失。
三标准 Debug 排错五步流程
-
打开 Console 控制台,看有没有语法、变量相关报错。
-
打开 Network 网络面板,确认接口有没有正常发起,请求方法是否正确。
-
查看载荷 Payload,核对传给后端的参数名称、值是否符合接口要求。
-
查看响应 Response,读取后端返回的信息,确认后端给了什么数据。
-
回到源码,定位代码,修改语法、请求头、参数或者逻辑。
四分定位法(核心推荐)
核心思路:不断缩小出错代码范围 -
先注释后半段代码,运行测试;
-
如果错误消失 → bug 在被注释代码;
-
错误依旧 → bug 在保留代码;
-
持续二分缩小范围,快速锁定出错行。