Chrome Remote Debugging with Custom Console and Network Monitor
This documentation describes a simple but powerful setup for monitoring both console logs and network activity in a Chrome instance, particularly useful for debugging web applications.
Features
This setup enables the composer agent to have live access to the google chrome logs and network activity and can take initiative on using it.
Use Cases
You can ask the agent various debugging-related questions, such as:
“Based on console logs, what is the pet store id?”
“Fix the console errors”
Since the agent has live access to the output, you can ask it to fix console errors, then re-read the new console logs upon refreshing the page, and repeat, automatically.
Setup Instructions
Please refer to cursor-chrome-composer for the setup, as you need to create a Javascript file that the agent can execute.
How it works
Chrome Remote Debugging Mode
Opens a WebSocket server for external connections
Exposes Chrome DevTools Protocol (CDP) API
cursor-composer.js Script
The script performs the following functions:
Connects to Chrome’s WebSocket server
Uses CDP to:
Subscribe to console events
Monitor network activity
Execute commands
Receive real-time updates
Result
Through this pipeline, the Composer gains live access to the browser’s console and network activity, because the agent can execute the javascript file in a new terminal tab, thus having the output in its context at all times.
Important: You must make sure the agent runs the command NOT in the composer chat as an embedded terminal - but as a terminal as a editor, so the application doesn’t shut down automatically and you can keep in the context across composers.
Can we do that??? So the Agent will use the terminal directly and not in his chat?
If the composer opens a terminal embedded, you can choose to make it a “pop up terminal” and then when it’s in the terminal pane, right click on the terminal and “Move terminal into Editor Area,” this way, the composer can get access to a long running script’s terminal output
i also launched something similar for fetching browser logs, network reqs, and current screenshot of the webpage directly into composer so its easier to debug. check it out here - x.com
ah yes this is known. i made this on mac and used a vm to test for windows but this issue is happening for actual windows users.
would really appreciate if you could contribute to the repo and fix this. it’s just one line of code where the powershell command needs to be fixed
also it looks like theres no logs on the tab that you’re trying to fetch from. did you perform the actions that log to console after connecting to the tab from cursor?
I updated the repo with a more powerful way of doing this, using playwright.
This mean that you don’t need to add a new chrome instance manually, fetch the id and connect it to the monitor. With playwright, it does this automatically.
Also with playwright. you can run automated tasks which is monitored.
So an example scenario to use it is:
There a bug in your CreatePet component
Tell the composer to create a playwright script to navigate to it, expending BaseMonitor and using existing modules (e.g. logging in). Make the playwright script instanitate BaseMonitor with ExitOnError = true.
Now tell the composer “Run the NavigateToCreatePet script, read the errors, and fix it, and run the script until it works.”
The composer will hopefully run it, a chromium browser will appear and it will navigate to the page, all console logs in the context of the composer
Since ExitOnError is true, when it encounters an error, the script execution is stopped, and the composer can read the final output (which is the error console message) . From there it should get a stacktrace, fix the error, and then run the procedure again.
I’ve used this process to fix one bug so far. It was pretty cool.
(+ made some features for clearing the console upon refresh, etc)
I’d been trying to figure out how to get pre-existing terminals into the composer! It is so useful when it spins up a background terminal on its own. This has helped me a ton!
I’d started out with a lazier approach of using the the Edge Dev Tools extension for VS Code. Using the debug console mode, which helped expose some of the runtime info but not as much as it looks like the CDP API does!
Since yours is more straightforward than the script solution first I tried the extension.
I develop a project on a remote server with public ipv4. Cursor is being used on my home workstation and It is connected to that remote server via SSH.
While still working on it I test this app on my local browser.
I found that the extension is failing possibly by assuming both browser and cursor are on the same host.
I am a newbie. May be I did something wrong. Just wanted to report on what I experienced hoping I might contribute.
thanks for the feedback. i believe you reached out on github discussions too? i believe that the issue you’re facing is that cursor and chrome debug host are supposed to run on the same host to work properly together. this happened to one of our other users before and i shared that discussion link with you on github. do reach out if you need more help
