feat(readme): add chrome devtool MCP test protocol#2938
Conversation
9clg6
requested review from
dab246,
hoangdat,
nqhhdev and
tddang-linagora
as code owners
WalkthroughThe README.md is updated for formatting and content. Header badges and contributor/issues badges are consolidated to single-line format and vertical spacing around the header image is reduced. A new "Performance Profiling" section is added with subsections on Chrome DevTools usage, profiling analysis approaches, and a metrics table. Emphasis styling is standardized to use underscores, several code and docker run examples are reformatted for consistency, and special thanks entries are aligned to a consistent italicized style. Lines changed: +81/-21. 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
README.md (1)
251-251: Consider more formal phrasing.Static analysis suggests that "Every now and then" could be replaced with more formal wording for technical documentation, such as "Periodically" or "Occasionally".
📝 Suggested rewording
-Every now and then, manually scroll through the app using your mouse to make sure that the programmatic scrolling isn't skewing the data. +Periodically, manually scroll through the app using your mouse to ensure that programmatic scrolling isn't skewing the data.As per coding guidelines: LanguageTool style hint (EVERY_NOW_AND_THEN).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` at line 251, Replace the informal phrase "Every now and then" in the README sentence "Every now and then, manually scroll through the app using your mouse to make sure that the programmatic scrolling isn't skewing the data." with a more formal alternative such as "Periodically" or "Occasionally" so the sentence reads e.g. "Periodically, manually scroll through the app using your mouse to make sure that the programmatic scrolling isn't skewing the data."
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@README.md`:
- Line 320: The README contains the contributor line that uses the Portuguese
spelling "Brasil"; update the text that mentions "<a
href=\"https://github.com/fabiyamada\">Fabiyamada</a> is a graphics designer
from Brasil..." to use the English spelling "Brazil" instead of "Brasil" so it
reads "...is a graphics designer from Brazil and has made the fluffychat logo
and the banner." Ensure only the country name is changed and spacing/punctuation
remain unchanged.
- Around line 215-273: The README references a non-existent GitHub URL
"https://github.com/nichochar/chrome-devtools-mcp" under the "Chrome DevTools
MCP" section; verify the correct repository URL (or confirm there is no public
repo) and update the README to use the valid URL or remove the broken link, and
clarify that installation via the npm package name "chrome-devtools-mcp@latest"
works independently if no repo exists; update the displayed link text and any
mentions of "Chrome DevTools MCP" in this section accordingly so users are not
led to a 404.
---
Nitpick comments:
In `@README.md`:
- Line 251: Replace the informal phrase "Every now and then" in the README
sentence "Every now and then, manually scroll through the app using your mouse
to make sure that the programmatic scrolling isn't skewing the data." with a
more formal alternative such as "Periodically" or "Occasionally" so the sentence
reads e.g. "Periodically, manually scroll through the app using your mouse to
make sure that the programmatic scrolling isn't skewing the data."
|
This PR has been deployed to https://linagora.github.io/twake-on-matrix/2938 |
chibenwa
left a comment
chibenwa
left a comment
There was a problem hiding this comment.
That's awesome!
@hoangdat @dab246 @tddang-linagora please take the time to do the setup and have a try on it on Twake Mail as well, I am interested by the results.
9clg6
force-pushed
the
feat/add-devtool-mcp-guide
branch
from
46f69f6 to
e8773dd
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (3)
README.md (3)
308-308: Rephrase unclear sentence in sample run instructions.Line 308 (“with my port is
6868”) is grammatically unclear. Suggest “using port6868”.✏️ Suggested wording
-- Run the image using the following command with my port is `6868`: +- Run the image using the following command with port `6868`:🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` at line 308, Replace the unclear phrase "Run the image using the following command with my port is `6868`" in the README (the sample run instructions) with a clearer wording such as "Run the image using the following command using port `6868`" (or "Run the image using the following command with port `6868`") to fix the grammatical issue and clarify the intent.
219-219: Avoid implying desktop support in this repository docs.Line 219 says “native (iOS/Android/Desktop) profiling,” which can be read as this project supporting desktop targets. Consider removing “Desktop” here to stay consistent with repository platform scope.
Based on learnings: The Twake on Matrix Flutter app (fluffychat) only supports web and mobile platforms. Desktop platforms (macOS, Linux, Windows) are not supported.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` at line 219, Update the README sentence that currently reads “native (iOS/Android/Desktop) profiling” to remove “Desktop” so it reads “native (iOS/Android) profiling” (edit the string in the README where that sentence appears) to avoid implying desktop platform support.
136-136: Fix broken Markdown link rendering in note.Line 136 wraps the Markdown link in backticks, so it renders as code instead of a clickable link.
✏️ Suggested fix
-_This can be automated thanks to: `[nix-direnv](https://github.com/nix-community/nix-direnv/)`_ +_This can be automated thanks to [nix-direnv](https://github.com/nix-community/nix-direnv/)._🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` at line 136, The Markdown note currently wraps the link `[nix-direnv](https://github.com/nix-community/nix-direnv/)` in backticks so it renders as inline code; remove the backticks around the link in the README note so the link is plain Markdown (i.e., [nix-direnv](https://github.com/nix-community/nix-direnv/)) and becomes clickable.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@README.md`:
- Line 308: Replace the unclear phrase "Run the image using the following
command with my port is `6868`" in the README (the sample run instructions) with
a clearer wording such as "Run the image using the following command using port
`6868`" (or "Run the image using the following command with port `6868`") to fix
the grammatical issue and clarify the intent.
- Line 219: Update the README sentence that currently reads “native
(iOS/Android/Desktop) profiling” to remove “Desktop” so it reads “native
(iOS/Android) profiling” (edit the string in the README where that sentence
appears) to avoid implying desktop platform support.
- Line 136: The Markdown note currently wraps the link
`[nix-direnv](https://github.com/nix-community/nix-direnv/)` in backticks so it
renders as inline code; remove the backticks around the link in the README note
so the link is plain Markdown (i.e.,
[nix-direnv](https://github.com/nix-community/nix-direnv/)) and becomes
clickable.
Thanks 🙏 I suggested this change because I used this method on Twake Chat to measure and identify the source of performance issues. The changes I implemented resulted in significant performance gains. |
|
What about other browsers? Do we need to implement MCP like Chrome does? |
No need -- most browsers (Edge, Brave, Opera, Arc...) are Chromium-based, so they all expose the same DevTools Protocol. The Chrome DevTools MCP server works with any of them out of the box, not just Chrome. |
|
I also run for the app in Twake Chat — Web Performance ReportDate: 20/03/2026, 17:21:06 | URL: http://localhost:2026 | Type: authenticated-cold-start Summary
1. Cold Start
2. Animations & JankDesktop (native CPU)
Desktop + 4× CPU Throttle
Heap under throttle: 185.4 MB / 189.9 MB 3. Interactive SessionFrame Performance During Interaction
Main Thread — Long Tasks
Long task samples:
Network During Interaction
Slowest new requests:
Memory During Interaction
Heap growth during session: 375.49 MB 🔴 High Navigation Trace
4. Memory
5. Network
Slowest requests:
6. Rendering
7. PWA & Accessibility
8. App Snapshot
Generated on 20/03/2026, 17:21:06 |
What's about Safari? |
4 participants
Ticket
N/A — Documentation improvement
Root cause
N/A — Not a bug
Solution
Add a "Performance Profiling" section to the README under Development, covering:
Why Chrome DevTools must be used instead of Flutter DevTools for Flutter Web profiling (Dart compiles to JS, Flutter DevTools cannot profile the browser rendering pipeline)
Why manual analysis is impractical (traces exceed 350K lines of JSON, flame charts are unreadable at that scale)
How to set up the Chrome DevTools MCP server with an AI coding assistant
The prompt to give the AI to automate: app launch, CPU throttling, trace recording, navigation, analysis, and before/after comparison
A reference table of key metrics to monitor (sync XHR, animation frame avg, jank %, long tasks, JS heap)
Impact description
No code change. Adds documentation for the automated performance profiling workflow used to measure and validate UI performance optimizations on Flutter Web. This enables any team member to reproduce the profiling process and compare branches objectively.
Test recommendations
Verify the README renders correctly on GitHub (markdown tables, code blocks, blockquote)
Optionally follow the documented steps to confirm the MCP setup and profiling workflow work end-to-end
Pre-merge
No
Resolved
N/A — Documentation only, no visual changes
Web: N/A
Android: N/A
iOS: N/A
Summary by CodeRabbit