Gepubliceerd: 10 november 2026
In dit nieuwe tijdperk van agentic webontwikkeling verwachten ontwikkelaars dat hun programmeeragents experts zijn in het bouwen voor het web. De nieuwste geavanceerde programmeermodellen zijn behoorlijk capabel en kunnen meestal iets produceren dat werkt. Maar als je een webontwikkelaar vraagt om de AI-gegenereerde code te beoordelen, kan die bijna altijd manieren vinden om de code sneller, toegankelijker of veiliger te maken.
Chrome investeert veel in de toekomst van agentic webontwikkeling. Om deze uitdaging aan te pakken, hebben we in mei tijdens Google I/O een vroege preview van Modern Web Guidance geïntroduceerd. Modern Web Guidance is een reeks vaardigheden die expertise over webplatforms, best practices en gegevens over browsercompatibiliteit rechtstreeks in je programmeeragents inbedden.
Vandaag kondigen we met trots de stabiele release van Modern Web Guidance versie 1.0 aan, die het volgende omvat:
- Nieuwe moderniseringsworkflow die je bestaande codebase scant, zodat je agent mogelijkheden vindt om veilig te moderniseren.
- Uitgebreide gidsendatabase die honderden geverifieerde AI-kennisgaten aanpakt met door experts gecontroleerde, cross-browser oplossingen.
- Grondigere beoordeling door menselijke experts voor elke gids, inclusief goedkeuring van technische leads voor contentgebieden en een speciale toegankelijkheidsbeoordeling van onze gidsen voor gebruikers.
- Volledige evaluatiedekking voor al onze handleidingen met een openbaar evaluatiedashboard dat de meetbare verbeteringen toont in vergelijking met agents zonder Modern Web Guidance.
Met versie 1.0 delen we ook graag dat Modern Web Guidance een cross-browser-initiatief wordt, waarbij Firefox en Edge zich bij Chrome aansluiten om de cross-browser-compatibiliteit te ondersteunen en te verbeteren en bij te dragen aan het project. We bouwen voort op ons gedeelde werk met Baseline en willen ervoor zorgen dat iedereen die met een agent codeert, de kracht en mogelijkheden van het moderne webplatform optimaal kan benutten.
Welke modellen of agent harnesses je ook gebruikt, als je voor het web ontwikkelt, hoort Modern Web Guidance thuis in je agentic workflow.
Voer deze opdracht uit vanuit je projectdirectory om Modern Web Guidance te installeren:
npx modern-web-guidance@latest install
Als je al een eerdere versie hebt geïnstalleerd, kun je updaten naar 1.0 door het volgende uit te voeren:
npx modern-web-guidance@latest update
Ga naar de documentatie over Modern Web Guidance voor aanvullende installatie-instructies of meer informatie, of bekijk deze video voor een kort overzicht:
Waarom ontwikkelaars en bedrijven Modern Web Guidance moeten gebruiken
Het is onmiskenbaar dat programmeeragents ontwikkelaars hebben geholpen om sneller dan ooit code te schrijven. Maar in een wereld waarin iedereen programmeeragents gebruikt, is snelheid geen concurrentievoordeel meer.
Tegenwoordig is het belangrijker dan ooit om je te onderscheiden op fundamentele factoren zoals gebruiksgemak en de kwaliteit van de gebruikerservaring. Hier zijn een paar manieren waarop Modern Web Guidance kan helpen:
Best practices versterken die modellen vaak missen
Hoewel geavanceerde programmeermodellen veel best practices goed beheersen, blijkt uit onze evaluaties dat ze op een aantal belangrijke gebieden nog tekortschieten, zoals:
- Toegankelijkheid: Toetsenbordfocus en inert beheer, ondersteuning voor verminderde beweging en toegankelijke formuliervalidatie.
- Gebruikerservaring: Swipe- en aanraakgebaren, dialoogvenster- en popover-overgangen en implementaties van lichte/donkere thema's.
- Prestaties: planning van taken voor de hoofdthread, isolatie van weergave buiten het scherm en preventie van indelingsverschuivingen.
- Beveiliging: Veilige HTML-opschoning, strikt Content Security Policy en beheer van inloggegevens voor toegangssleutels.
Het is vooral belangrijk om de best practices voor toegankelijkheid goed toe te passen, omdat fouten zoals een slechte ARIA een pagina minder toegankelijk kunnen maken dan helemaal geen ARIA. Voor versie 1.0 zijn onze gebruikershandleidingen beoordeeld en getest met echte ondersteunende technologieën door toegankelijkheidsexperts die deze elke dag gebruiken.
De beste webfunctie voor de taak gebruiken
AI-modellen zijn erg goed in het uitzoeken hoe je iets kunt laten werken met JavaScript, maar in veel gevallen zijn er HTML- of CSS-functies die hetzelfde kunnen doen met veel minder code. Omdat ze door de browser worden verwerkt, presteren ze meestal beter en bieden ze toegankelijkheidsmogelijkheden. Voorbeeld:
- Functies om pop-overs en dialoogvensters te animeren
- Functies om interacties op basis van scrollen en swipen te verbeteren
- Betere API's voor soepele en vloeiende paginaovergangen
Nieuwe functies kunnen ook de functionaliteit van een site verbeteren op manieren die belangrijk zijn voor gebruikers. Voorbeeld:
- Toegangssleutels en WebAuthn: Voor snellere en beter beveiligde inlogprocessen
- Automatisch invullen: om betaalprocessen (vooral op mobiele apparaten) te verbeteren die vaak mislukken als je aangepaste formulierbedieningselementen op basis van JavaScript gebruikt.
Modern Web Guidance is ontworpen om de beste functie voor de taak aan te bevelen, op basis van je vereisten voor browserondersteuning. De handleidingen bevatten ingesloten Baseline- en browsercompatibiliteitsgegevens, zodat de aanbevelingen kunnen worden afgestemd op de behoeften van je project.
Scan je codebase en vind mogelijkheden om te moderniseren
De meeste webontwikkeling vindt niet plaats in gloednieuwe projecten. Dit gebeurt in bestaande codebases die jaren aan verouderde tijdelijke oplossingen, onnodige afhankelijkheden en polyfills hebben verzameld die niet meer nodig zijn.
Versie 1.0 voegt een nieuwe moderniseringsworkflow toe die je bestaande HTML, CSS, JavaScript en package.json kan analyseren om mogelijkheden te vinden voor een veilige upgrade en je agent daarna door de wijzigingen te leiden.
/modern-web-guidance Modernize the code in this directory
In deze eerste release gebruikt de moderniseringsworkflow statische analyse om een beperkt aantal patronen te controleren. We hebben ervoor gekozen om te beginnen met een beperkt bereik dat voorspelbare resultaten oplevert en van daaruit uit te breiden. In de loop van de tijd willen we nog veel meer gebieden behandelen, waaronder agentische controles waarbij je agent rechtstreeks over je code redeneert in plaats van alleen bekende patronen te matchen.
Blijf op de hoogte van de ontwikkelingen van het webplatform
Het webplatform is een bewegend doel. In elke mijlpaal worden nieuwe functies in browsers geleverd en bestaande functies die je misschien eerder niet kon gebruiken, worden Baseline bij elke nieuwe browserrelease.
Omdat Modern Web Guidance is gebaseerd op Baseline-compatibiliteitsgegevens en de aanbevelingen worden onderhouden door browser-engineers, experts op het gebied van webstandaarden en toegankelijkheidsspecialisten, evolueren deze aanbevelingen samen met het platform zelf. Nu kan jouw project dat ook.
Meer informatie over nieuwe webfuncties en best practices
Hoewel Modern Web Guidance voornamelijk is ontwikkeld als tool voor agents, hebben we van veel ontwikkelaars gehoord dat ze de richtlijnen op zichzelf ook heel nuttig vinden als leermiddel.
Zelfs in dit tijdperk van agentic coding is het nog steeds waardevol om domeinexpertise op te bouwen. Modern Web Guidance kan je daarbij helpen: door de handleidingen zelf te lezen of door de CLI te gebruiken om use cases te zoeken en nieuwe technieken te ontdekken die relevant kunnen zijn voor je project.
Modern Web Guidance koppelen aan Chrome DevTools voor agents
Bij agentische webontwikkeling is het schrijven van code slechts één onderdeel van de workflow. Je moet die code ook uitvoeren om te zorgen dat deze werkt zoals verwacht. Daarom raden we ontwikkelaars aan om Modern Web Guidance te gebruiken in combinatie met Chrome DevTools voor agents.
- Modern Web Guidance geeft je agent de expertise die nodig is om code te schrijven volgens moderne best practices.
- Chrome DevTools voor agents geeft je agent runtime-zichtbaarheid, zodat deze de code kan verifiëren, debuggen en optimaliseren voor een breed scala aan apparaatmogelijkheden, gebruikersvoorkeuren en netwerkomstandigheden.
Samen helpen deze uw agent om in minder beurten tot een betere oplossing te komen. Hier volgen een paar voorbeelden van hoe je deze tools samen kunt gebruiken om de effectiviteit te maximaliseren:
Optimaliseer totdat u uw prestatiedoel heeft bereikt
Modern Web Guidance kan je agent leren hoe die langlopende JavaScript-taken die de hoofdthread blokkeren, effectief kan opsplitsen, maar kan je code niet testen om te zien hoelang die JavaScript-taken de hoofdthread daadwerkelijk blokkeren.
Met Chrome DevTools voor agents kun je een prestatiespoor uitvoeren op een gesimuleerde low-end CPU om te zien of je een probleem hebt. Gebruik daarna het prestatieadvies van Modern Web Guidance om te herhalen totdat je code de hoofdthread nooit langer dan 50 milliseconden blokkeert (zodat deze niet bijdraagt aan een slechte INP).
Je animaties testen en verfijnen
Modern Web Guidance kan je agent tonen hoe je functies zoals modale dialoogvensters, tooltips en popover-menu's op de juiste manier en met goede prestaties animeert. Zelfs met deze begeleiding moet je nog steeds verifiëren of de animaties echt werken en er goed uitzien als ze worden gebruikt in de context van je hele app.
Chrome DevTools voor agents kan je code uitvoeren, interactie hebben met de pagina en een schermopname maken van de animatie in actie. Daarna kan het de opname bestuderen om te zorgen dat de animatie wordt uitgevoerd en dat deze past bij de stijl en sfeer van de rest van de site.
Je kunt ook Chrome DevTools voor agents gebruiken om te verifiëren dat de component de voorkeuren van de gebruiker respecteert als prefers-reduced-motion is ingesteld.
Weergaven in het cachegeheugen opslaan zonder geheugenlekken
Modern Web Guidance kan je agent leren hoe je SPA-overgangen onmiddellijk laat aanvoelen door weergaven in het geheugen te renderen en te cachen, terwijl ze ook op de juiste manier worden verborgen voor de toegankelijkheidsstructuur.
Als je dit doet, is het belangrijk dat je ongebruikte weergaven op de juiste manier opschoont, zodat er geen geheugenlekken ontstaan als de gebruiker lang op de pagina blijft. Chrome DevTools voor agents heeft tools voor foutopsporing in het geheugen, zodat je agent kan zorgen dat het geheugengebruik niet onbeperkt toeneemt.
Bekijk deze video voor meer informatie over hoe je Modern Web Guidance en Chrome DevTools voor agents samen gebruikt:
Succesverhalen
Engineeringteams over de hele wereld gebruiken Modern Web Guidance en Chrome DevTools voor agents al om de codekwaliteit te verbeteren, de levering te versnellen en knelpunten bij handmatige foutopsporing te elimineren:
Pensionbazaar en Policybazaar
Pensionbazaar, een nieuw platform voor pensioenplanning dat is gelanceerd door het Indiase fintechbedrijf Paisabazaar, combineerde Modern Web Guidance met Chrome DevTools voor agents om nieuwe pagina's te maken en te verifiëren. Hierdoor werd de doorlooptijd met meer dan 90% verkort (van ongeveer 4 dagen naar een paar uur) en werden UI-bugs op nieuwe schermen met meer dan 90% verminderd. Het zusterplatform Policybazaar, een van de toonaangevende verzekeringsplatforms van India met meer dan 97 miljoen geregistreerde klanten, gebruikte Chrome DevTools voor agents om prestatiecontroles te automatiseren voor ongeveer 30 landingspagina's met veel verkeer. Hierdoor werd de handmatige controle-inspanning met 92% verminderd:
"Voor Pensionbazaar was het onze prioriteit om vanaf dag één kwaliteitscode te bouwen om later technische schuld te voorkomen. Modern Web Guidance stuurde onze programmeeragent aan om moderne webstandaarden en best practices voor prestaties te gebruiken, terwijl onze specifieke doelen voor browsercompatibiliteit werden gerespecteerd. Hierdoor werden onze frontend-code-reviews aanzienlijk makkelijker en sneller, waardoor we uiteindelijk sneller konden ontwikkelen."
—Aman Soni, Engineering Manager, Policybazaar
WeTV
WeTV, het internationale videostreamingplatform van Tencent, heeft een AI-programmeermedewerker toegevoegd aan de CI/CD-pipeline. Deze gebruikt Chrome DevTools voor agents om prestatieverslechteringen te diagnosticeren en Modern Web Guidance om deze op te lossen met moderne webplatformfuncties. De agent voert nu automatisch een diagnose uit en lost 90% van de mislukte prestatiecontroles op. Hierdoor is de tijd voor foutopsporing en oplossing met 87% verkort (van 4 uur naar 30 minuten, inclusief handmatige evaluatie):
"De resultaten zijn zeer effectief, zowel qua snelheid als kwaliteit. De diagnostische inzichten van Chrome DevTools voor agents en Modern Web Guidance gaven ons betrouwbare referenties om complexe lay-outproblemen op te lossen. We voeren na elke oplossing een strenge verificatie uit. Het huidige succespercentage en de stabiliteit hebben ons vertrouwen in de release aanzienlijk verbeterd."
—Yangjie Zheng, Head of Engineering, WeTV (Tencent)
note inc.
note inc., een van de grootste creator- en mediaplatforms van Japan met meer dan 90 miljoen maandelijks actieve gebruikers, gebruikte Modern Web Guidance naast het interne ontwerpsysteem als onderdeel van een doorlopende inspanning om de Next.js-frontend te moderniseren. Tijdens een evaluatie van 180 runs op de productiecodebase verhoogde Modern Web Guidance de slagingspercentages voor moderne webcontroles van 61% naar 94% door agents te sturen om native HTML- en CSS-functies te gebruiken in plaats van aangepaste JavaScript voor scrollanimaties, tooltips en accordions. Ook werd de juiste prioriteit van LCP-afbeeldingen met 28% verhoogd voor 431 samengevoegde pull-verzoeken:
'Onze missie bij note is 'Start, and Keep on Creating', dus ons platform moet snel en toegankelijk blijven voor elke creator en lezer. Omdat steeds meer van onze code wordt geschreven met AI-coderingagents, helpt Modern Web Guidance hen om moderne, op standaarden gebaseerde oplossingen te vinden in plaats van terug te vallen op oudere JavaScript-patronen. De tool wijst ook op details die je makkelijk over het hoofd ziet, zoals de prioriteit voor het laden van afbeeldingen en de toegankelijkheid van formulieren. In combinatie met ons ontwerpsysteem kunnen we de notitiefunctie blijven verbeteren terwijl onze UI consistent blijft."
—Takehiko Itabashi, VP of Technology, note inc.
MetaMask
MetaMask, een financieel platform met zelfbeheer met meer dan 100 miljoen downloads in ongeveer 190 landen, voert Modern Web Guidance uit als een geautomatiseerde beoordelingsbot voor elk pull-verzoek naar de open source browserextensie, geconfigureerd met een prompt van maar 3 regels. In de eerste 5 weken heeft de bot ongeveer 480 pull-verzoeken beoordeeld en op 64 daarvan gereageerd. Dit heeft ertoe geleid dat engineers 43 bevindingen hebben opgelost (voornamelijk problemen met toegankelijkheid, HTML-semantiek en formulieren die linters niet opmerken) met een mediantijd van 15 minuten van reactie tot oplossing:
'De reviews zijn heel nuttig. Ze hebben onze engineers geholpen om moderne API's zoals Interest Invokers en de Popover API te ontdekken en ermee vertrouwd te raken. De beoordelingstijd voor PR is niet toegenomen, maar waarschijnlijk juist afgenomen. De problemen die MWG heeft gevonden, hadden anders een menselijke reviewer vereist die bekend is met deze moderne webtechnieken."
—Francis Nepomuceno, UX-technicus, MetaMask
Ondersteuning voor het ecosysteem en de community
Modern Web Guidance begon als een initiatief binnen Chrome, maar het bereiken van deze 1.0-mijlpaal was een gezamenlijke inspanning van talloze experts uit de webcommunity.
We willen de technische leads van de contentgebieden bedanken die toezicht houden op elk webplatformgebied, onze browserpartners bij Firefox en Edge, de onafhankelijke experts op het gebied van webstandaarden en toegankelijkheid die handleidingen hebben geschreven en getest, en alle open source-bijdragers op GitHub die hebben geholpen deze release vorm te geven.
Als je een gat ontdekt in wat programmeeragents weten over het web of als je een bestaande gids wilt verbeteren, ga je naar de bijdragegids om mee te doen.
Aan de slag met Modern Web Guidance
Als je Modern Web Guidance aan je project wilt toevoegen, voer je het CLI-installatieprogramma uit vanuit je projectdirectory:
npx modern-web-guidance@latest install
Als je al een eerdere versie hebt geïnstalleerd, kun je updaten naar 1.0 door het volgende uit te voeren:
npx modern-web-guidance@latest update
Naast de CLI kun je Modern Web Guidance rechtstreeks installeren en updaten via de populairste marktplaatsen voor plug-ins voor programmeer-agents, waaronder Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code en Grok Build.
Check deze bronnen voor meer informatie: