Wat is er nieuw in DevTools (Chrome 98)

Jecelyn Yeen

Voorbeeldfunctie: Toegankelijkheidsboom voor de volledige pagina

De nieuwe toegankelijkheidsstructuur voor volledige pagina's maakt het gemakkelijker om een ​​overzicht te krijgen van de toegankelijkheidsstructuur van een volledige pagina en helpt u beter te begrijpen hoe uw webinhoud wordt weergegeven aan ondersteunende technologieën.

Open in het deelvenster Elementen het deelvenster Toegankelijkheid en schakel het selectievakje 'Toegankelijkheidsstructuur voor de volledige pagina inschakelen' in. Vernieuw vervolgens DevTools en u ziet een nieuwe toegankelijkheidsknop in het deelvenster Elementen .

Je kunt erop klikken om over te schakelen naar de toegankelijkheidsboomweergave op volledige pagina . Je kunt knooppunten uitvouwen of erop klikken om details te bekijken in het deelvenster Toegankelijkheid .

Selecteer een knooppunt en schakel terug naar de DOM-boomstructuur. Het bijbehorende DOM-knooppunt is nu geselecteerd. Dit is een uitstekende manier om de relatie tussen het DOM-knooppunt en het bijbehorende knooppunt in de toegankelijkheidsboom te begrijpen. Dit werkt ook voor de DOM-boomstructuur ⬌ Toegankelijkheidsboomstructuur!

Voorheen was de toegankelijkheidsboom beschikbaar in het deelvenster Toegankelijkheid . De weergave is beperkt; je kunt er slechts één knooppunt en de bijbehorende voorouders mee bekijken.

Ons team werkt nog steeds actief aan deze preview-functie. We horen graag uw feedback voor verdere verbeteringen!

Chromium-probleem: 887173

Nauwkeurigere wijzigingen vindt u in het tabblad Wijzigingen.

De codewijzigingen in het tabblad Wijzigingen worden automatisch mooi opgemaakt.

Voorheen was het lastig om de daadwerkelijke wijzigingen in geminificeerde broncode te achterhalen, omdat alle code op één regel werd weergegeven.

Chromium-problemen: 1238818 , 1268754 , 1086491

Stel een langere time-out in voor het vastleggen van gebruikersstromen.

Je kunt nu de time- outinstellingen in de recorder aanpassen voor alle stappen of voor een specifieke stap. Dit is vooral handig voor pagina's met trage netwerkverbindingen en lange animaties.

Ik heb bijvoorbeeld een gebruikersflow opgenomen op deze demopagina om een ​​menu-item te laden en erop te klikken. Het laden van de menu-items is echter traag (het duurt 6 seconden). Het afspelen van deze gebruikersflow mislukte omdat de time-out van 5 seconden (de standaardwaarde) werd overschreden.

We kunnen dit oplossen met de nieuwe time- outinstellingen. Vouw de stap uit waarop we in het menu klikken. Bewerk de stap door 'Time-out toevoegen' te selecteren en stel deze in op 6000 milliseconden (gelijk aan 6 seconden).

Je kunt desgewenst de time-out in de herhalingsinstellingen voor alle stappen aanpassen. Vouw de herhalingsinstellingen uit en bewerk de time- outwaarde.

Chromium-probleem: 1257499

Zorg ervoor dat uw pagina's in de cache kunnen worden opgeslagen met behulp van het tabblad 'Terug/Vooruit' in de cache.

Back/forward cache (of bfcache) is een browseroptimalisatie die directe navigatie terug en vooruit mogelijk maakt.

Met het nieuwe tabblad 'Terug/Vooruit cache' kunt u uw pagina's testen om er zeker van te zijn dat ze geoptimaliseerd zijn voor bfcache, en eventuele problemen opsporen die ervoor kunnen zorgen dat ze niet in aanmerking komen.

Om een ​​specifieke pagina te testen, ga je in Chrome naar die pagina en vervolgens in de ontwikkelaarstools naar Toepassing > Back-forward Cache . Klik daarna op de knop Test back/forward cache . De ontwikkelaarstools proberen dan weg te navigeren en terug te keren naar die pagina om te bepalen of de pagina vanuit de bfcache kan worden hersteld.

Als webontwikkelaars is het cruciaal om te weten hoe je je pagina's optimaliseert voor bfcache in alle browsers, omdat dit de browse-ervaring voor gebruikers aanzienlijk verbetert, met name voor gebruikers met tragere netwerken of apparaten.

Chromium-probleem: 1110752

Nieuw filter voor het deelvenster Eigenschappen

Als u zich in het deelvenster Eigenschappen op een specifieke eigenschap wilt concentreren, kunt u nu de naam of waarde van die eigenschap in het nieuwe filtertekstvak typen.

Eigenschappen waarvan de waarde null of undefined is, worden standaard niet weergegeven. Schakel het selectievakje 'Alles weergeven ' in om alle eigenschappen te bekijken.

Dankzij deze verbeteringen kunt u sneller bij de eigenschappen komen die voor u van belang zijn en zo uw productiviteit verhogen!

Chromium-probleem: 1269674

Emuleer de CSS-mediafunctie `forced-colors`.

