Debug Optimize Lcp
技能 活跃使用 Chrome DevTools MCP 工具指导调试和优化最大内容绘制 (LCP) 时间。每当用户询问 LCP 性能、页面加载缓慢、核心 Web 指标优化，或希望了解页面主内容渲染过慢的原因时，都可以使用此功能。当用户提到“最大内容绘制”、“页面加载速度”、“CWV”或希望提高其主要内容（如英雄图片或核心内容）的渲染速度时，也请使用此功能。
通过利用 Chrome DevTools 进行详细分析和可操作的见解，帮助用户识别和解决最大内容绘制 (LCP) 性能问题。
功能
- 指导 LCP 性能调试
- 分析 LCP 子部分（TTFB、资源加载延迟/持续时间、渲染延迟）
- 识别 LCP 元素及其属性
- 检查网络瀑布以查找资源加载问题
- 审计常见的 LCP 相关问题，如懒加载和渲染阻塞脚本
- 提供优先的优化策略
使用场景
- 当用户询问 LCP 性能或页面加载缓慢时
- 当用户希望优化核心 Web 指标时
- 当用户需要了解页面主内容渲染缓慢的原因时
- 当用户提到“最大内容绘制”、“页面加载速度”或“CWV”时
非目标
- 直接优化其他核心 Web 指标（FID、CLS）
- 超出 LCP 性能的通用网站调试
- 自动化网站内容创建或 SEO 分析
工作流
- 导航到目标 URL。
- 开始带有重新加载的性能跟踪。
- 分析跟踪中的 LCP 见解。
- 使用脚本识别 LCP 元素。
- 检查网络瀑布以了解 LCP 资源。
- 使用脚本检查 HTML 中的常见问题。
- 根据已识别的瓶颈应用优先的优化策略。
- 通过重新运行跟踪并比较结果来验证修复。
- 模拟较慢的网络/CPU 条件进行最终测试。
先决条件
- Node.js v20.19+ 或更新的 LTS 版本
- Google Chrome 当前稳定版或更新版本
- npm
Scope
- info:Tool surface size该技能利用了 Chrome DevTools MCP 工具的一部分，专注于性能和调试，因此工具表面积适中。
Compliance
- warning:Telemetry opt-inREADME 指出默认启用了使用情况统计信息收集，并且可以通过标志选择退出，这不完全是选择加入的。
安装
请先添加 Marketplace
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp/plugin install chrome-devtools-mcp@chrome-devtools-plugins质量评分
类似扩展
Troubleshooting
100使用 Chrome DevTools MCP 和文档来排查连接和目标问题。当 list_pages、new_page 或 navigate_page 失败，或服务器初始化失败时，触发此技能。
Chrome Devtools
97通过 MCP 使用 Chrome DevTools 进行高效的调试、故障排除和浏览器自动化。适用于调试网页、自动化浏览器交互、分析性能或检查网络请求。此技能不适用于 `--slim` 模式（MCP 配置）。
使用我的浏览器
100当工作依赖于用户实时浏览器会话或可见的渲染状态，而不是静态抓取时使用，尤其是在浏览器调试上下文或 DevTools 选择的元素或请求、登录仪表板或 CMS 流程、localhost 应用、上传、下载、媒体检查、DOM 或 iframe 检查、Shadow DOM，或看起来像软 404、身份验证墙、反机器人检查或速率限制的浏览器故障时。
Node Connect
100Diagnose OpenClaw Android, iOS, or macOS node pairing, QR/setup code, route, auth, and connection failures.
Openclaw Debugging
100Debug OpenClaw model, provider, tool-surface, code-mode, streaming, and live/Crabbox behavior by choosing the right logs, probes, and proof path before changing code.
Ctx Doctor
100运行 context-mode 诊断。检查运行时、钩子、FTS5、 插件注册、npm 和 marketplace 版本。 触发器：/context-mode:ctx-doctor