Showcase Chrome Debugging Protocol Clients

There are a number third-party clients for the Chrome debugging protocol. This section presents a sample.

Brackets

Brackets is a web-based IDE that uses the Chrome debugging protocol to enable debugging and live HTML/CSS development.

DevTools App

DevTools App is a Chrome application that allows you to easily try out different versions of the DevTools.

For example you can easily try

  • the latest devtools code from the repository
  • the Builtin devtools
  • devtools being served from a local server

To use it you have to launch Chrome with --remote-debugging-port=9222.

Install the DevTools App into Chrome from Chrome Web Store. Source code available on GitHub

Light Table

Light Table is a new IDE that takes a novel approach to arranging the developer's workspace. Light Table is currently in alpha. It's not open source, but the alpha version is available for free at this time.

  • Download from the official site.
  • Read the blog post describing new features in 0.4.0, including DevTools integration.

NodeJS

A number of modules have been developed to make use of the Chrome debugger from Node scripts.

chrome-remote-interface

The chrome-remote-interface module wraps the debugger protocol with a Node-style JavaScript API.

    npm install -g chrome-remote-interface

Take a look at which NPM projects use chrome-remote-interface.

crconsole

The crconsole module provides a command-line interface to the Chrome console. It uses the chrome-remote-interface module to communicate with the Chrome debugger protocol.

automated-chrome-profiling

A basic recipe for automating JS profiling through Node.js. See the other apps mentioned that live in the protocol ecosystem.

chrome-debug-protocol

The chrome-debug-protocol module is consumable with JavaScript and TypeScript making automated tests and profiling on Chrome easy to implement.

npm install -g chrome-debug-protocol

Sublime Text

The Sublime Web Inspector project adds Chrome debugger integration to the popular Sublime Text editor. You can install it from the Sublime Text package manager.

  • See the official page for an overview and installation instructions.
  • Source code available on GitHub.

Telemetry

Telemetry is a performance testing framework used by the Chromium project to test multiple versions of the Chrome browser. It uses the debugging protocol to remotely control instances of Chrome.

Vim

Chrome.vim is an experimental plugin for the Vim editor that provides some basic Chrome operations as Vim commands.

WebDriver

The Selenium browser automation tools use WebDriver API to abstract interactions with different browsers. The WebDriver implementation for Chrome uses the Chrome debugging protocol.

WebStorm

WebStorm is a commercial IDE that supports debugging and live-editing in Chrome. WebStorm uses a Chrome extension to integrate with the Chrome debugger.

Python

chrome_remote_shell provides a nice API layer for python apps.