chromedevtools--chrome-devtools-mcp
Ewa
d19a2350f9
This PR add a new skill for detecting and removing memory leaks using take_memory_snapshot tool. Skill was based on authoritative material from own sources: * https://developer.chrome.com/docs/devtools/memory-problems * https://web.dev/articles/effectivemanagement as well as examples of memory leaks from public domain. It can be tested with https://github.com/devnook/mem-leak-example. Example prompt * A page running at localhost:3000 has memory issues when you click from home to contact tab and back. Can you fix it? The skill prefers using comparison tools like memlab instead of custom evaluate_script snippets to avoid directly reading of .heapsnpashot files to save context space and tokens. Fixes #1056 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Yusheng <113574546+yshngg@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Alex Rudenko <OrKoN@users.noreply.github.com> Co-authored-by: Mathias Bynens <mathias@qiwi.be>
30 行
1.2 KiB
Markdown
30 行
1.2 KiB
Markdown
# Using Memlab
|
|
|
|
[Memlab](https://facebook.github.io/memlab/) is an E2E testing and analysis framework for finding JavaScript memory leaks.
|
|
|
|
## Important Rule
|
|
|
|
**NEVER read raw `.heapsnapshot` files directly.** They are too large and will exceed context limits. Always use `memlab` commands to analyze them.
|
|
|
|
## Analyzing Snapshots
|
|
|
|
You can use the `take_memory_snapshot` tool provided by the `chrome-devtools-mcp` extension to generate heap snapshots during an investigation. To find leaks, you generally need 3 snapshots:
|
|
|
|
1. **Baseline:** Before the suspect action.
|
|
2. **Target:** After the suspect action.
|
|
3. **Final:** After reverting the suspect action (e.g., closing a modal, navigating away).
|
|
|
|
Once you have these 3 snapshots saved to disk, you can use `memlab` to find leaks:
|
|
|
|
```bash
|
|
npx memlab find-leaks --baseline <path-to-baseline> --target <path-to-target> --final <path-to-final>
|
|
```
|
|
|
|
You can also parse a single snapshot to find the largest objects or explore it individually:
|
|
|
|
```bash
|
|
npx memlab analyze snapshot --snapshot <path-to-snapshot>
|
|
```
|
|
|
|
Memlab will output the retainer traces for identified leaks. Use these traces to guide your search in the codebase.
|