De CSS-mediafunctie ' forced-colors' wordt gebruikt om te detecteren of de user agent een modus voor geforceerde kleuren heeft ingeschakeld (bijvoorbeeld de modus 'Hoog contrast' van Windows), waarbij een door de gebruiker gekozen, beperkt kleurenpalet op de pagina wordt afgedwongen.

Open het opdrachtmenu , voer de opdracht 'Show Rendering' uit en stel vervolgens de vervolgkeuzelijst ' Emulate CSS media feature forced-colors' in.

Chromium-probleem: 1130859

Toon linialen bij hover-commando

Je kunt nu het opdrachtmenu openen en de opdracht ' Linialen weergeven bij hover ' uitvoeren. De paginalinialen maken het gemakkelijker om de breedte en hoogte van een element te meten.

Voorheen kon je de paginalinialen alleen inschakelen via Instellingen > selectievakje Linialen weergeven .

Chromium-probleem: 1270562

Ondersteuning voor row-reverse en column-reverse in de Flexbox-editor

De Flexbox-editor heeft twee nieuwe knoppen toegevoegd ter ondersteuning van het omkeren row-reverse en column-reverse in flex-direction .

Chromium-probleem: 1263866

Nieuwe sneltoetsen om XHR opnieuw af te spelen en alle zoekresultaten uit te vouwen.

Toetsenbord sneltoetsen om XHR af te spelen in het netwerkpaneel

Selecteer een XHR-verzoek in het netwerkpaneel en druk op R op het toetsbord om de XHR af te spelen. Voorheen kon je een XHR alleen opnieuw afspelen via het contextmenu (rechtermuisklik > XHR opnieuw afspelen ).

Chromium-probleem: 1050021

Sneltoets om alle zoekresultaten uit te vouwen

Er is een nieuwe sneltoets toegevoegd aan het tabblad Zoeken waarmee u alle zoekresultaten kunt uit- en inklappen. Voorheen kon u de zoekresultaten alleen uit- en inklappen door op één bestand tegelijk te klikken.

Open het zoektabblad via Esc > menu met 3 puntjes > Zoeken . Voer een zoekterm in (bijvoorbeeld 'functie') en druk op Enter om de lijst met zoekresultaten te bekijken. Selecteer de zoekresultaten en gebruik de volgende sneltoets om de zoekresultaten uit te vouwen/in te klappen:

• Windows / Linux - Ctrl + Shift + { of }
• MacOS - Cmd + Options + { of }

Raadpleeg de sneltoetsen voor een overzicht van de beschikbare sneltoetsen in Chrome DevTools.

Chromium-probleem: 1255073

Vuurtoren 9 in het Vuurtorenpaneel

Het Lighthouse- paneel draait nu op Lighthouse 9. Lighthouse zal nu alle elementen met dezelfde ID weergeven.

Niet-unieke element-ID's vormen een veelvoorkomend toegankelijkheidsprobleem. Zo wordt de ID waarnaar in een aria-labelledby attribuut wordt verwezen, bijvoorbeeld gebruikt voor meerdere elementen .

Bekijk het overzicht ' Wat is nieuw in Lighthouse 9.0' voor meer informatie over de updates.

​

Chromium-probleem: 772558

Verbeterd bronnenpaneel

Er zijn talloze stabiliteitsverbeteringen doorgevoerd in het bronnenpaneel sinds we het hebben geüpgraded naar CodeMirror 6. Hieronder enkele opvallende verbeteringen:

• Aanzienlijk sneller bij het openen van grote bestanden (bijv. WASM, JavaScript).
• Geen willekeurig scrollen meer tijdens het doorlopen van code.
• Verbeterde suggesties voor automatisch aanvullen bij bewerkbare bronnen (bijv. codefragmenten, lokale overschrijvingen).

Chromium-probleem: 1241848

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

• Het watervaldiagram van netwerkverzoeken correct weergeven. Voorheen was de stijl onjuist. ( 1275501 )
• De codemarkering werkte niet correct bij het zoeken in documenten met zeer lange regels in het paneel Bronnen . Dit is nu verholpen. ( 1275496 )
• Geen dubbele Payload- tabbladen meer in netwerkverzoeken. ( 1273972 )
• De ontbrekende details over de lay-outverschuivingen in het gedeelte 'Samenvatting ' van het paneel 'Prestaties ' zijn gecorrigeerd. ( 1259606 )
• Ondersteuning voor willekeurige tekens (bijv. , , . ) in netwerkzoekopdrachten . ( 1267196 )

[Experimenteel] Eindpunten in het paneel Rapportage-API

Het experimentele paneel voor de rapportage-API werd geïntroduceerd in Chrome 96 om u te helpen de rapporten die op uw pagina worden gegenereerd en hun status te controleren.

De sectie 'Eindpunten' is nu beschikbaar. Deze geeft u een overzicht van alle eindpunten die zijn geconfigureerd in de kop Reporting-Endpoints .

Leer hoe u de Reporting API kunt gebruiken om beveiligingsschendingen, verouderde API-aanroepen en meer te monitoren.

Chromium-probleem: 1200732

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .