前端开发中常用的调试工具主要包括浏览器内置的开发者工具和一些第三方工具。以下是一些常见的前端调试工具：
代码调试工具
浏览器开发者工具 （谷歌浏览器自带）
Chrome DevTools: 由Chrome浏览器提供的强大工具，用于查看和调试HTML、CSS、JavaScript等。
打开谷歌浏览器，按住F12，上半部分可以查看页面对应的结构元素，下半部分是控制台，可以打印输出数据。
源代码：可以查看源代码以及打断点调试
网络：可以查看发送的url请求，可以看到请求的状态。
点击某个url请求后，能够看到请求的地址，响应的数据
启动器帮助找到发起请求的调用函数，有助于快速定位发起请求的代码的内容。
VS Code（PC端应用）
Visual Studio Code 是一款流行的代码编辑器，支持多种前端语言和框架，拥有大量扩展插件，可以帮助你进行调试和开发。
左侧侧边栏可以查看文件、全局搜索、源代码管理（git提交代码等），运行调试以及一些自定义安装的扩展。
React DevTools（谷歌浏览器插件商店中搜索并安装）
（谷歌浏览器的扩展）用于React应用程序的浏览器扩展，可以帮助你查看React组件层次结构、状态和性能信息。
在谷歌商店中搜索React DevTools,就能够在使用react项目中进行开发调试。可以看到页面的组件组成，包含的数据。
Vue.js Devtools（谷歌浏览器插件商店中搜索并安装）
（谷歌浏览器的扩展）用于Vue.js应用程序的浏览器扩展，提供了Vue组件的调试和性能分析功能。可以看到页面的组件组成，包含的数据。
- 性能优化指标
性能优化是前端开发中至关重要的一个方面，影响着网页加载速度、用户体验和搜索引擎排名。基于用户体验的性能指标其中包括以下几个比较重要的性能指标。
FCP(First Contentful Paint)
首次内容绘制，浏览器首次绘制来自DOM的内容的时间，内容必须包括文本，图片，非白色的canvas或svg，也包括带有正在加载中的web字体文本。这是用户第一次看到的内容。
如下是指标的衡量规则：
衡量分数是一种用于评估网页加载性能的指标。它表示用户在浏览器中首次看到有意义内容的时间。
FCP时间(秒) | 颜色编码 | 分数 |
0 - 2 | 绿色(快) | 75 - 100 |
2月4日 | 橙色(中等) | 50 - 74 |
超过4 | 红色(慢) | 0 - 49 |
FCP是用户感知页面加载速度的一个关键指标。较低的FCP分数通常意味着页面加载速度更快，用户能更快地看到有意义的内容。优化FCP可以显著改善用户体验，减少等待时间，提高用户满意度。
LCP (Largest Contentful Paint)
最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户的可见时间。
具体来说，LCP测量的是页面上最大的可见元素（例如图像、文本块、SVG等）的渲染时间。
LCP时间(秒) | 颜色编码 |
0 - 2.5 | 绿色(快) |
2.5 - 4 | 橙色(中等) |
超过4 | 红色(慢) |
较低的LCP时间意味着用户更快地看到页面上最重要的内容，从而提高用户体验。通常，优化LCP需要关注关键资源的加载和渲染。
影响因素：页面的结构、图像加载、字体渲染、CSS布局等因素都可能影响LCP。
优化目标：减少关键资源的加载时间、使用合适的图像格式、延迟加载非关键资源等都是优化LCP的手段。
FID (First Input Delay)
首次输入延迟，测量了用户首次与页面交互（如点击按钮）和浏览器响应该交互之间的延迟时间。
输入延迟是因为浏览器的主线程正忙于做其他事情，所以不能响应用户，发生这种情况的一个常见原因是浏览器正忙于解析和执行应用程序加载的大量计算的JavaScript。
FID时间(毫秒) | 颜色编码 |
0 - 100 | 绿色(快) |
100 - 300 | 橙色(中等) |
超过300 | 红色(慢) |
较高的FID可能导致用户体验较差，用户可能会感觉网站较慢或不响应。这可能会影响用户的参与和满意度。
优化措施：异步加载脚本和优化第三方代码也是常见的策略。
TTI (Time to Interactive)
网页第一次完全达到可交互状态的时间点，浏览器已经可以持续的响应用户的输入，完全达到可交互的状态的时间是在最后一个长任务完成的时间，并且在随后的5s内网络和主线程是空闲的。从定义上来看，中文名称叫持续可交互时间。
它反映了用户何时能够开始使用页面上的交互元素，如按钮、链接和表单。
TTI时间(秒) | 颜色编码 |
0 - 3.8 | 绿色(快) |
3.9 - 7.3 | 橙色(中等) |
超过7.3 | 红色(慢) |
TTI受到多种因素的影响，包括资源加载、JavaScript执行、DOM（文档对象模型）构建等。
优化措施：减小页面中主要资源（如JavaScript）的加载时间和执行时间通常是优化的关键。
TBT (Total Block Time)
总阻塞时间，表示在页面加载期间，用户主线程被长时间运行的 JavaScript 代码或其他任务所阻塞的总时间。只要存在长任务，该主线程就会被视为阻塞，该任务在主线程上运行超过50毫秒。
线程阻塞是因为浏览器无法中断正在进行的任务，因此如果用户确实在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。
TBT时间(毫秒) | 颜色编码 |
0 - 300 | 绿色(快) |
300 - 600 | 橙色(中等) |
超过600 | 红色(慢) |
优化目标：是减少页面加载过程中的主线程阻塞时间，以确保页面在加载期间保持响应和可交互。
CLS (Cumulative Layout Shift)
累计布局位移，表示在页面加载期间，元素发生布局变化导致视觉不稳定性的累积量。
CLS会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，他是一种保证页面的视觉稳定性从而提升用户体验的指标方案。
就是当点击页面中的某个元素的时候，突然布局变了，手指点到了其它位置。比如想点击页面的链接，突然出现了一个banner。这种情况可能是因为尺寸未知的图像或者视频。
CLS时间(毫秒) | 颜色编码 |
0 - 0.1 | 绿色(快) |
0.1 - 0.25 | 橙色(中等) |
超过0.25 | 红色(慢) |
影响因素：图片加载时未设置固定尺寸、异步加载的内容导致页面元素位置变化、字体加载时导致文本重新布局等，都是可能导致CLS的常见因素。
优化目标：减少页面加载期间的元素布局变化，以提高用户体验并确保页面在加载过程中保持稳定。
Speed Index
Speed Index（速度指数）是一个表示页面可视区域中内容的填充速度的指标，页面从空白状态到完全可见状态。可以通过计算页面可见区域内容显示的平均时间来衡量。
速度指数（秒） | 颜色编码 |
0–3.4 | 绿色（快速） |
3.4–5.8 | 橙色（中等 |
超过 5.8 | 红色（慢） |
影响因素：图片、CSS和JavaScript的加载顺序、资源压缩和合并、缓存的使用等都是可能影响Speed Index的因素。
加载性能LCP，交互性FID，视觉稳定性CLS。只需要做好这三个，网站的性能基本上就可以了。
- 性能调试工具
Lighthouse
Lighthouse （谷歌浏览器的插件商店中搜索并安装，浏览器中点击F12，开发者工具中可使用）是 Google 开发的一款工具，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。只要能够使用谷歌就可以使用Lighthouse。
性能：就是对上述指标进行测试
可访问性（Accessibility）
Accessibility 辅助功能 : 无障碍设计，也称为网站可达性。是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。考虑残障用户（视力障碍）
最佳实践（Best Practices）
最佳实践 : 实践性检测，如网页安全性，如是否开启 HTTPS、网页存在的漏洞等
SEO 搜索优化
SEO（Search Engine Optimization）：搜索引擎优化检测，如网页 title 是否符合搜索引擎的优化标准等。
搜索引擎优化 (SEO) 通常是指对网站的部分内容进行细微的修改。单独来看，这些修改可能只是细微的改进，但与其他优化结合后，则可能会对您网站的用户体验以及在搜索结果中的表现产生显著影响。
Chrome(Performance)
谷歌浏览器调试工具栏中自带的工具
实验
本次实验在一个开源的项目下进行的性能测试实验演示，地址为https://github.com/pobusama/chrome-preformance-use-demo，其中运行的是demo2,界面如下：
为了能够更好的演示实验，该项目设置了随机添加蓝色方块，重复点击add按钮，模拟用户的不断且重复操作，可以看到蓝色的方块会流动的越来越卡，当点击Optimize按钮就会流畅一些，因为做了一些优化操作（具体见代码，此处只是演示效果，分析性能）。
录制
多次点击Add按钮，直至页面出现卡顿，然后点击录制按钮，录制一段时间；
接着点击Optimize按钮，形成优化后的效果，录制一段时间，然后点击“停止”，等待生成性能报告
生成性能报告
图中：1是概览面板
2和3是线程面板
左侧是优化前的性能评估数据，右侧是优化后的性能评估数据
在概览面板中，最上边的数据代表FPS数据 ，FPS数值越高，画面越丝滑。（fps是帧率）
1区域出现了大量的红色色块，这代表在这段运行时间中，画面掉帧明显，颜色越红越严重，而右侧区域没有红色色块证明没有掉帧现象。
1区域中的下半部分，是CPU的使用率和使用方式。黄色（执行js），紫色（渲染），绿色（绘制到页面）以及其他颜色。
数字3所在区域，为浏览器各个进程的具体活动，这里关注主线程（Main）即可
查看某段时间具体的评估数据
点击概览模块的某块时间。（优化前）
通过鼠标滚轮或者点击或拖拽概览面板的方式查看特定的时间段，为了查看优化前是哪里的性能出现了问题，我把查看概览面板缩小成只能看到执行了3个任务的大小。
单个任务从上往下为调用关系，Anemotion Frame Fired （动画帧已触发）调用了Function Call （函数调用）， 而Function Call 调用了app.update
继续缩小查看范围，直到我们只看到一个任务执行。
在面板中我们可以点击某一个色块查看详情，跟随调用栈的足迹，我们找到即app.update色块，查看图中蓝色区域的详情，这里显示执行自身Js花费了19ms，接下来对Js调用的rendering花费了152ms，从图中可以看到在app.update色块有无数的紫色小方块，而等待这些紫色小方块的执行延长了整个Js的执行时间。
调整查看范围，直到看到优化后的具体几个任务。（优化后）
看到优化后的面板app.update色块所有的紫色小方块都消失了，而紫色小方块是跟布局有关的活动，看到这里我们可以锁定优化前的js代码中存在改变布局的操作，需要进入代码层面。
点击进入代码查看
可以看到，每个函数的耗时也都显示在左侧，右侧有源码地址，点击就可以跳到 Sources 对应的代码。然后对代码进行优化。
参考资料
- 前端性能优化指标 + 检测工具 - 掘金
- 前端性能测试工具 Lighthouse(灯塔)使用 - 掘金
- 超级详细的手把手教你使用Lighthouse更好推动项目性能优化，性能指标详解，优化方法，需要关注指标分析_lighthouse报告分析_tangdou369098655的博客-CSDN博客
- 前端性能优化——Performance的使用攻略 - 掘金
