Wat de nieuwste Edge-functies betekenen voor webontwikkelaars

De nieuwste webontwikkelfuncties van Microsoft Edge richten zich op meten, debuggen en nieuwe manieren om met websites te werken. Voor ontwikkelaars is vooral de beschikbaarheid van belang: sommige mogelijkheden staan in Edge-releasenotities of DevTools-documentatie, andere zijn bedoeld om mee te experimenteren. Het geplande native menu-element is voorlopig geen functie om op te bouwen voor productie. 16333940

Problemen met overgangen in singlepage-apps opsporen

Bij een singlepage-app (SPA) kan iemand naar een andere weergave gaan zonder dat de browser een volledig nieuw document laadt. Gewone paginalaadmetingen vertellen daarom niet altijd hoe vlot zo’n overgang aanvoelt.

De Performance API in Edge bevat twee nieuwe soorten vermeldingen. soft-navigation registreert wijzigingen in de geschiedenis binnen hetzelfde document die door een interactie zijn gestart. interaction-contentful-paint registreert wanneer na een gebruikersinteractie nieuwe inhoud wordt getoond in het aangepaste deel van de pagina. Zo kunnen ontwikkelaars beter onderzoeken wanneer een overgang plaatsvond en wanneer de bijbehorende inhoud zichtbaar werd. Het zijn meetgegevens om problemen op te sporen, geen automatische oplossing voor traagheid. 40

Edge beschrijft daarnaast heuristieken voor soft navigations waarmee prestaties van singlepage-apps kunnen worden gemeten. 39

Meer context bij JavaScript-profilering

JavaScript Self-Profiling-markeringen geven context over browserwerk tussen JavaScript-metingen, zoals stijlen berekenen, de pagina-indeling bepalen, schilderen en garbage collection. Dat kan helpen om onderscheid te maken tussen tijd die je eigen code kost en tijd die de browser aan ander werk besteedt. Controleer de actuele Edge-documentatie en beschikbaarheid voordat je deze functie in een productieproces opneemt. 1

Netwerkverzoeken opnieuw versturen of aanpassen

Met Resend in de Network-tool van DevTools verstuur je een eerder vastgelegd verzoek opnieuw, zonder de pagina te herladen. Dat is handig om te controleren hoe een verzoek zich gedraagt wanneer je het herhaalt. 18

Met Edit and resend as Fetch kun je een vastgelegd verzoek aanpassen en als fetch()-aanroep in de Console uitvoeren. Dat maakt het makkelijker om bijvoorbeeld gewijzigde verzoekgegevens te testen. Het zijn hulpmiddelen voor debugging: ze maken de netwerkverbinding zelf niet sneller. 118

Websites voorbereiden op browse-agenten met WebMCP

WebMCP is een nieuwe manier waarop een website gestructureerde acties beschikbaar kan maken voor een browse-agent. In plaats van alleen de pagina visueel te interpreteren, kan een agent dan werken met acties of hulpmiddelen die de site expliciet aanbiedt. Microsoft presenteert WebMCP als een vroege functie om uit te proberen. Ga er dus niet van uit dat deze mogelijkheid al voor alle bezoekers beschikbaar is. 1

Tekstselecties in invoervelden gebruiken met OpaqueRange

OpaqueRange vertegenwoordigt een live tekstbereik in een tekstveld, zoals een <input> of <textarea>. Daarmee kunnen ontwikkelaars interacties rond een specifiek stuk tekst bouwen, bijvoorbeeld om een interface-element te positioneren of tekst te markeren. De API geeft alleen offsets in de veldwaarde bloot en houdt de interne tekststructuur van het besturingselement afgeschermd. Microsoft vermeldt OpaqueRange bij de webplatformupdates van Edge 152. 133

Web Install API: beschikbaar via een testprogramma

Met de Web Install API kan een website via de asynchrone functie navigator.install() de installatie van een andere webapp aanvragen. De browser gebruikt daarbij zijn eigen installatie-ervaring. Microsoft heeft de API beschikbaar gesteld om te testen via een Edge-origin trial. Zo’n origin trial is een testmogelijkheid, geen garantie dat de functie overal of voor alle gebruikers beschikbaar is. 6

Een native menu-element staat nog op de planning

Microsoft heeft ook een native <menu>-element in het vooruitzicht gesteld, bedoeld om ingebouwd menu-gedrag mogelijk te maken. Omdat het om een geplande functie gaat, moeten ontwikkelaars die nog niet als algemeen beschikbaar beschouwen of er productiegedrag op baseren. 1

Wat kun je nu uitproberen?

Voor netwerkdebugging documenteert Edge het opnieuw versturen van verzoeken in DevTools. OpaqueRange staat in de releasenotities van Edge 152 en de Web Install API heeft een aangekondigd origin-trialprogramma. Controleer voor soft-navigationmetingen, WebMCP en JavaScript Self-Profiling-markeringen eerst welke versie en testinstellingen nodig zijn. Het native menu-element is voorlopig alleen een plan. 1618333940