ChromeDevTools / ChromeDevTools/chrome-devtools-mcp
feat: Add render_page_text MCP tool for token-efficient visual layout rendering
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 52.3k
- Forks
- 4.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 83
Description
Is your feature request related to a problem? Please describe.
As users of chrome-devtools-mcp, when we need to understand a page's visual layout, we currently have two options: take_snapshot (semantic
structure) or take_screenshot (image), but both have limitations:
- Snapshot provides interactive uids but lacks visual spatial information
- Screenshot provides complete visual effects but consumes significant tokens, making it expensive for LLM processing
We need a solution between these two: plain-text grid rendering that preserves column layouts, heading hierarchy, sidebar positions, and other
visual structure information, but in a token-efficient text format.
Describe the solution you'd like
I would like a new MCP tool called render_page_text that renders the currently selected page as a fixed-width plain-text grid, inspired by https://github.com/browsh-org/browsh's approach to converting modern web pages into text-based representations.
Core Concept: Browsh-Inspired Text Rendering
Browsh's key insight: Modern web pages can be represented as ASCII-art-style text grids while preserving spatial relationships. Instead of treating web content as linear HTML (like lynx), browsh uses the browser's rendering engine to capture actual positions, then discretizes them into a character grid.
Describe alternatives you've considered
w3m-Style Text Rendering Engine
Approach: Build a custom HTML → text layout engine (like https://github.com/tats/w3m)
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No implementation files or tests are named. Start by locating the existing take_snapshot and take_screenshot MCP tool entry points, then review how the browser-rendered page data is obtained. Done means adding render_page_text as a fixed-width plain-text grid that preserves spatial relationships while using fewer tokens than a screenshot.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100