JavaScript 代码插桩

有多种方法可以使用 Profiler 与 JavaScript 结合。其中包括“JavaScript” Profiler 功能（通过 about:profiling），它可以启用 JavaScript 代码的堆栈回溯。这很可能已经为每个 Profiler 预设启用了。

此外，还可以创建标记来专门标记某个时间点或某个持续时间。这有助于理解前端的特定部分，或记录通常不会出现在样本中的事件。

注意

本指南深入解释了 JavaScript 标记。要了解如何在 C++、Rust 或 JVM 中添加标记，请分别查看其在 标记、Rust 代码插桩 或 Android 代码插桩 中的文档。

浏览器 Chrome 中的标记

如果您有权访问 ChromeUtils，则添加标记相对容易。

// Add an instant marker, representing a single point in time
ChromeUtils.addProfilerMarker("MarkerName");

// Add a duration marker, representing a span of time.
const startTime = Cu.now();
doWork();
ChromeUtils.addProfilerMarker("MarkerName", startTime);

// Add a duration marker, representing a span of time, with some additional tex
const startTime = Cu.now();
doWork();
ChromeUtils.addProfilerMarker("MarkerName", startTime, "Details about this event");

// Add an instant marker, with some additional tex
const startTime = Cu.now();
doWork();
ChromeUtils.addProfilerMarker("MarkerName", undefined, "Details about this event");

内容代码中的标记

如果要插桩内容代码，那么 UserTiming API 是最佳选择。 performance.mark 将创建一个瞬间标记，而 performance.measure 将创建一个持续时间标记。这些标记将在 Profiler UI 的 UserTiming 下显示。

// Create an instant marker.
performance.mark("InstantMarkerName");

doWork();

// Measuring with the performance API will also create duration markers.
performance.measure("DurationMarkerName", "InstantMarkerName");