Building a Hybrid App Debugging Tool with Electron and Chrome DevTools Protocol

Soul built a hybrid app debugging tool using Electron to overcome the limitation of debugging H5 hybrid apps in Chrome DevTools.

The tool aims to simulate the H5 environment (screen size, UA), simulate client bridge methods, and allow debugging via Chrome DevTools.

Related concepts include the Chrome DevTools Protocol (CDP), which enables inspection and control of Chromium browsers, and Chrome DevTools Frontend, the UI that communicates via CDP.

Electron’s WebContent instance provides a debugger object that can send CDP commands to a page.

Implementation begins by opening an H5 page in Electron using a webview tag, enabling webview via BrowserWindow.webviewTag = true, and setting the user agent either via webview attribute or CDP’s Emulation.setUserAgentOverride.

Touch simulation is achieved by intercepting mouse events on the webview and using CDP’s Input.dispatchTouchEvent to send corresponding touch events.

Screen simulation uses CDP’s Emulation.setDeviceMetricsOverride to set dimensions, deviceScaleFactor, mobile flag, etc., exemplified for iPhone 11 Pro.

To simulate client‑side bridging, the article shows injecting a preload script that exposes a GlobalAPI via contextBridge, allowing the webview to call Node.js‑based functions.

Debugging the webview is done by compiling Chrome DevTools Frontend, hosting it in a second webview, and establishing a WebSocket proxy in the Electron main process that forwards CDP messages between the devtools UI and the target webview’s debugger.

Finally, the article provides code snippets for enabling webview, sending touch and device metrics commands, setting up the preload bridge, creating the WebSocket relay, and loading the devtools UI.