Chrome DevTools MCP: «Lekende lett!»

Chrome DevTools MCP gir helt nye AI-muligheter, mens emojier skaper tilgjengelighets-trøbbel, i ukas ForrigeUke.

Petter Sæther Moen utvikler, Bekk

Publisert 01.10.2025 - 13:06

<forrigeUke />

ForrigeUke er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uka som var. Innleggene skrives av frontend-faggruppene til Bekk, og kan også følges på bekk.no/fag.

Dette var uka for farlige eksperimenter 🚀🙀, gode sikkerhetstips 🔐 – og 922 ting skjedde i frontend-verdenen.

Chrome gir AI øyne i nettleseren 👀

Tirsdag forrige uke kom Chrome ut med en preview på DevTools MCP.

Kort forklart er en MCP en felles protokoll for hvordan AI-applikasjoner/agenter kan snakke med tjenester.

Chromes DevTools MCP er da altså en integrasjon AI kan bruke for å interagere med nettleseren din!

Gi Claude Code prompten 'Can you do a performance analysis on https://bekk.no. Give me suggestions on what the most impactful changes I can make are.' - og plutselig starter Claude en hel Chrome-instans via MCP, analyserer og finner ting vi kan forbedre! — Gi Claude Code prompten "Can you do a performance analysis on https://bekk.no. Give me suggestions on what the most impactful changes I can make are." - og plutselig starter Claude en hel Chrome-instans via MCP, analyserer og finner ting vi kan forbedre!

Er du som meg og lager webapplikasjoner betyr dette i praksis at du nå kan be din favoritt kodeagenten om å verifisere endringer den gjør i kodebasen din direkte i brukergrensesnittet, debugge ytelses- eller nettverksproblemer, simulere brukerinteraksjon, og mye, mye mer!

Ønsker du at Claude Code skal lage et skjema i applikasjonen din, kan Claude nå også fylle ut og sende inn skjemaet for å verifisere at alt fungerer som forventet. 🔥

På GitHuben til Chrome DevTools MCP finnes instruksjoner for å komme i gang, og det var lekende lett! Teamet bak har publisert MCP-serveren som en NPM-pakke. I Claude Code var det for eksempel så enkelt som å kjøre:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Og, voilà, så er du i gang!

Hvis du syntes dette hørtes kult ut, og vil lære litt mer, sjekk ut Addy Osmanis artikkel om hvordan de lagde MCP-en!

Se hvor enkelt du nå kan få Yr-data inn i språkmodeller

– Kan bli avgjørende for å løse en av de største utfordringene til AI akkurat nå: Å gjøre språkmodeller nyttige i praksis, skriver Axel Tveiten Bech, og viser hvordan.

🚩 Nord-øst pil. Trekantet flagg på stolpe.

Visste du at CSS ikke bare kan brukes til å style-e nettsider, men også legge til innhold?

Et vanlig eksempel på dette er å legge til en "↗" (nord-øst pil som den ofte refereres til) på lenker som lenker til eksterne kilder:


a.external::after {
    content: " \2197" ; /* ↗ = North East Arrow */
}

Men, har du noen gang tenkt over hvordan det blir for skjermleser-brukere?

Lager jeg en lenke med denne stilen til "Mitt kule nettsted", så vil en skjermleser lese opp dette som "Mitt kule nettsted nord-øst pil". Ganske forvirrende, ikke sant?

Et annet morsomt eksempel er at emojien "🚩" (rødt flagg) ofte leses opp som "trekantet flagg på stolpe". Ikke akkurat dekkende for måten emojien vanligvis brukes på, å illustrere at noe eller noen har problematiske trekk, eller et så kalt "red flag".

Det finnes mange feller å gå i når det kommer til bruk av unicode-bokstaver, som emojis er. Hvordan kan vi gi skjermleserbrukere den samme konteksten som seende-brukere?

Det har heldigvis Sara Soueidan svaret på! Hun har nemlig skrevet litt om hvordan du kan gi alternativ-tekst til CSS-generert innhold, som eksempelet med nord-øst pilen over.

Ikke nok med det, her går Sara godt ned i dybden for å forklare hvordan skjermlesere tolker slikt innhold. Visste du for eksempel at before og after content i CSS legges på før og etter innholdet, uten mellomrom. Ikke helt tilfeldig at eksempelet over hadde mellomrom før nord-øst pilen, akkurat.

Bruker du CSS-generert innhold bør du definitivt lese denne artikkelen!