Amulya Bhatia

Connecting technical innovations to business wins

          
                                 Gemini CLI (Firebase Studio)
   (MCP: chrome-devtools)
        |  --browserUrl=https://<PUBLIC_BASE>  → GET /json/version
        |  ...then connect to WSS /devtools/browser/<id>
   [Node “shim” proxy on your machine]
        |  - rewrites Host: 127.0.0.1
        |  - rewrites webSocketDebuggerUrl in /json/version to your tunnel host
   Chrome (headless) with CDP 127.0.0.1:9222

          
                                     <!doctype html>

<meta charset="utf-8">
<title>MCP Debug Demo</title>
<input id="q" placeholder="Type (e.g. chicken)…">
<button id="jank">Force Jank</button>
<pre id="log"></pre>
<script>
let reqs=0, leaks=0;
const log = (...a)=>document.getElementById('log').textContent += a.join(' ')+'\n';
async function search(t){ if(!t) return;
  reqs++; log('fetching', reqs);
  const r = await fetch('https://dummyjson.com/recipes/search?q='+encodeURIComponent(t));
  await r.json();
function heavy(){ let s=0; for(let i=0;i<3e7;i++) s+=i%3; log('jank done'); }
const q=document.getElementById('q');
q.addEventListener('input', (e)=>{
  // intentionally bad: new scroll listener each input + no debounce
  window.addEventListener('scroll', ()=>{ let s=0; for(let i=0;i<30000;i++) s+=Math.sqrt(i); });
  leaks++; log('leaks', leaks);
  search(e.target.value);
document.getElementById('jank').onclick = heavy;
</script>

          
                                       # macOS (adjust for Windows/Linux as needed)
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --remote-debugging-port=9222 \
  --headless=new \
  --user-data-dir=/tmp/mcp-chrome

          
                                       curl http://127.0.0.1:9222/json/version  # should return JSON w/ webSocketDebuggerUrl

          
                                       ngrok http 9222 --host-header="127.0.0.1:9222"

          
                                       curl https://<YOUR_NGROK_HOST>/json/version
# Expect JSON (Host-header error = wrong flags)

          
                                       mkdir

 -p ~/cdp-shim && cd ~/cdp-shim
npm init -y
npm i http-proxy express

          
                                       // Minimal CDP shim: rewrites webSocketDebuggerUrl to your public host
const express = require('express');
const httpProxy = require('http-proxy');
const http = require('http');
const UPSTREAM = 'http://127.0.0.1:9222';
const PUBLIC_HOST = process.env.PUBLIC_HOST; // e.g. my-tunnel.ngrok-free.app
if (!PUBLIC_HOST) { console.error('Set PUBLIC_HOST to your tunnel host'); process.exit(1); }
const app = express();
const proxy = httpProxy.createProxyServer({ target: UPSTREAM, ws: true, changeOrigin: false });
// 1) Rewrite /json/version to swap scheme+host in webSocketDebuggerUrl
app.get('/json/version', (req, res) => {
  const reqUp = http.request({ host: '127.0.0.1', port: 9222, path: '/json/version',
    headers: { Host: '127.0.0.1:9222' } }, (up) => {
    let body = ''; up.setEncoding('utf8');
    up.on('data', c => body += c);
    up.on('end', () => {
      try {
        const j = JSON.parse(body);
        const path = new URL(j.webSocketDebuggerUrl).pathname; // /devtools/browser/<id>
        j.webSocketDebuggerUrl = `wss://${PUBLIC_HOST}${path}`;
        res.set('content-type', 'application/json; charset=utf-8');
        res.end(JSON.stringify(j));
      } catch (e) { res.statusCode = 502; res.end(String(e)); }
  reqUp.on('error', e => { res.statusCode = 502; res.end(String(e)); });
  reqUp.end();
// 2) Everything else → proxy straight through (incl. WS upgrades)
app.use((req, res) => {
  // Ensure Chrome accepts upstream Host:
  req.headers.host = '127.0.0.1:9222';
  proxy.web(req, res, { target: UPSTREAM });
const server = app.listen(3000, '127.0.0.1', () =>
  console.log('CDP shim on http://127.0.0.1:3000 (PUBLIC_HOST=%s)', PUBLIC_HOST)
server.on

('upgrade', (req, socket, head) => {
  req.headers.host = '127.0.0.1:9222';
  proxy.ws(req, socket, head, { target: UPSTREAM });

          
                                       PUBLIC_HOST=<YOUR_NGROK_HOST> node server.js

          
                                       ngrok http 3000
# Your public base is now https://<YOUR_NGROK_HOST>
curl https://<YOUR_NGROK_HOST>/json/version    # JSON, with wss://<YOUR_NGROK_HOST>/devtools/browser/<id>

          
                                       # Optional: require('ws') or use wscat
npx wscat -c wss://<YOUR_NGROK_HOST>/devtools/browser/<id>   # should connect

          
                                       1
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl=https://<YOUR_NGROK_HOST>",
        "--headless=true",
        "--isolated=true",
        "--logFile=.gemini/chrome-mcp.log"

          
                                       & "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  --remote-debugging-port=9222 --headless=new --user-data-dir=$env:TEMP\mcp-chrome

          
                                       mkdir cdp-shim; cd cdp-shim
npm init -y

What we’ll build

Prerequisites

Step 0 — (Optional) A tiny “buggy” page to analyze

Step 1 — Start Chrome with the DevTools protocol on your machine

Step 2 — Expose it with a tunnel

Step 3 — Add the tiny shim that rewrites /json/version

Step 4 — Point Gemini CLI (Firebase Studio) at the tunnel

Step 6 — Runtime analysis on your Firebase app

Troubleshooting (copy-paste fixes)

Appendix: Windows commands