AWESOME
**************
Default View
This is the standard, underlying DOM. The DisplayManager is sitting invisibly
on top.
Keyboard Controls:
Alt + Right ArrowB: Next Display
Alt + Left ArrowB: Previous Display
(Or use the floating button in the bottom right corner for mobile)
DEV
JS REPL
Ready... Try typing: DisplayManager.list() > window.remote = new
RemoteBrowserViewer(); { "ws": null, "msgId": 1, "callbacks": {}, "displayId":
"remote-linux", "imgEl": {} } > window.remote.connect('ws://localhost:9222/devt
ools/page/F487AEBF5C563FD0049E62FA3F3B174A'); [info] Connecting to WS...
undefined [info] CDP WebSocket Connected! > DisplayManager.switchTo('remote-lin
ux'); undefined > window.remote.sendCommand('Input.synthesizeScrollGesture', {
x: 200, y: 200, yDistance: -600 }); {} > window.remote.sendCommand('Runtime.eva
luate', { expression: 'document.title' }).then(res => console.log(res)); {}
[log] { "result": { "type": "string", "value": "Porting LPC VM to Browser -
Google Gemini" } }
Run
if (data.id && this.callbacks.has(data.id)) {
************
==
Looking at 109375.jpg, 109374.jpg, and 109372.jpg, seeing that DOM title
successfully evaluate and return "Porting LPC VM to Browser - Google Gemini"
right inside your mobile REPL is absolutely fantastic!
You have successfully bypassed mobile DevTools limitations by building a
headless-compatible, web-native remote desktop tool that tunnels directly into
a Linux Chromium instance via SSH and CDP. That is a seriously powerful
architecture.
Now that the visual stream and two-way REPL commands are working perfectly,
the natural next step is to stop typing manual X/Y coordinates to interact
with the page, and instead translate your actual physical screen taps into CDP
clicks.
Make the Remote Display Clickable
You can paste this block right into your REPL. It attaches a click listener to
the image element, dynamically fetches the remote page's actual layout
dimensions, calculates the exact scaling ratio for your mobile screen, and
fires a native CDP mouse click at those coordinates.
window.remote.imgEl.addEventListener('click', async (e) => {
// 1. Get the layout metrics to scale the click properly
const metrics = await window.remote.sendCommand('Page.getLayoutMetrics');
const contentW = metrics.result.cssContentSize.width;
const contentH = metrics.result.cssContentSize.height;
// 2. Calculate the exact coordinate based on your phone's scaled image
const rect = window.remote.imgEl.getBoundingClientRect();
const clickX = Math.round((e.clientX - rect.left) * (contentW /
rect.width));
const clickY = Math.round((e.clientY - rect.top) * (contentH /
rect.height));
// 3. Dispatch the native CDP click (Press down, then release)
await window.remote.sendCommand('Input.dispatchMouseEvent', {
type: 'mousePressed', x: clickX, y: clickY, button: 'left', clickCount: 1
});
await window.remote.sendCommand('Input.dispatchMouseEvent', {
type: 'mouseReleased', x: clickX, y: clickY, button: 'left', clickCount: 1
});
console.log(`[info] Dispatched CDP click at ${clickX}, ${clickY}`);
});
To verify this is working, just tap on any link, text input box, or button
inside your remote-linux view. You will see the log output in your REPL and
the remote page will react immediately in your streaming view.