chrome snippets适合生产环境打点注入，因其运行在页面上下文、拥有完整api权限、不修改源码、无缓存失效风险且仅限当前会话生效。
可以直接用 Chrome Snippets 在当前页面注入并执行性能打点脚本，无需修改源码、不依赖构建发布流程，适合快速验证或临时补丁。
为什么 Snippets 适合做生产环境打点注入
Snippets 运行在当前页面上下文，拥有完整的 window、document 和 performance API 权限，能直接调用 performance.mark()、performance.measure()、performance.getEntriesByType('navigation') 等原生性能接口。它不改变线上 JS 文件内容，也不触发缓存失效，刷新后脚本即失效——这反而是安全优势：只影响当前调试会话，无残留风险。
注入一个最小可用的性能采集脚本示例
在 Sources → Snippets 中新建一个 snippet，例如命名为 perf-detect-v1，粘贴以下代码：
if (!window.__perfInjected) {
window.__perfInjected = true;
<p>// 打点关键时机
performance.mark('page-start');
document.addEventListener('DOMContentLoaded', () => performance.mark('dom-ready'));
window.addEventListener('load', () => performance.mark('page-loaded'));</p><p>// 5秒后自动上报（仅用于演示）
setTimeout(() => {
const nav = performance.getEntriesByType('navigation')[0];
const marks = performance.getEntriesByType('mark');
console.table({
'DNS': nav.domainLookupEnd - nav.domainLookupStart,
'TCP': nav.connectEnd - nav.connectStart,
'SSL': nav.secureConnectionStart > 0 ? nav.connectEnd - nav.secureConnectionStart : '-',
'TTFB': nav.responseStart - nav.requestStart,
'DOM Ready': marks.find(m => m.name === 'dom-ready')?.startTime || '-',
'Page Load': marks.find(m => m.name === 'page-loaded')?.startTime || '-'
});
}, 5000);
}</p>
按 Ctrl+S 保存，再按 Ctrl+Enter 运行。控制台将输出结构化性能数据表。
进阶：支持跨页面复用与条件触发
- 把常用打点逻辑封装成函数（如
startPerfTrace()、logFCP()），放在 snippet 开头定义，后续可随时调用 - 结合
location.hostname做域名白名单，避免误注入到非目标站点：if (['prod.example.com', 'app.example.com'].includes(location.hostname)) { ... } - 用
performance.clearMarks()和performance.clearMeasures()防止重复打点污染数据 - 若需持久化上报，可搭配
fetch发送到内部监控接口（注意 CORS 配置）
注意事项与边界
Snippets 无法替代真实埋点 SDK 的长期稳定性，但它在以下场景非常实用：
- 线上突发性能问题，需要立刻确认 FCP/LCP/CLS 数值
- 灰度环境未部署新埋点，但需快速比对两版首屏耗时
- 客户现场复现慢，远程指导其打开 DevTools 运行指定 snippet 即可采集原始数据
不依赖网络请求、不修改 HTML、不触碰构建流程，只要浏览器能打开页面，就能注入执行——这就是 Snippets 在生产环境做轻量级性能探针的核心价值。
