{"id":19918007,"url":"https://github.com/sethfowler/chromium-trace-analyzer","last_synced_at":"2025-05-03T06:30:55.266Z","repository":{"id":53360213,"uuid":"225451986","full_name":"sethfowler/chromium-trace-analyzer","owner":"sethfowler","description":"An analyzer for Chromium trace events.","archived":false,"fork":false,"pushed_at":"2022-07-18T20:28:28.000Z","size":277,"stargazers_count":15,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T12:11:16.734Z","etag":null,"topics":["audit","blink","chrome","chromium","events","lighthouse","profile","profiler","trace"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sethfowler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-02T19:26:05.000Z","updated_at":"2025-04-05T06:52:10.000Z","dependencies_parsed_at":"2022-09-05T02:21:55.339Z","dependency_job_id":null,"html_url":"https://github.com/sethfowler/chromium-trace-analyzer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethfowler%2Fchromium-trace-analyzer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethfowler%2Fchromium-trace-analyzer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethfowler%2Fchromium-trace-analyzer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethfowler%2Fchromium-trace-analyzer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sethfowler","download_url":"https://codeload.github.com/sethfowler/chromium-trace-analyzer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252154736,"owners_count":21702982,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audit","blink","chrome","chromium","events","lighthouse","profile","profiler","trace"],"created_at":"2024-11-12T21:52:07.876Z","updated_at":"2025-05-03T06:30:54.846Z","avatar_url":"https://github.com/sethfowler.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chromium-trace-analyzer\n\nThis is an analyzer for Chromium trace event files. You can get your hands on\none of these files by saving a profile from the Chrome developer tools or by\nsaving a trace from a Lighthouse audit. Given a trace, `chromium-trace-analyzer`\ncan:\n* Summarize it, so you can get the information you need quickly.\n* Filter out irrelevant tasks and events, so you can focus on the information\n  that's relevant to your code.\n* Provide fine-grained attributions and breakdowns of tasks and events, so you\n  can understand where your performance is going.\n\nSource mapping and syntax highlighting are supported to help make the trace\nsummaries as readable as possible. Here's an example summary entry:\n\n![Trace summary entry image](https://raw.githubusercontent.com/sethfowler/chromium-trace-analyzer/master/images/screenshot.png)\n\n\n## Installation\n\n```bash\nnpm install -g @sethfowler/chromium-trace-analyzer\n```\n\n\n## Usage\n\nFirst, some quick vocabulary. `chromium-trace-analyzer` deals with two related\nkinds of entities:\n - *Events* are the things that actually appear in the trace file. An event\n   tells you about something that happened at a particular point in the\n   trace timeline. Events are arranged in a sequence; there's no concept of\n   nested events. If `foo()` in `foo.js` calls `bar()` in `bar.js`, `foo()` and\n   `bar()` will show up as two separate events at different points in the\n   timeline, and they won't be explicitly related to each other.\n - *Tasks* are the things that Lighthouse's trace parser generates. Each task\n   corresponds to an event, but tasks are arranged in a tree based on the way\n   that events overlap on the timeline. In the example above, Lighthouse's\n   parser would see that `bar()`'s portion of the timeline is completely inside\n   `foo()`'s, and it will make the task for `bar()` a child of the task for\n   `foo()`.\n\n`chromium-trace-analyzer` mostly works in terms of tasks since they provide more\ninformation than the raw events.\n\nTo get a quick summary of the hottest tasks in the trace from several\nperspectives:\n```bash\nchromium-trace-analyzer --trace profile.json\n```\n\nTo see more tasks:\n```bash\nchromium-trace-analyzer --trace profile.json --top 20\n```\n\nTo see only a specific summary (`--help` will give you the full list of summary\nnames):\n```bash\nchromium-trace-analyzer --trace profile.json --summary cumulative\n```\n\nTo see a detailed play-by-play of what each task is doing (not available for the\ncumulative summary):\n```bash\nchromium-trace-analyzer --trace profile.json --playByPlay\n```\n\nTo focus on tasks related to a specific script, use `--scriptFilter` and pass a\nsubstring of the script URL:\n```bash\nchromium-trace-analyzer --trace profile.json --scriptFilter foo.js\n```\n\nYou can filter using either the original URL or the URL after source maps have\nbeen applied. You can also optionally specify a line number, which can be used\nto filter out everything but a specific function:\n```bash\nchromium-trace-analyzer --trace profile.json --scriptFilter original.js:123\n```\n\nTo enable source maps, you need to specify three things:\n* A substring of the script URL that you want the source map to apply to.\n* The path to the source map file (.js.map) itself.\n* The path to the root webpack source directory. This will be used to load the\n  original source code itself and include relevant snippets in the output. (Only\n  webpack's URL format is supported right now, unfortunately.)\n\nYou can pass that information on the command line via the colon-separated\n`--sourceMap` option. So, if your source map setup looks like this:\n* Script URL ending in `foo.js`.\n* Source map file at `./dist/foo.js.map`.\n* Root of the webpack source tree at `./src`.\n\nThen you'd pass a `--sourceMap` option that looks like this:\n```bash\nchromium-trace-analyzer --trace profile.json --sourceMap foo.js:./dist/foo.js.map:./src\n```\n\nYou can provide `--sourceMap` multiple times to apply as many source maps as you want.\n\nBy default, the summary includes a task for each entry point into a script, even\nif that entry point is nested inside another task. That means that the same\ntasks may be reported multiple times in the summary - by themselves, and as a\ncomponent of their parent tasks. Often this is what you want, because you're\nmore interested in scripts than in the tasks themselves, but sometimes you may\nwant to see only top-level tasks, which correspond to spins of the event loop.\nTo focus on top-level tasks:\n```bash\nchromium-trace-analyzer --trace profile.json --topLevelOnly\n```\n\n\n## Advanced usage\n\n`chromium-trace-analyzer` can generate an annotated JSON version of the trace\nwith more detailed attribution for tasks and events. If you enable task\nfiltering or source mapping on the command line, those transformations will be\napplied to the annotated trace as well. To generate an annotated trace:\n```bash\nchromium-trace-analyzer --trace profile.json --outputJsonTrace out.json\n```\n\nIt's also possible to generate an annotated JSON version of the summary that\n`chromium-trace-analyzer` generates. It includes far more detail than the pretty\nprinted output. To generated an annotated summary:\n```bash\nchromium-trace-analyzer --trace profile.json --outputJsonSummary out.json\n```\n\nIt can be handy to correlate entries in the summary with individual tasks and\nevents in the trace. You can do this by finding the `taskId`s listed in the JSON\nsummary entries and searching for them in the JSON trace. To make it easy to do\nthat in your editor, if you provide the same filename for both\n`--outputJsonTrace` and `--outputJsonSummary`, both the summary and the trace\nwill be written to the same file. For example:\n```bash\nchromium-trace-analyzer \\\n  --trace profile.json \\\n  --outputJsonSummary out.json \\\n  --outputJsonTrace out.json\n```\n\n## References\n\n* [Documentation of the trace event format.](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit)\n* [A little bit of useful discussion on trace events.](https://groups.google.com/forum/#!topic/google-chrome-developer-tools/J0pQuKeeqfw)\n* [The Tracium parser for trace events, used internally by this projects.](https://github.com/aslushnikov/tracium)\n* [The Lighthouse project, used by the Audits feature in Chrome's developer tools. Tracium is a version of Lighthouse's trace event parser.](https://github.com/GoogleChrome/lighthouse)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethfowler%2Fchromium-trace-analyzer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsethfowler%2Fchromium-trace-analyzer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethfowler%2Fchromium-trace-analyzer/lists"}