Chrome DevTools Protocol Viewer
https://github.com/chromedevtools/debugger-protocol-viewer- Category
- Developer Tools
- Rank
- No. 726Tools index
Previous survey · No. 795 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- chromedevtools
- GitHub
- 893 stars
- Date
About
Browsable reference for the Chrome DevTools Protocol. Search domains, methods, events, and types used by Puppeteer, Playwright, and custom devtools.
What it does
A static documentation website that turns protocol JSON into versioned domain pages. Each page groups methods, events, and types, then shows descriptions, parameters, return objects, allowed values, cross-domain references, and experimental or deprecated status. Client-side search and anchored links make individual entries quick to reach.
Why it's ranked here
This is a strong, narrow reference tool. It exposes protocol structure clearly, labels unstable and obsolete entries, links related types, and supports several protocol versions. Search covers domains, events, parameters, types, and methods. Its value is documentation speed, not protocol execution or automation.
What's good
The generated pages preserve useful distinctions: optional parameters, arrays, references, enums, return values, experimental features, and deprecations. Results prioritize prefix matches before broader substring matches and support keyboard navigation. Entry links can copy either a plain URL or a Markdown-formatted reference, which makes technical notes easier to share.
Tradeoffs
Search is a simple client-side keyword index, with no fuzzy matching or remembered queries. The service worker removes itself rather than providing offline behavior. Lighthouse configuration leaves contrast, labels, tap targets, layout shift, image sizing, security policy, and other concerns at warning level. Adding versions and domains still involves manual template updates.
How to use it well
Use it while inspecting or integrating protocol messages, especially when you need parameter shapes, return data, status labels, or linked type definitions. Search for an entry, follow references, then copy its anchored link into an issue or design note. It does not replace a browser client, SDK, protocol implementation, or issue tracker.
Technical notes+
package.json defines a private ESM package with Eleventy, Handlebars, Rollup, Terser, lit-html, Marked, and a static server as development dependencies. .eleventy.js builds pages under the /devtools-protocol/ prefix and copies styles, images, the search index, and pages/service-worker.js. pages/domainGenerator.js converts protocol domains into sorted HTML sections, escapes protocol Markdown before rendering, builds cross-domain type links, and emits status badges and permalinks. pages/scripts/index.js implements Web Components for indexed substring search and keyboard navigation. pages/scripts/clipboard.js writes plain-text and HTML clipboard formats. rollup.config.js bundles and minifies the browser entry as ESM. .lighthouserc.js runs Lighthouse against the local server but downgrades several assertions to warnings.
Observed
- License
- Apache, identified as Apache2 in package metadata
- Primary language
- JavaScript using ECMAScript modules
- Packaging
- Private npm package with preparation, build, test, and local serving scripts
- Interface
- Static browser-based documentation website
- Build stack
- Eleventy with Handlebars templates, followed by Rollup and Terser bundling
- Search surface
- Client-side indexed search for domains, events, parameters, types, and methods
- Version structure
- Separate generated page sets for tip-of-tree and named protocol versions
- Testing
- The npm test script invokes a shell-based primitive test suite
Read from readme.md, package.json, .eleventy.js, .lighthouserc.js, rollup.config.js, service-worker.js, pages/v8.11ty.js, pages/1-2.11ty.js, pages/1-3.11ty.js, pages/tot.11ty.js, pages/service-worker.js, pages/domainGenerator.js, pages/scripts/index.js, pages/scripts/clipboard.js, pages/scripts/cr-markdownish.js.
What it can do
Browse Chrome DevTools Protocol reference
User navigation/browsing → Protocol documentation and specifications
Search domains in Chrome DevTools Protocol
Domain name or keyword → Matching protocol domains
Search methods in Chrome DevTools Protocol
Method name or keyword → Matching protocol methods with details
Search events in Chrome DevTools Protocol
Event name or keyword → Matching protocol events with specifications
Search types in Chrome DevTools Protocol
Type name or keyword → Matching protocol data types and definitions
View protocol information for Puppeteer integration
Protocol element selection → Puppeteer-compatible protocol details
View protocol information for Playwright integration
Protocol element selection → Playwright-compatible protocol details
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.