Understanding Chrome DevTools, the CDP Protocol, and Building Custom Debugging Tools

Introduction

Chrome DevTools is an essential tool for frontend developers, not only for debugging Chrome web pages but also for Android WebView, Roma (cross‑platform framework) Android & Harmony platforms. As one of the most widely used debugging tools, DevTools helps quickly locate problems and understand the internal debugging mechanisms. This article covers its principles, components, the CDP protocol, and how to implement custom debugging tools.

1. DevTools Components and Principles

1.1 DevTools Components

Chrome DevTools mainly consists of:

Frontend : the user interface that provides various debugging functions.

Backend : the service that communicates with the browser engine (Chromium, V8, etc.), executes debugging commands, and interacts with the frontend via CDP.

CDP (Chrome DevTools Protocol) : a JSON‑based data encapsulation protocol for communication between the frontend and the browser engine.

1.2 Working Principle

The core of DevTools is based on the Chrome DevTools Protocol (CDP). The frontend sends debugging commands to the browser engine through CDP and receives debugging information back, allowing the engine to execute the requested actions and return results.

2. CDP Protocol Details

2.1 What is the CDP Protocol?

CDP is the protocol that enables communication between Chrome DevTools and the browser engine. It uses WebSocket and JSON‑formatted commands to control browser behavior and retrieve debugging data, supporting features such as breakpoint debugging and performance analysis.

2.2 Core Features of CDP

Based on JSON‑RPC: simple, readable data format.

Bidirectional communication: both the debugger can send commands and the browser can push events (e.g., breakpoint hits, network request completions).

Modular design: divided into modules like DOM, Network, Runtime, each handling specific functionality.

2.3 Main Functions of CDP

DOM manipulation and CSS: get/modify DOM structure and styles.

Network monitoring: observe requests and responses.

JavaScript debugging: set breakpoints, step through code, view call stacks.

Performance analysis: analyze page load and script execution performance.

Memory management: inspect memory usage and detect leaks.

2.4 CDP Workflow

Establish a WebSocket connection with the browser engine.

Frontend sends JSON‑formatted commands.

Browser engine executes the commands and returns results.

Frontend receives and displays the results.

3. Understanding CDP Transmission Information

3.1 Enabling the Tool

Enable protocol logging in DevTools settings by checking "Protocol Monitor".

Refresh the page and open the protocol tool to see JSON‑formatted interactions.

3.2 Analyzing CDP Content

When a breakpoint is set on the left side of the code, the DevTools panel sends a request, and the backend returns a response, both visible as JSON messages.

4. Custom Debugging Tools

4.1 Why Build Custom Debugging Tools?

DevTools is designed for web development; its features focus on HTML, CSS, and JavaScript. It cannot directly debug non‑web applications or languages (e.g., custom DSLs, Python, C++), nor can it handle platforms like Roma Android or Harmony that embed V8. Custom tools are needed to support these scenarios, provide domain‑specific debugging, and offer cross‑platform support.

4.2 Technical Challenges

Beyond CDP, a custom debugger must implement:

A reliable message channel between frontend and backend for transmitting debugging information (breakpoints, variable values, call stacks, etc.).

Runtime integration for non‑JavaScript languages (e.g., V8, Python interpreter) to enable breakpoints, step execution, and variable inspection.

4.3 Building a Custom Debugger

Based on CDP, the implementation steps include:

Establish a WebSocket communication layer with the DevTools panel.

Implement the browser Discovery protocol to make the application visible in the browser.

Forward and handle CDP messages such as setting/canceling breakpoints and initiating network requests. For example, implement setBreakpointByUrl to receive breakpoint settings from DevTools and apply them in V8.

Extend DevTools with custom commands (e.g., a $Jue command in Roma Android to evaluate scripts via the evaluate protocol).

5. Why Learn DevTools

Deepen Understanding of Debugging Principles : Learning DevTools internals helps you grasp how debugging tools work and use them more effectively.

Build Custom Debugging Tools : Create tools for setting breakpoints, stepping through code, and inspecting call stacks.

Analyze Performance Issues : Diagnose page load, JavaScript execution, and memory leaks.

Develop Specialized Tools : After mastering CDP, you can build automation, performance analysis, or other custom debugging solutions.

Hope this article inspires you and makes your debugging journey smoother.

Scan the QR code to join the technical discussion group