ChromeDevTools / ChromeDevTools/chrome-devtools-mcp

feat: Add render_page_text MCP tool for token-efficient visual layout rendering

Open
#1,966 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

collecting-feedback feature
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.