Teachers do not need to memorize this section. It supplies execution steps and sources for whoever prepares the connection.
Prerequisites and profile separation
Use an approved installation of OpenCode, stable Chrome, and Node.js LTS with npm matching the official requirements. Check availability with opencode --version, node --version, npm --version, and npx --version. If commands are missing after installation, check PATH in a new terminal. If Windows script policy blocks npm launchers, use approved npm.cmd and npx.cmd without weakening the policy.
Since Chrome 136, debugging switches do not apply to the default user data directory. Use a non-default --user-data-dir as shown below. Do not copy an existing profile. If teacher-browser-profile already serves another purpose or is synchronized, choose a different approved local path. Close any earlier practice instance using this dedicated profile first. Everyday Chrome does not need to close.
Windows PowerShell
This finds common installation locations and opens dedicated Chrome. Administrator privileges are not required.
$candidates = @(
"$env:ProgramFiles\Google\Chrome\Application\chrome.exe",
"${env:ProgramFiles(x86)}\Google\Chrome\Application\chrome.exe",
"$env:LOCALAPPDATA\Google\Chrome\Application\chrome.exe"
)
$chrome = $candidates | Where-Object { Test-Path $_ } | Select-Object -First 1
if (-not $chrome) { throw "Chrome path not found. Check the approved installation path." }
$profile = Join-Path $env:USERPROFILE "teacher-browser-profile"
Start-Process -FilePath $chrome -ArgumentList @(
'--remote-debugging-address=127.0.0.1',
'--remote-debugging-port=9222',
"--user-data-dir=`"$profile`"",
'https://example.com/'
)
For a custom installation, inspect the executable path in Chrome's shortcut properties, assign the actual path to $chrome, and use the launch portion. Quotes around the profile path preserve spaces in account names.
macOS Terminal
For the usual system-wide installation, run the following without sudo.
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--remote-debugging-address=127.0.0.1 \
--remote-debugging-port=9222 \
--user-data-dir="$HOME/teacher-browser-profile" \
https://example.com/
For an installation under ~/Applications, replace the first line with "$HOME/Applications/Google Chrome.app/Contents/MacOS/Google Chrome". Check other installation locations in Finder. Leave the terminal running Chrome open and use a new tab for the next checks.
Verify the local connection
In dedicated Chrome, open chrome://version, confirm that the profile path is under teacher-browser-profile, then close that tab. Leave only the public practice page. On Windows, run:
Get-NetTCPConnection -LocalPort 9222 -State Listen |
Select-Object LocalAddress, LocalPort, OwningProcess
Invoke-RestMethod http://127.0.0.1:9222/json/version |
Select-Object Browser, webSocketDebuggerUrl
On macOS, run:
lsof -nP -iTCP:9222 -sTCP:LISTEN
curl --fail --silent --show-error http://127.0.0.1:9222/json/version
The listener must use loopback, such as 127.0.0.1 or ::1, and the JSON should contain Browser and webSocketDebuggerUrl. This confirms Chrome's response, not the AI connection yet. Stop and investigate if the listener uses all interfaces (0.0.0.0, *, or ::) or another process owns the port. Do not kill unrelated processes. Do not open firewalls or configure port forwarding. Do not paste debugging connection details into chat or shared documents. Loopback does not fully isolate the browser from other programs on the same computer.
If teacher-web-assistant/opencode.json exists, keep a safe local copy and preserve existing settings. Merge only the following chrome-devtools entry under mcp. Edit an existing entry with that name rather than creating a duplicate key. Use this complete example unchanged only for a new configuration file.
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"chrome-devtools": {
"type": "local",
"command": [
"npx",
"-y",
"chrome-devtools-mcp@latest",
"--browser-url=http://127.0.0.1:9222",
"--no-usage-statistics",
"--no-performance-crux"
],
"enabled": true
}
}
}
The OpenCode format places the executable and arguments together in command. The type is local; do not configure Chrome's HTTP address as a remote MCP server. If Windows cannot resolve npx, check installation and PATH, then use npx.cmd or an approved executable path as the first entry if needed.
-y automatically accepts package installation and @latest retrieves the latest package, so establish installation permission first. A slow first download may exceed the connection timeout. Inspect installation progress and errors rather than retrying blindly.
According to the official options, the last two flags disable MCP usage statistics and sending performance-trace URLs to CrUX. They do not block page text or screenshots from reaching the model, or disable all Chrome browser metrics. They do not enforce read-only access either. Apply tool permissions separately according to institutional policy.
Save the configuration, end the OpenCode session, and restart it in this workspace. Check the MCP status for chrome-devtools. If it fails, investigate Chrome's port response, package execution, then OpenCode configuration. Do not bypass security warnings or institutional restrictions.
💬 댓글
이 글에 대한 의견을 남겨주세요