ChromeDevTools / ChromeDevTools/chrome-devtools-mcp
Logpoints: log runtime values without modifying source code
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 52.3k
- Forks
- 4.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 83
Description
Is your feature request related to a problem? Please describe.
When an agent needs to know what a page actually does at runtime — which branch
ran, what a value held, in what order events fired — its only real option today is to
edit the source, add console.log, rebuild, reload, read the output, and then remove
the calls again. That has four costs:
- It's a write to the user's codebase to answer a read-only question, and stray
console.logcalls get left behind and committed. - Every probe added or adjusted costs a full rebuild + reload of the frontend
bundle — slowest exactly when the agent is iterating fastest. - It requires source access and a local build. Debugging a deployed environment
(staging, a hosted app, anything the agent didn't build) can't be instrumented at
all. - The reload can destroy the state being observed — which matters a lot for
lifecycle bugs.
@natorion already put this better than I can, in #567 while discussing initScript:
I think its related to having log points, which would be like a specific screw
driver, which is superior to a multitool, if you have to work with screws.
This is a proposal for that screwdriver.
Describe the solution you'd like
Logpoints, as in the DevTools Sources panel: log an expression every time a line
executes, without pausing and without touching the source.
set_logpoint—urlorurlRegex,lineNumber(1-based), optional
columnNumber, andexpressionformatted likeconsole.logarguments and
evaluated in the scope of that line, so locals are accessible.urlaccepts either
a script URL as served, or an original source file (e.g.src/app.ts, suffix
match) resolved through the parsed scripts' source maps — and re-resolved
automatically when a rebuilt bundle loads. Survives reloads and navigations until
removed or the page closes.list_logpoints— what's currently active.remove_logpoint— one by id, or all on the page whenidis omitted.list_scripts— search script URLs and source-map sources, so the agent can
find the file to target.
Output arrives as ordinary console messages via list_console_messages, so no new
output channel is needed.
Logpoints never pause the page. Implementation is CDP
Debugger.setBreakpointByUrl with a condition that is an IIFE calling console.log
and returning false — the same trick the Sources panel uses. Execution is never
suspended.
A concrete case from our own use. An agent was asked why a spinner span forever
after navigating away from our app and pressing Back. It read the code, formed a
hypothesis, then confirmed it by setting three logpoints on authored TypeScript
lines — a navigation module and two engine methods — resolved through source maps into
a webpack chunk, plus pagehide/pageshow with their persisted flags. The captured
sequence showed a bfcache teardown bug: teardown ran on beforeunload, the page was
frozen with persisted=true, the WebSocket was closed by bfcache, and on restore
there was no popstate and no afterNavigate — so the app never re-entered the
page. The decisive evidence was a line that never executed, which is exactly what
reading code cannot give you and what a logpoint shows cheaply. Three probes, no
rebuild, no source change, and one remove_logpoint call to clean up all of them.
Describe alternatives you've considered
initScriptonnavigate_page(#568) — closest existing tool, but the
instrumentation has to be written up front, it only runs at document start so a
probe can't be added mid-session, it needs a reload, and it can't target "line 42 of
this.tsx".evaluate_script— point-in-time only. It can't observe a specific line as it
executes, and it has no access to local scope there.- Editing in
console.logcalls — the status quo, with the four costs above. - Interactive debugging (#407) — related but a different feature. Pausing and
stepping is stateful and blocks the page, which is risky to hand an agent. Logpoints
are non-blocking and need none of that machinery; they arguably deliver much of the
practical value of #407 without the hang risk, and could be a first step toward it.
Additional context
I have this implemented and working:
feat/logpoints
(needs a rebase onto current main, which has since refactored DevtoolsUtils.ts).
Our team has been using it daily for about six weeks; it's changed how our agents
investigate runtime behaviour, and the non-local case in particular — debugging a
hosted environment we can't rebuild — isn't reachable any other way.
Known limitations I'd call out rather than hide: a logpoint placed on a line that runs
during initial script evaluation can miss executions that happen before the source map
is fetched, and a line with no executable code slides to the next valid location (same
as DevTools).
Happy to open a PR if the direction is welcome.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing feat/logpoints implementation and rebasing it onto current main, especially the refactored DevtoolsUtils.ts. Trace the CDP Debugger.setBreakpointByUrl integration and the list_console_messages path; done means the four logpoint commands work with source-map resolution, survive reloads as described, and do not pause the page.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- devtools
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100