当前位置：首页 > news >正文

【前端debug调试】

news 2025/8/24 12:45:56

调试入门秘籍

Chrome DevTool调试工具

效果图：
在这里插入图片描述

两种打开方式：

右击网页-选择"检查"
快捷键F12 或 Fn + F12

修改停靠位置：
在这里插入图片描述

调试工具的基本功能介绍

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

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

如下图：
在这里插入图片描述

元素 (Element)

作用：快速调试样式

注意：刷新会丢失

实用小技巧：🔔🔔

调试样式 上下 方向键可以快速微调
存储为全局变量，快速获取dom元素

在这里插入图片描述

控制台（Console）

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

实用小技巧：🔔🔔

可以当做计算器
可以运行代码

如何打印不同的颜色？

  console.error('这是一条红色的文字');console.log('这是一条黑色的文字');console.warn('这是一条黄色的文字');

如何打印一个DOM元素？

	const h1Node = document.querySelector('h1')// JS中万物皆对象// dir专门打印对象console.dir(h1Node)function hello() { }console.dir(hello)

源代码（Source）

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

需要掌握的操作按钮：
在这里插入图片描述

上面有几个控制执行的按钮，分别是：
在这里插入图片描述

网络（NetWork）

知识补充：浏览器与服务器通过HTTP协议通信流程
在这里插入图片描述

访问示例网站，观察请求信息：

浏览器发的请求信息展示
在这里插入图片描述

服务端响应的信息展示：

在这里插入图片描述

了解的HTTP状态码有哪些？

扩展：完整的状态码

成功（2XX）

状态码	原因短语	说明
200	OK	表示从客户端发来的请求，在服务器端被正确处理
201	Created	请求已经被实现，⽽且有⼀个新的资源已经依据请求的需要⽽建⽴通常是在POST请求，或是某些PUT请求之后创建了内容, 进行的返回的响应

204	No content	表示请求成功，但响应报⽂不含实体的主体部分（后端不返回任何内容）

客户端错误（4XX）

状态码	原因短语	说明
400	Bad Request	请求报⽂存在语法错误(（传参格式不正确） -

401	`UnAuthorized`	权限认证未通过(没有权限)

404	Not Found	表示在服务器上没有找到请求的资源
405	Method Not Allowed	请求的方法不对

服务端错误（5XX）

状态码	原因短语	说明
500	Internal Sever Error	表示服务器端在执⾏请求时发⽣了错误

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

调试基本流程

核心原则：精确定位bug位置，分析原因、解决问题。

整体流程：

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

控制台报错：💥💥💥💥💥

程序报错是编程中，设计的辅助开发机制，报错是要把关键信息，给程序员查看。
因此，看见报错不要慌，看见英文不要慌。

掌握以下几个关键点，不会英文，也能吊打报错。
报错不可怕，可怕的是不报错。

报错可简单分两大类：

JS常见错误
类库兼容问题

程序员问题，掌握报错查看技巧，快速解决。类库兼容问题，面向百度、Github、Google编程。

认识-JS常见错误

思考：是否留意过控制台报错，有几种类型？各自代表什么？

参考：来自1000个大型JS项目中的报错

常见错误有3~4类：

SyntaxError（语法错误）
ReferenceError （引用错误）
TypeError （类型错误）
RangeError (死循环)

小结：

常见报错类型-4类：
- SyntaxError - 语法错误
- ReferenceError - 引用错误，通常是变量或方法没有声明，直接使用
- TypeError - 类型错误，通常是在错误的数据类型上，访问某个方法或属性
- RangeError - 死循环
报错中需要关注的三类信息
- 报错信息：错误类型、提示文字
- 报错文件
- 报错行数

小技巧🔔：