Devtools Remote Debugger

When this repository is used as the remote-debugger submodule of Streame, the client and dashboard use the current browser origin. Build and start it from the parent project:

bun run remote-debugger:install
bun run remote-debugger:build
bun run remote-debugger:start

The relay listens on 127.0.0.1:8899 and should be reached through the Streame Go gateway. Mouse, wheel, and keyboard input from the built-in DevTools screencast are forwarded to the client page. Because browsers do not grant user activation to remote synthetic input, a blocked Play action retries with the media muted so playback diagnostics can continue. The dashboard also exposes a Download logs action for each online client. It requests a live JSON snapshot containing browser, JW Player, media element, performance resource, console, and error diagnostics. Resource URLs omit query strings and fragments, and the snapshot does not collect cookies or web storage.

中文文档

DeepWiki

Based on Google's open-source devtools-frontend, you can use JavaScript to implement the Chrome DevTools Protocol . By simply loading a piece of JavaScript code on a web page, you can use the familiar Chrome DevTools to remotely debug the page.

The web page being debugged connects to an intermediate Node layer via WebSocket, and DevTools also connects to the Node layer via WebSocket. The primary role of the Node intermediate layer is to forward socket protocols between the web page and DevTools, enabling full-duplex communication between them.

Additionally, this project has been included in the awesome-chrome-devtools collection.

• Display Html Tags
• Edit Html Attributes
• Display Style Rules
• Highlight Node

• Execute JavaScript Code
• Show Error Stack

• Show Source Code

• Show XHR/Fetch Request
• Show JavaScript/CSS/HTML Request
• Show Image Request

• Local Storage
• Session Storage
• Cookies

• Live Preview

Open the command terminal and start the following commands

npm run dev

Open two pages in the browser

• Debug DEMO page: http://localhost:8080/remote/debug/example/index.html
• debug background: http://localhost:8899/page/index.html

1、Modify the variables of the .env file

# Private relay endpoint used by the Streame gateway
DEBUG_PORT=8899
DEBUG_BIND_HOST='127.0.0.1'

The browser-facing scripts use the current page origin automatically. Do not expose the relay directly; publish it through the authenticated /remote/debug/ gateway instead.

2. Execute npm run build to build the project code, and the dist directory will be packaged. The structure is as follows:

├── page    # Debug backend
│   ├── index.css
│   ├── index.html
│   ├── index.js
├── cdp.js  # The CDP code for debugging needs to be loaded on the page being debugged. You can deploy it to a CDN.

3. Start the backend

npm run start

4. The browser opens the debugging backend http://www.debug.com/remote/debug/index.html, if the debugging target page loads the cdp.js code, then the debugging backend will see the connection record

💡Please note that www.debug.com is just an example, please replace it with your own specific domain.

Due to the restrictions of the same-origin policy, you may need to make the following changes:

• By default, the browser does not allow JavaScript to read CSSRules from different domains. Therefore, when including external styles via a link, you need to add the attribute crossorigin="anonymous". This issue does not apply to styles within style tags.
• To capture detailed JavaScript error information, you also need to add crossorigin="anonymous" to the script tags.

MIT

Copyright (c) Nice-PLQ