# Source: https://lynxjs.org/guide/devtool/trace.md

<style>
  {`
    .full_image {
      width: 750px;
      margin: 20px;
    }
    `}
</style>


# Trace

Trace is a performance analysis tool. With Trace, you can obtain a detailed rendering workflow of Lynx pages, making it easier to locate, analyze, and fix issues such as jank and long-running tasks.

## Core Capabilities of Trace

### 1. Visualizing the Rendering Pipeline

Trace provides a complete timeline view of the entire page process, detailing each stage: script execution, element construction, layout calculation, final rendering and others. With Trace, you can:

- Clearly see the time distribution for each key stage (such as layout and painting);
- Directly identify bottleneck nodes and performance issues;
- Detect redundant or repeated rendering tasks to optimize page performance.

This end-to-end visualization is especially valuable for page optimization and tuning complex page performance.

<img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/trace_render_pipeline_latest.png" alt="Trace Render Pipeline" className="full_image" />

### 2. Tracing Engine Execution

Trace dives deep into the [Engine](/guide/spec.md#engine) and thoroughly records:

- The sequence of task scheduling and queue switching
- The full picture of event handling chains
- Precise timing and relationships for API calls

This information is useful for analyzing issues like asynchronous task congestion or event response delays.

<img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/trace-scheduling.png" alt="Trace Task Scheduling" className="full_image" />

### 3. Rich Performance Analysis Tools

Trace is a multidimensional performance analysis platform:

- **[Element](/guide/spec.md#element) Analysis**: Track changes in the Element tree structure, identify high-frequency or heavy node operations, and uncover performance risks in your page structure.

<img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/element-render-analysis-latest.png" alt="Element" className="full_image" />

- **[NativeModules](/guide/spec.md#native-module) Call Analysis**: Monitor detailed NativeModules call processes, clearly display the timing and parameters of each NativeModule call, and pinpoint potential bottlenecks.

<img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/nativemodule-invoke-flow.png" alt="NativeModules" className="full_image" />

- **Smoothness Analysis**: Use flame charts of task durations to quickly locate the root causes of jank, helping you optimize animations and interactions.

<img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/trace-frame.png" alt="Trace Frame" className="full_image" />

## Next Steps

<NextSteps.Root>
  <NextSteps.Step href="/guide/devtool/trace/record-trace" title="Record Trace" description="Learn how to record a trace" />
</NextSteps.Root>

## Compatibility


**Compatibility Table**
**Query:** `devtool.trace`

**Platform Support**

| Platform | Version Added | Notes |
|----------|---------------|-------|
| Android | 3.4 | - |
| iOS | 3.4 | - |
| HarmonyOS | 3.4 | - |

**Description:** Trace Tool