30｜工具：最容易被忽视的工具和定位问题路径

1. 谷歌浏览器的开发者工具中的网络模块提供了关于页面加载资源情况的统计信息，可以帮助初步判断前端页面的请求数量、文件大小、加载时间等问题。 2. 开发者工具中的网络模块还提供了每个请求的详细时间信息，可以排查TTFB和FCP指标，对前端页面的性能进行优化。 3. 谷歌浏览器的开发者工具中的灯塔（Lighthouse）模式提供了三种生成报告的模式，分别是“导航”模式、 “时间跨度”模式和“快照”模式，每种模式都有其特定的应用场景，可以帮助前端同学衡量页面的性能和用户体验问题。 4. 通过“时间跨度”模式可以分析页面路由的交互效果，包括路由跳转、表单交互、动画交互等，有助于找出页面性能和用户体验问题。 5. 交互和布局偏移是影响SPA单页面用户体验的核心指标，通过“时间跨度”模式可以有效地找出这些问题，从而进行优化。 6. 对于多页面前端项目，应结合“导航”和“时间跨度”两种模式，来分析前端应用的性能问题，以全面了解页面的性能和用户体验情况。 7. 灯塔的“导航”模式提供四种分析报告：性能、无障碍、最佳做法和SEO，不同类型的前端应用关注的报告也不同。 8. 灯塔提供的“性能”报告的总分数反映了前端页面的性能状态，可以帮助初步判断前端是否存在性能或用户体验问题。 9. 性能模块和灯塔的“导航”模式一起使用，可以分析前端问题，性能模块提供了页面加载的时序图，可以真实反映前端页面的全过程。 10. 通过工具分析问题，可以找到前端性能问题的优化方案，从而提高前端页面的质量和性能。