Deze pagina is vertaald door de Cloud Translation API.

Hoe P2ER een omgeving met hoog vertrouwen creëerde voor agentgestuurd programmeren met Chrome DevTools voor agents

Peer Weidner

José Luis Zapata

Gepubliceerd: 22 juni 2026

P2ER , een bureau voor digitale oplossingen, gebruikt Chrome DevTools voor agents om ervoor te zorgen dat alleen geverifieerde, werkende software aan mensen wordt doorgegeven voor de uiteindelijke beoordeling. Door hun workflow om te zetten naar een agentgestuurde infrastructuur hebben ze AI-agents in staat gesteld om empirische UI-verificatie uit te voeren, waardoor de implementatiefrequentie is verhoogd van eens per week naar meerdere keren per dag.

De uitdaging: Kwaliteit opschalen in bestaande applicaties

P2ER levert hoogwaardige digitale ervaringen voor wereldwijde merken, waaronder autofabrikanten, horlogemerken en horecabedrijven. Hun grootste uitdaging, zoals voor veel bedrijven, was het werken binnen complexe, bestaande applicaties. Als team dat agentic coding implementeerde, stuitten ze op drie grote obstakels:

Kwetsbare UI-testen. Standaard testsuites hadden moeite met dynamische data, zoals fluctuerende hotelprijzen of seizoensgebonden aanbiedingen in sommige projecten van P2ER. Mock-data maskeerden vaak integratiefouten die een menselijke tester direct zou ontdekken.
Problemen met de betrouwbaarheid van de agenten. Zonder expliciete instructies beweerden AI-agenten soms dat een taak was voltooid, zonder dit daadwerkelijk te controleren.
Verlies van context. Brede taken en time-outs van modellen zorgden ervoor dat agents het overzicht over de sessiedoelen verloren. Dit maakte het voor ontwikkelaars moeilijk om het werk dat een agent was begonnen te traceren en voort te zetten.

De oplossing: Bouw infrastructuur voor vakmanschap.

P2ER heeft een infrastructuur ontwikkeld die AI behandelt als een "sparringpartner" die ook de repetitieve aspecten van de ontwikkeling kan afhandelen. Deze aanpak stelt het team in staat om vakmanschap op te schalen door zich te concentreren op architectuur en creatieve probleemoplossing.

Dwing empirische verificatie af met DevTools voor de MCP-server van de agents.

Om de betrouwbaarheid te waarborgen, heeft P2ER een verplichte empirische verificatieregel ingesteld. Deze technische eis, vastgelegd in het AGENTS.md bestand van het project, luidt als volgt:

All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.

In plaats van blindelings op het woord van de agent af te gaan, gebruikt het team Chrome DevTools voor agents om agenten een veilige omgeving te bieden waarin ze de applicatie visueel en interactief kunnen verkennen.

Deze "testagents" voeren verschillende belangrijke taken uit die standaard statische tests over het hoofd zien:

Dynamische datatests: Zelfs in een testomgeving testen agents met echte, fluctuerende data (zoals veranderende hotelprijzen per seizoen) om de applicatie precies zo te ervaren als een gebruiker dat zou doen. Dit wordt mogelijk gemaakt door de interactietools van DevTools voor agents, zoals new_page , navigate_page , fill , click en hover , die worden aangeroepen in hun github-issue-test skill. Hierdoor kan de agent dynamisch authenticeren en een realistisch klikpad van een gebruiker simuleren.
Visuele controles: Agenten identificeren visuele verschillen tussen Figma-lay-outs en de daadwerkelijke implementatie. Door gebruik te maken van de take_screenshot tool van DevTools voor agenten, maakt hun figma-validate vaardigheid screenshots met hoge resolutie van live Storybook-renders om een vergelijking naast elkaar uit te voeren met Figma-exports.
Gebruiksvriendelijkheidscontroles: Agenten sporen ontbrekende vertalingen of gebruiksvriendelijkheidsfouten op die geautomatiseerde scripts vaak over het hoofd zien. Door rechtstreeks met de toegankelijkheidsstructuur te interageren en visuele momentopnamen te bekijken, verkregen via take_snapshot en take_screenshot , scannen agenten actief op UI-anomalieën zoals MISSING_MESSAGE-strings, zoals expliciet is aangegeven in hun geautomatiseerde verificatieworkflows.

