Debugging with Devtools

Debugging with DevTools is possible by setting the system property -Dchromium.debug_port=8888. This enables full debugging of HTML, CSS, and JavaScript for the embedded browsers. However, starting from version 128, the debugging process has been updated to utilize chrome://inspect, and the previous method using localhost:port is no longer available. Follow these steps to debug your application:

  1. Set the Debugging Port

    Add the system property -Dchromium.debug_port=8888 to your application. This configures Chromium to expose the debugging interface on port 8888.

  2. Open Chrome’s Inspect Interface

    Launch Google Chrome and navigate to chrome://inspect.

  3. Access DevTools for the Node Environment

    Click "Open dedicated DevTools for Node".

  4. Add Your Debugging Port

    Click "Add Connection".
Enter localhost:8888 as the target and confirm.

  5. Reload the Inspect Page

    Return to chrome://inspect and reload the page to ensure the target appears. This may take a few seconds.

  6. Inspect the Remote Target

    Under Remote Target, locate your embedded browser instance and click "Inspect" to open DevTools for that instance.
It is recommended to only use this feature in development and to not include it in production.

It requires a compatible version of Chrome/Chromium.

Boost your app development with Equo Debug! Seamlessly debug Equo applications based on React.js and Vue.js with automated procedures and dedicated tools. Equo Debug automatically opens devtools in browsers for each Equo Browser instance. Simplify your development process with a single action. Try it now! For more details, contact out team. See this guide for a tutorial on how to debug applications that integrates Equo Chromium using your IDE, the Equo CLI, or DevTools.