search

yume-chan / ya-webadb

ADB in your browser
https://tangoapp.dev/
MIT License
2.33k stars 312 forks source link

Add Chrome remote debugger #524

Closed yume-chan closed 1 year ago

yume-chan commented 1 year ago

Chrome remote debugger is another not that useful, but also not that hard to implement feature for demonstrating using ADB.

Basic flow:

  1. Send /json HTTP request to localabstract:chrome_devtools_remote
  2. Parse the response and show page list to user
  3. User pick a page to inspect
  4. Open a modified Chrome DevTools Frontend in an iframe, bridging the WebSocket connection between it and device.

Implementation details:

  1. Find a basic HTTP request serializer and response parser, because the request and response are so basic, concatenating string and regex parsing should be enough.
  2. Find a WebSocket client implementation, might be able to adapt ws or other WebSocket package for Node.js
  3. Create a Chrome DevTools "Embedder" that convert WebSocket messages to postMessage messages
  4. Patch Chrome DevTools Frontend to use our "Embedder"
    1. Create an iframe with a new route in Next.js
    2. Load our implementation of globalThis.InspectorFrontendHost that communicates with the "Embedder" (https://github.com/ChromeDevTools/devtools-frontend/blob/d8339c3c10307b8a5635214d9fec607c14c189fd/front_end/core/host/InspectorFrontendHost.ts#L458-L484)
    3. Add a <script> to load inspect.js from specified Chrome DevTools Frontend version

Open questions:

  1. Looks like Microsoft Edge for Android has invalid devtoolsFrontendUrl field in /json response. Test how Chrome reacts to it.
  2. It might not work offline like all other features do
yume-chan commented 1 year ago

Microsoft Edge actually serves their DevTools files at https://devtools.azureedge.net/serve_file/@0a8f453929e6410c973aa529a40485ce4e3e03db/inspector.html

It might not be usable due to licensing issue.

glitch128 commented 1 year ago

hey, off-topic question, but how do I make https://devtools.azureedge.net/serve_file/@0a8f453929e6410c973aa529a40485ce4e3e03db/inspector.html load a webpage, or is it just a visual thing?

yume-chan commented 1 year ago

It doesn't load pages directly. In remote debugging scenarios, it uses WebSocket to connect to a remote debugging port.

glitch128 commented 1 year ago

oh, ok

glitch128 commented 1 year ago

hey, would it be possible to extend this functionality to other browsers, such as opera, edge, and/or firefox?

yume-chan commented 1 year ago
glitch128 commented 1 year ago

hey, I noticed that it only works for opera, but it doesn't work for opera beta, opera gx, mini, or others. also, I just tried to use it with edge, but the popup gets stuck on a white screen, but it works normally on edge beta.

yume-chan commented 1 year ago

Opera beta added. Opera GX uses WebView and doesn't enable remote debugging. mini not tested.

Opera (both stable and beta) is still using Chromium 75 so really not recommended.

Edge doesn't host its DevTools for stable versions (beta, dev and canary all hosted, although hidden). So I decide to use Chrome's hosted version for all browsers (including Opera) instead.

glitch128 commented 1 year ago

oh, ok. thanks

glitch128 commented 1 year ago

I tested Opera mini stable, beta, opera touch, and Opera crypto browser, but Tango doesn't connect to any of them.

yume-chan commented 1 year ago

Opera mini, Opera mini beta, Opera touch and Opera crypto browser also don't have their remote debugging enabled.