Deeltaken opsplitsen en opslaan

Om sessietime-outs en contextverlies tegen te gaan, compartimentaliseert P2ER het werk strikt via subagenten. Vervolgens instrueren ze hun agenten om als orkestrators te fungeren, zoals hieronder weergegeven:

Rather than executing everything in the main thread, you must decompose large
or complex objectives into modular subtasks that can be delegated
to specialized subagents.

Om producteigenaren op de hoogte te houden van dit proces, heeft het team een aangepaste skill geïntegreerd waarmee agents hun werk kunnen bijhouden in GitHub-issues. Dit zorgt ervoor dat elke taak van een subagent en de bijbehorende resultaten worden opgeslagen en gedocumenteerd als een sub-issue met behulp van de GitHub API. Hierdoor ontstaat een duidelijk auditspoor en een permanente context die andere ontwikkelaars kunnen raadplegen.

Isoleer omgevingen voor parallelle uitvoering.

Om hun ontwikkelingsproces te schalen zodat meerdere agents parallel code kunnen uitvoeren, vereist P2ER geïsoleerde omgevingen per taak voor hun agents. Dit voorkomt statusconflicten en netwerkproblemen tijdens UI-verificatie.

De technische opstelling voor deze isolatie omvat:

Geïsoleerde Git-werkmappen: Om conflicten tussen bestanden en vervuiling van de werkruimte te voorkomen wanneer meerdere agents parallel werken, worden taken uitgevoerd binnen geïsoleerde Git-werkmappen. Elke agent krijgt een eigen bestandssysteemruimte waar omgevingsvariabelen naartoe worden gekopieerd en afhankelijkheden via symbolische links worden gekoppeld. Dit zorgt ervoor dat wijzigingen in bestanden elkaar nooit overschrijven.
Unieke omgevingen: Elke agent en taak draait zijn Next.js-ontwikkelserver op een unieke, geïsoleerde poort. Volgens de projectregels worden de servers dynamisch gestart met npx next dev -p <custom_port> --turbopack om parallelle uitvoering zonder netwerkconflicten te garanderen.
Databaseklonen: Om dataconflicten tijdens parallel testen te voorkomen, dupliceert P2ER programmatisch de hoofddatabase naar een taakspecifiek schema bij het opstarten van de agent. Nadat de agent de verificatie heeft voltooid en de taak is goedgekeurd, verwijdert een geautomatiseerd opschoonproces de geïsoleerde database. Deze levenscyclus zorgt ervoor dat elke agent in een schone werkomgeving werkt en geen achtergebleven data achterlaat.
Gerichte tests: Alle browsertests via Chrome DevTools voor agents moeten gericht zijn op de exacte aangepaste poort die aan die specifieke agent-instantie is toegewezen. Hun testvoorschrift verbiedt het hardcoderen van standaardpoorten; testdoel-URL's moeten daarom worden gebruikt zoals http://localhost:<custom_port> .

Resultaat: Een vertienvoudiging van de ontwikkelingssnelheid met behoud van kwaliteit.

De overstap naar agentgestuurde codering met hoge betrouwbaarheidsnormen heeft de output van P2ER getransformeerd. Deze veranderingen waren aanvankelijk nodig om de betrouwbaarheid van de agent te garanderen, maar ze kwamen ook de gehele ontwikkelingscyclus ten goede:

10x snellere werkcycli: De meeste problemen worden nu binnen één dag opgelost, vergeleken met het vorige gemiddelde van 1-3 dagen. De implementatiefrequentie is gestegen van één keer per week naar meerdere keren per dag.
Strategische focus voor QA-teams : Doordat agents nu basisregressies en 'makkelijk te vinden' fouten opsporen, kan het menselijke testteam zich concentreren op meer diepgaande, complexe testscenario's.
Robuuste implementaties voor belanghebbenden: Implementaties zijn nu veerkrachtiger omdat testen verder gaat dan het standaard "ideale scenario" van de programmeur.
Duidelijkere communicatie en traceerbaarheid: Door de regel "menselijk probleem naar implementatiesubprobleem" toe te passen, ontvangen belanghebbenden duidelijke instructies over welke logische verbeteringen zijn doorgevoerd, in plaats van door tickets te moeten bladeren die vol staan met technische implementatiedetails en hoe deze te testen.

