初学者必看，前端 Debugger 调试学习

最新推荐文章于 2025-06-27 11:08:34 发布

rgrgrwfe

最新推荐文章于 2025-06-27 11:08:34 发布

阅读量934

点赞数 9

CC 4.0 BY-SA版权

文章标签：前端学习 php

本文链接：https://blog.csdn.net/rgrgrwfe/article/details/144619766

1.文章简介：

报错和Bug，是贯穿程序员整个编程生涯中，无法回避的问题。而调试，就是帮助程序员定位问题、解决问题的重要手段，因此调试是每个程序员必备技能。

调试本身可分为两个过程: 定位问题 和解决问题（靠开发的基本功）。

调试快速定位：

1.掌握调试工具的基本使用
2调试基本流程
3.通过案例定位Bug，修复Bug。

文章学习内容：

1.掌握Chrome调试工具的基本使用
2.认识常见Js4种报错姿势
3.能够在报错中提取关键信息
4.能够通过调试工具、二分注释排除法，准确定位代码Bug位置。

学习目标：

1.常见Bug，1分钟内找出Bug位置。
2.隐藏Bug，二分注释法，准确找出Bug位置。

2.调试工具的基本功能介绍

调试工具的面板有很多，需要掌握做常用的4个：

元素(Element)
控制台 (Console)
源代码 (Sources)
网络 (Network)

Chrome DevTool 调试工具

两种打开方式:
1右击网页-选择”检查
2.快捷键F12或Fn+F12

2.1 元素(Element)

**作用：**快速调试样式
注意：刷新会丢失

技巧：

1.调试样式上下方向键可以快速微调

2.存储为全局变量，快速获取 dom 元素

例：选中文本框中的输入值并且设置为全局变量，此后将控制台的变量获取value值

2.2 控制台（Console）

作用: 输出浏览器运行过程中产生的信息

技巧:
1.可以当做计算器
2.可以运行代码

console.log('这是一个普通颜色的信息',);
console.warn('这是一个黄色颜色的信息，警告开发者',);
console.error('这是一个红色颜色的信息，显示报错信息',);

console.dir(h1);

const fn = ();
console.dir(fn);

打印一个DOM元素

const hINode = document.queryselector('h1')
// Js中万物皆对象
// dir专门打印对象
console.dir(hlNode)
function he11o() { }
console.dir(he11o)

2.3 源代码（Source）

断点: 代码会在断点处停住，给开发者观察的机会

需要掌握的操作按钮如下：

控制执行的按钮分别是：

2.4 网络(NetWork)

浏览器与服务器通过HTTP协议通信流程

游览器发的请求信息展示：

HTTP状态码

HTTP 状态码 | 菜鸟教程HTTP 状态码当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。 HTTP 状态码的英文为 HTTP Status Code。。下面是常见的 HTTP 状态码： 200 - 请求成功 301 - 资源（网页等）被永久转移到其它URL 404 - 请求的资源（网页等）不存在…[这里是图片013]https://www.runoob.com/http/http-status-codes.html

（1）成功(2XX)

状态码

原因短语

说明

200

表示从客户端发来的请求，在服务器端被正确处理

201

Created

请求已经被实现，而且有一个新的资源已经依据请求的需要而建立通常是在POST请求，或是某些PUT请求之后创建了内容,进行的返回的响应

204

No content

表示请求成功，但响应报文不含实体的主体部分 (后端不返回任何内容)

（2）客户端错误(4XX)

状态码

原因短语

说明

400

Bad Request

请求报文存在语法错误(《传参格式不正确)

401

UnAuthorized

权限认证未通过(没有权限)

404

Not Found

表示在服务器上没有找到请求的资源

405

Method Not Allowed

请求的方法不对

（5）服务端错误(5XX)

状态码

原因短语

说明

500

Internal Sever Error

表示服务器端在执行请求时发生了错误

503

Service Unavailable

表明服务器暂时处于超负载或正在停机维护，无法处理请求

3. 调试基本流程

核心原则: 精确定位BUG位置，分析原因、解决问题

3.1 整体流程

有报错: 查看控制台，定位是否为语法问题、类库兼容问题
通信不成功: 查看网络，定位前端问题，或是后端问题
无报错，或报错且无有效信息-二分注释排查法

3.2 控制台报错

报错可简单分两大类：
1.JS 常见错误
2.类库兼容问题
程序员问题，掌握报错查看技巧，快速解决。类库兼容问题，面向百度、Github 、 Google 编程

（1）JS 常见错误

1.SyntaxError (语法错误)

2.ReferenceError(引用错误)

3.TypeError(类型错误)

4.RangeError(死循环)

小结
常见报错类型-4类

syntaxError-语法错误
ReferenceError-引用错误，通常是变量或方法没有声明，直接使用。
TypeError-类型错误，通常是在错误的数据类型上，访问某个方法或属性
RangeError-死循环

报错中需要关注的三类信息：

报错信息: 错误类型、提示文字
报错文件
报错行数

小技巧：
1.从左向右、从上向下阅读报错
2.点击报错文件，Chrome调试工具，自动定位到报错位置。

（2）认识-类库兼容问题

目前前端工程化、模块化开发，一个项目中会使用到大量的第三方库，而不同的库升级速度之间存在差异，会导致前端出现大量的兼容报错。

如何界定是第三方库的问题
如何解决此类问题

如何确定是第三方库的问题
报错信息中无源码文件提示，无常见错误提示。如下图

如何解决此类问题

面向百度编程、面向Google编程。
经验积累，看得多，了解的多

3.3 前后端通信问题

目标: 前后端分离开发方式普及，前后端先各自开发，再联调。因此，前端开发工程师，需要熟练使用 Network 面试调试

如何确定前后端通信出现问题
HTTP状态码: 出现4xx、5xx

4xx: 根据状态码和接口报错信息，修复代码
5xx:提供调用数据，通知后台查看
2xx: 以预期数据与实际数据一致为准

（1）状态码 4XX

目标: 4xx大概率是前端调用API出现问题，需要熟练结合 console 和 Network 面板处理。

出现4XX，结合状态码快速分析原因
（1）400:请求体传递参数不对
1.NetWork查看请求体
2.比对接口文档
1.数据格式，是否一致。
2.属性名，是否一致。
（2）401:token失效，请求头没有携带token。
1.查看请求头，是否有token
2.重新登录，验证token过期.
（3）404:没有该接口(通常是url路径写的有问题)
1.查看请求头上的url路径
2.核对接口文档的url路径
（4）405:请求方式不对(通常是get 、post、put等方式写错)
1查看请求头中的method字段
2.核对接口文档的method字段