A quick guide to enabling and using Chrome's remote debugging feature with the --remote-debugging-port flag.

remote-debugging.md

A Guide to Chrome's Remote Debugging Feature

Ever wanted to control your browser with a script without losing your current login session? Or debug a tricky issue on a colleague's machine from your own desk? Chrome has a powerful built-in feature for this called remote debugging.

This guide explains what it is and how to get started.

---

What is Remote Debugging? 🤔

Remote debugging is a feature that exposes Chrome's powerful DevTools Protocol (CDP) over a network port. When you launch Chrome with a special flag, it starts a server that allows other applications to connect and take control.

Think of it like opening a direct command line to your browser. This lets you:

• Automate a live session: Connect scripts (like Puppeteer or Playwright) to a browser you're already using, complete with your logins, cookies, and extensions.
• Inspect complex web apps: Debug pop-ups, web workers, or other hard-to-reach parts of a website.
• Collaborate on debugging: Allow another person on your network to inspect and debug your browser session.

---

How to Use It 💡

Using this feature involves two simple steps: launching the browser with the correct flag and then connecting to it.

Step 1: Launch Chrome with the Flag

First, make sure to close all running instances of Chrome. Then, open your terminal or command prompt and run the appropriate command for your OS. We'll use port 9222, which is the standard.

• bash

  "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir='C:\tempUser'

Your browser will now launch, and a message will appear in the terminal confirming that DevTools is listening.

Step 2: Connect to the Browser

You can connect in two primary ways:

1. Using Another Browser Tab

This is the simplest method. Just open a new tab and navigate to: chrome://inspect/#devices

You will see a list of all the open tabs in the controlled browser. Click on any of them to open a DevTools window and start inspecting it remotely.

2. Using an Automation Script (e.g., Puppeteer)

Instead of launching a new browser, your script can connect to the one you just started.

// connect-script.js
const puppeteer = require('puppeteer');

(async () => {
  // Connect to the browser instance instead of launching a new one
  const browser = await puppeteer.connect({
    browserURL: 'http://localhost:9222',
  });

  console.log('Successfully connected to the running browser!');
  
  // You now have full control
  const pages = await browser.pages();
  const firstPage = pages[0];
  console.log('The first tab title is:', await firstPage.title());

  // Disconnecting leaves the original browser window open
  await browser.disconnect();
})();

---

Important Notes on Network & Security 🚨

• Local by Default: Without any extra flags, the debugging port is only accessible from your own machine (localhost). This is safe.
• Allowing Network Access: To allow other devices on your network to connect, you must add the --remote-debugging-address=0.0.0.0 flag at launch.
• Firewall Block: If you allow network access, your computer's firewall will almost certainly block the connection. You must add a firewall rule to allow incoming TCP traffic on the port you chose (e.g., 9222).

Warning: Only allow network access on a trusted network. Anyone who can connect to the port will have full control of that browser instance.

3) Launch Chrome with remote debugging for Attach to Chrome

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