Als voorbeeld van de impact hiervan op de ontwikkelsnelheid: P2ER bouwde in zes maanden een nieuw platform, iets wat met hun gebruikelijke methoden jaren zou hebben geduurd. De mens blijft de laatste kwaliteitscontrole, door pull requests te beoordelen die al door agents zijn gevalideerd.

Technische inzichten voor teams

Tijdens het ontwikkelen van deze workflow heeft P2ER verschillende strategieën geïdentificeerd die hen hielpen bij de overgang van experimenteren naar een volwaardig, agent-ondersteund ontwikkelingsmodel.

Deze strategieën kunnen andere teams helpen hun eigen agentische implementaties te verfijnen:

Optimaliseer het tokengebruik met scriptinjectie en CLI-batchverwerking.

MCP-servers kunnen tijdens lange ontwikkelsessies veel tokens verbruiken als agents uitsluitend vertrouwen op stapsgewijze navigatie (bijvoorbeeld een momentopname maken, een ID vinden, een invoerveld invullen en wachten). Om deze overhead te minimaliseren, gebruikt P2ER een tweeledige aanpak:

Inline scriptinjectie: Voor gerichte interacties, zoals authenticatie via complexe React-formulieren, gebruiken agents de evaluate_script tool om pure JavaScript rechtstreeks in de browser te injecteren. Dit omzeilt ingebouwde setter-overrides en voert meerdere acties tegelijk uit, waardoor veel gespreksrondes worden bespaard.
CLI-scriptbatchverwerking: Wanneer agents vastlopen of een buitengewoon lange, repetitieve browserflow tegenkomen, schakelen ze over naar een CLI-batchverwerkingsoptie. In plaats van tokens te besteden aan herhaalde, individuele MCP-tools of het schrijven van aangepaste automatiseringsscripts, geeft P2ER de Chrome DevTools CLI de opdracht om browseracties op te slaan en te bundelen. Hierdoor kunnen agents programmatisch complete workflows met meerdere stappen in één keer uitvoeren, waardoor de overhead van constante communicatie tussen model en tool drastisch wordt verminderd.

Automatiseer prestatietracking met Trace Analysis.

In plaats van puur op menselijke waarneming te vertrouwen, heeft P2ER een review-performance ontwikkeld die de DevTools voor agents gebruikt om geautomatiseerde Lighthouse-audits en prestatietraces uit te voeren.

Agenten gebruiken de tools performance_start_trace en performance_analyze_insight om Core Web Vitals (LCP, INP, CLS) vast te leggen en te onderzoeken, en om knelpunten in de hoofdthread of wijzigingen in de lay-out te identificeren. Om de kwaliteitscontrole compleet te maken, kunnen agenten een volledige lighthouse_audit uitvoeren om specifiek te beschermen tegen regressies op het gebied van toegankelijkheid (a11y), SEO en algemene best practices voor webontwikkeling, zodat alleen code van hoge kwaliteit wordt ingediend voor een pull request.

Verbeter de verificatie met Chrome DevTools voor agents.

Naast hun eigen expertise maakt P2ER gebruik van de kernfunctionaliteiten van de Chrome DevTools for agents MCP-server voor functionele verificatie. Dit omvat het emuleren van verschillende apparaten met de server en het testen van de responsiviteit, om er zeker van te zijn dat de gebruikersinterface werkt op verschillende schermformaten en apparaten.

Door de MCP-server te gebruiken om door de applicatie te navigeren, kunnen agents visuele verschillen tussen lay-outs en de daadwerkelijke implementatie identificeren, waardoor fouten worden opgespoord die bij statische tests vaak over het hoofd worden gezien.

Bronnen

Om de toepassingsmogelijkheden van P2ER verder te verkennen, kunt u alle genoemde vaardigheden bekijken in de bijbehorende GitHub-repository .

Om zelf aan de slag te gaan en meer te leren over het implementeren van vergelijkbare workflows met DevTools voor agents, kunt u deze bronnen raadplegen: