Master Chrome DevTools & CDP: Build Custom Debugging Tools for Web and Mobile

Introduction

Chrome DevTools is an essential tool for frontend developers, useful not only for debugging Chrome pages but also for Android WebView, Roma (cross‑platform framework) Android & HarmonyOS platforms. It helps quickly locate problems and understand the internal debugging mechanisms.

1. DevTools Components and Principles

1.1 Components

Chrome DevTools consists of the following parts:

Frontend: the user interface that provides various debugging functions.

Backend: the service that communicates with the browser engine (Chromium, V8) via the CDP.

CDP (Chrome DevTools Protocol): a JSON‑based data encapsulation protocol.

1.2 Working Principle

The core of DevTools is based on the Chrome DevTools Protocol (CDP). The frontend UI sends debugging commands to the browser engine via CDP and receives debugging information. The engine executes the commands and returns results to the UI.

2. CDP Protocol Details

2.1 What is CDP?

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 breakpoint debugging, performance analysis, and more.

2.2 Core Features

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

Bidirectional communication: the debugger sends commands and the browser pushes events (e.g., breakpoint hits, network completions).

Modular design: multiple domains such as DOM, Network, Runtime, each handling specific functions.

2.3 Main Functions

DOM and CSS manipulation.

Network monitoring.

JavaScript debugging (set breakpoints, step execution, view call stack).

Performance analysis.

Memory management and leak detection.

2.4 Workflow

Establish a WebSocket connection with the browser engine.

Send JSON‑formatted protocol commands from the frontend.

The engine executes the commands and returns results.

The frontend receives and displays the results.

3. Understanding CDP Transport Information

3.1 Launching the Tool

Enable protocol logging in DevTools settings (check “Protocol Monitor”).

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

3.2 Analyzing CDP Content

When a breakpoint is set in the code, the DevTools panel sends a request, which can be observed in the network tab.

The backend response is displayed as follows:

4. Custom Debugging Tools

4.1 Why Build Custom Tools?

Limitations of DevTools:

Designed for web development; features focus on HTML, CSS, JavaScript.

Cannot directly debug non‑web applications or languages that do not run in the browser (e.g., custom DSLs, Python, C++).

Needs for custom tools:

Support for custom languages or frameworks.

Domain‑specific debugging requirements (IoT, embedded systems).

Cross‑platform support for Android, iOS, HarmonyOS, etc.

4.2 Technical Challenges

Message channel: reliable communication between frontend and backend for breakpoints, variable values, call stacks.

Runtime integration: embed debugging modules into non‑JavaScript runtimes (V8, Python interpreter) to enable breakpoints, step execution, variable inspection.

4.3 Hand‑crafted Custom Debugger

Based on CDP, implement a custom debugging tool:

1. Establish a WebSocket communication layer with the DevTools panel.

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

3. Forward and handle CDP messages (e.g., setBreakpointByUrl, enable/disable breakpoints, network requests).

4. Extend DevTools with custom pages or commands, such as using "$Jue" in Roma Android debugging to evaluate V8 scripts.

5. Why Learn DevTools

Deepen understanding of debugging principles – grasp how debugging tools work to use them more effectively.

Build custom debugging tools – create your own tools for setting breakpoints, stepping, and inspecting call stacks.

Analyze performance issues – diagnose page load, JavaScript execution, and memory leaks.

Leverage CDP knowledge – develop automation, performance analysis, and custom testing tools.

Mastering DevTools and CDP empowers you to create tailored debugging solutions and improve development efficiency.