前端Debug特点

多平台：浏览器、Hybrid、NodeJs、小程序，桌面应用...
多环境：本地开发环境，线上环境
多工具：Chrome devTools，Charles，Spy-Debugger...
多技巧：控制台输出，设断电，SourceMap，代理...

浏览器调试工具 DevTools

谷歌浏览器的开发者工具，可以在页面上右键 ---> 检查工具打开DevTool，或者直接F12键打开。

1. Elements (元素)

点击.cls开启动态修改元素的class

输入字符串可以动态的给元素添加类名

勾选/取消类名可以动态的查看类名生效效果

点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览

Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则

强制激活伪类 (用于观察DOM悬浮等效果)

选中具有伪类的元素，点击右侧:hov;

DOM树右键菜单，选择Force State.

2. Console (日志面板)

Console.log
在控制台打印信息。你可以在这个方法中传入一个或多个对象，每个对象会通过计算后加入一串使用空格分隔的字符串。传入的第一个参数可能会包含格式说明符号，该说明符号由一个百分号(%)后加一个代表需要被替换内容的字母。
占位符 给日志添加样式，可以突出重要的信息
%s:字符占位符;%o:对象占位符;%c:样式占位符;%d;数字占位符

// %s	    字符串
// %d or %i    整数
// %f	    浮点数
// %o	    可扩展DOM元素(在element面板一样)
// %O	    可扩展javascript元素
// %c	    根据提供的css样式输出字符串

console.log("hello world", 1, true);
// hello world 1 true

console.log("%s > %d ", "100", 50);
// 100 > 50

console.log("%s > %d ", "100", "50");
// 100 > NaN

console.log("%s > %f ", "100", 50.2);
// 100 > 50.2

console.log("%O is a object", {a:"1"});
// Object{/*object*/} is a object

console.log("%o is a element", document.body);
// <body>...</body> html元素

console.log("%O is a element", document.body);
// DOM对象(body)

console.log("%c hello world", "background:black; color:white");
// hello world(白字黑背景)

Console.warn
以警告的格式打印信息。

Console.error
以报错的格式打印信息，并且在调用列出产生堆栈跟踪。

Console.info
以信息的格式打印信息。左侧可以选择等级,对日志进行分类查看

Console.table
具象化地展示JSON和数组数据

Console.dir
可以展示对象中的属性和对应的值

3. Source Tab

Source面板展示页面的源文件信息，帮助我们查看具体的报错信息

左 ---文件结构

中 ---文件源码

右 ---工具栏

4. Performance

当我们对网站性能要求比较高的时候，可以在performance面板中查看没一帧。每一毫秒中执行了什么，汇总信息查看加载某一个模块花费了多少时间

fps 每秒帧数

cpu 处理各个任务花费的时间

net 各个请求花费时间

frames 帧线程

main 主线程负责执行JavaScript 解析HTML/CSS 完成绘制

Raster raster线程负责完成某个layer或者某些块（tile）的绘制

统计面板

5. NetWork

可以选择当前调试的网速

6. Application

Application面板展示与本地存储相关的信息：

Local Storage

Session Storage

IndexedDB

Web SQL

Cookie

7. Lighthouse

Largest Contentful Paint(LCP): 最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。

First Input Delay(FID): 首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。

Cumulative Layout Shift(CLS): 累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。

总结

前端开发中，无法避免地会遇到各种问题，如代码错误、样式失效、交互问题等。通过学习调试技巧，我不仅提高了快速排查问题的能力，还增强了开发效率和代码质量。

首先，我学会了使用浏览器的开发者工具来进行调试。这些工具提供了丰富的功能，如查看元素的样式、检查网络请求、监控 JavaScript 错误等。我学会了使用断点调试，可以逐步执行代码，观察变量的值以及代码的执行流程，从而更准确地定位和解决问题。

其次，我掌握了常见的调试技巧，如打印日志、使用断言、分步执行等。通过在代码中插入合适的日志输出，我可以跟踪代码的执行情况，发现潜在的问题。使用断言可以在代码中设置条件，如果条件不满足，则会触发断言失败，提醒我存在问题。分步执行则让我逐步控制代码的执行，更好地理解程序运行过程。

另外，学习了错误处理和异常捕获，我能够更好地应对代码中可能出现的错误。我学会了使用try-catch语句来捕获异常，避免程序崩溃，并能够在出错时给出有用的错误信息，便于排查。

然而，学习调试也面临一些挑战。有时，问题可能比较隐晦，需要耐心地逐步排查。此外，不同浏览器的行为可能存在差异，需要在多个浏览器中进行测试和调试，增加了一定的复杂性。

总的来说，学习了前端开发调试知识是一项重要的技能。通过掌握各种调试工具和技巧，我能够更快速、准确地定位和解决问题，提高了开发效率。在今后的实际项目中，我会充分运用所学的调试知识，不断提升自己的前端开发能力，构建出更稳定、优质的Web应用。

前端开发调试｜ 青训营