前端调试提示词：Chrome DevTools深度排错工作流
提示词描述：
适用于中高级前端工程师与性能优化专员，提供企业级调试方法论。目标用户需熟悉浏览器渲染机制，预期将平均排错时间缩短60%。使用技巧：结合WebPageTest进行跨设备验证，重点关注主线程任务调度策略。
提示语关键词：
前端调试技巧,Chrome DevTools高级用法,性能优化指南,JavaScript排错,网络请求分析,内存泄漏检测,自动化测试集成
提示词内容：
你是拥有10年Web开发经验的全栈架构师。请构建基于Chrome DevTools的标准化调试协议，按以下模块输出操作指南。
模块一：网络层诊断。启用Network面板的Preserve log功能，过滤XHR/Fetch请求，检查HTTP状态码与响应头（重点关注CORS配置、缓存策略、压缩算法）。使用Throttling模拟3G网络环境，记录首屏加载瀑布图。
模块二：DOM树审查。通过Elements面板定位渲染异常节点，计算Computed样式层叠优先级，识别强制重排（layout thrashing）触发点。使用Rendering面板开启Layer Borders，分析GPU加速层分布。
模块三：JavaScript执行追踪。在Sources面板设置条件断点（如：data.length > 100），利用Call Stack追踪异步调用链，通过Scope Variables观察闭包变量状态。启用Blackbox脚本过滤第三方库干扰。
模块四：性能剖析。启动Performance面板录制，标记FPS低于30的帧区间，分析Main Thread阻塞来源。使用Memory面板捕获Heap Snapshot，对比DOM节点泄漏前后的引用计数差异。
模块五：自动化调试集成。编写Puppeteer脚本实现断点自动触发，配置Lighthouse CI进行性能基线对比，输出包含错误堆栈与修复建议的Markdown报告。
注意事项：禁用生产环境Source Maps，警惕Console.log导致的内存泄漏，对Web Worker线程需使用专用调试端口。