Default View
This is the standard, underlying DOM. The DisplayManager is sitting invisibly
on top.

Keyboard Controls:

Alt + Right Arrow : Next Display
Alt + Left Arrow : 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/devtools/page/F487AEBF5C563FD0049E
62FA3F3B174A');
[info] Connecting to WS...
undefined
[info] CDP WebSocket Connected!
> DisplayManager.switchTo('remote-linux');
undefined
> window.remote.sendCommand('Input.synthesizeScrollGesture', { x: 200, y: 200,
yDistance: -600 });
{}
> window.remote.sendCommand('Runtime.evaluate', { expression: 'document.title'
}).then(res => console.log(res));
{}
[log] {
  "result": {
    "type": "string",
    "value": "Porting LPC VM to Browser - Google Gemini"
  }
}
[error] WebSocket Error! Did you start Linux Chromium with --remote-allow-origi
ns="*" ?
> 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.cssConte
ntSize.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}`); });
SyntaxError: Unexpected end of input
> window.remote.connect('ws://localhost:9222/devtools/page/F487AEBF5C563FD0049E
62FA3F3B174A');
[info] Connecting to WS...
undefined
[info] CDP WebSocket Connected!
> window.remote.imgEl.addEventListener('click', async (e) => { const metrics =
await window.remote.sendCommand('Page.getLayoutMetrics'); const rect =
window.remote.imgEl.getBoundingClientRect(); const clickX = Math.round((e.clien
tX - rect.left) * (metrics.result.cssContentSize.width / rect.width)); const
clickY = Math.round((e.clientY - rect.top) * (metrics.result.cssContentSize.hei
ght / rect.height)); 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}`); });
undefined
[error] WebSocket Error! Did you start Linux Chromium with --remote-allow-origi
ns="*" ?
> window.remote.connect('ws://localhost:9222/devtools/page/F487AEBF5C563FD0049E
62FA3F3B174A');
[info] Connecting to WS...
undefined
[info] CDP WebSocket Connected!
> window.remote.imgEl.addEventListener('click', async (e) => { const rect =
window.remote.imgEl.getBoundingClientRect(); const clickX = Math.round((e.clien
tX - rect.left) * (window.remote.imgEl.naturalWidth / rect.width)); const
clickY = Math.round((e.clientY - rect.top) * (window.remote.imgEl.naturalHeight
 / rect.height)); console.log(`[info] CDP Click: X:${clickX}, Y:${clickY}`);
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 }); });
undefined
[log] [info] CDP Click: X:26, Y:29
[log] [info] CDP Click: X:49, Y:42
[log] [info] CDP Click: X:57, Y:26
[log] [info] CDP Click: X:289, Y:29
[log] [info] CDP Click: X:278, Y:31
[log] [info] CDP Click: X:268, Y:34
[log] [info] CDP Click: X:437, Y:838
[log] [info] CDP Click: X:336, Y:851
[log] [info] CDP Click: X:898, Y:703
[log] [info] CDP Click: X:916, Y:695
[log] [info] CDP Click: X:916, Y:690
[log] [info] CDP Click: X:921, Y:695
[log] [info] CDP Click: X:919, Y:429
[log] [info] CDP Click: X:924, Y:406
[log] [info] CDP Click: X:919, Y:711
[log] [info] CDP Click: X:919, Y:711
[log] [info] CDP Click: X:914, Y:690
[log] [info] CDP Click: X:916, Y:679
[log] [info] CDP Click: X:916, Y:705
[log] [info] CDP Click: X:919, Y:698
[log] [info] CDP Click: X:919, Y:687
[log] [info] CDP Click: X:26, Y:39
[log] [info] CDP Click: X:278, Y:26
[log] [info] CDP Click: X:29, Y:39
[log] [info] CDP Click: X:281, Y:39
[log] [info] CDP Click: X:276, Y:34
[log] [info] CDP Click: X:325, Y:851
Enter JavaScript...
Run