Give the agent senses — and the dev steering it
An agent that reads neither the JS console nor the failed requests debugs a front end blind. Console and network are the two feedback loops of front-end dev: they are the most cost-effective primitives in the whole tool, complemented by pixel capture and the semantic view of the accessibility tree.
consolenetworkmetricsscreenshotpdfa11yRecorded demo — real Chrome, repository reference site (cast source): console, network, runtime metrics.
"It's fixed" — except the page is broken · the exception, the 500 XHR and the dead click become three JSON objects
The agent announces it's fixed; you discover otherwise by opening the browser. So you become a scribe: a screenshot pasted into the chat, a stack trace transcribed by hand, the Network tab described in words.
$ cdpx console --duration 3
{"entries":[{"kind":"console","type":"error","text":"TypeError: cart is undefined","ts":1751700000123.4}],"count":1,"errors":1,"duration":3.0}
$ cdpx network http://demo.test/checkout
{"url":"http://demo.test/checkout","requests":[{"url":"http://demo.test/api/cart","method":"GET","resourceType":"XHR","status":500,…}],"summary":{"total":14,"errors_4xx_5xx":1,"bytes":184320}}
$ cdpx dom-diff -- click "#offcanvas-cart"
{"action":["click","#offcanvas-cart"],"changed":false,"diff":[],"lines":0}
What changes: the exception, the 500 XHR and the dead click are three JSON objects that the agent reads, correlates and re-checks after its fix. The "fix, then prove" loop no longer runs through your eyes.
Reading the page like a screen reader · roles and names, without the HTML noise
Full HTML is expensive to read — for an agent as much as for a human. The accessibility tree is the semantic view of the page: roles and names, without the noise. A button with no accessible name disappears from it — which is exactly the signal being sought.
$ cdpx a11y
{"nodes":[{"role":"RootWebArea","name":"Fixture: form","ignored":false},{"role":"heading","name":"Form","ignored":false},…,{"role":"textbox","name":"Name","ignored":false},…,{"role":"textbox","name":"Email","ignored":false},…,{"role":"button","name":"Submit","ignored":false},…]}
What changes: the agent checks labels, heading structure and landmark regions without parsing the HTML — and accessibility gaps become visible at the same cost.
Recorded demo — real Chrome, repository reference site (cast source): targeted screenshot, full-page JPEG, PDF, then the whole page as accessible roles and names.