Wat is er nieuw in DevTools (Chrome 98)

Jecelyn Yeen

Preview-functie: toegankelijkheidsstructuur van volledige pagina

Met de nieuwe toegankelijkheidsstructuur voor de volledige pagina kunt u eenvoudiger een overzicht krijgen van de toegankelijkheidsstructuur voor de volledige pagina en krijgt u een beter inzicht in de manier waarop uw webinhoud wordt blootgesteld aan ondersteunende technologie.

Open in het paneel Elementen het deelvenster Toegankelijkheid en schakel het selectievakje Toegankelijkheidsstructuur op volledige pagina inschakelen in . Laad vervolgens DevTools opnieuw en u ziet een nieuwe toegankelijkheidsknop in het Elementenpaneel .

U kunt erop klikken om naar de toegankelijkheidsstructuurweergave van de volledige pagina te gaan. U kunt knooppunten uitvouwen of klikken om details te bekijken in het deelvenster Toegankelijkheid .

Selecteer een knooppunt en schakel terug naar de DOM-structuurweergave. Het corresponderende DOM-knooppunt is nu geselecteerd. Dit is een goede manier om de mapping tussen het DOM-knooppunt en het toegankelijkheidsboomknooppunt te begrijpen. Dit werkt ook voor de DOM-boom ⬌ Toegankelijkheidsboomweergave!

Voorheen was de toegankelijkheidsstructuur beschikbaar in het deelvenster Toegankelijkheid . De weergave is beperkt; u kunt er alleen één knooppunt en zijn voorouders mee verkennen.

Ons team werkt nog steeds actief aan deze preview-functie. We zijn op zoek naar uw feedback voor verdere verbeteringen!

Toegankelijkheidsboom op volledige pagina

Chroomuitgave: 887173

Preciezere wijzigingen op het tabblad Wijzigingen

De codewijzigingen op het tabblad Wijzigingen worden automatisch mooi afgedrukt.

Voorheen was het moeilijk om de daadwerkelijke wijzigingen van de verkleinde broncode te traceren, omdat alle code op één regel werd weergegeven.

Tabblad Wijzigingen

Chroomuitgaves: 1238818 , 1268754 , 1086491

Stel een langere time-out in voor het opnemen van gebruikersstromen

U 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 langzame netwerkverzoeken en lange animaties.

Ik heb bijvoorbeeld een gebruikersstroom op deze demopagina vastgelegd om het menu-item te laden en erop te klikken. Het laden van de menu-items gaat echter langzaam (het duurt 6 seconden). Het opnieuw afspelen van deze gebruikersstroom is mislukt omdat deze langer duurt dan 5 seconden (de standaardtime-out).

We kunnen de nieuwe Time-out -instellingen gebruiken om dit op te lossen. Vouw de stap uit waarmee we op het menu-item klikken. Bewerk de stap door Time-out toevoegen en stel deze in op 6000 milliseconden (gelijk aan 6s).

Optioneel kunt u de Time-out voor alle stappen aanpassen in de Replay-instellingen . Vouw de Replay-instellingen uit en bewerk de Time- outwaarde.

time-outinstellingen voor opname van gebruikersstromen

Chroomuitgave: 1257499

Zorg ervoor dat uw pagina's cachebaar zijn met het tabblad Terug/vooruit cache

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

Het nieuwe tabblad Back/Forward cache kan u helpen uw pagina's te testen om er zeker van te zijn dat ze zijn geoptimaliseerd voor bfcache, en eventuele problemen te identificeren waardoor ze mogelijk niet in aanmerking komen.

Om een ​​bepaalde pagina te testen, navigeert u ernaartoe in Chrome en gaat u vervolgens in DevTools naar Applicatie > Back-forward Cache . Klik vervolgens op de knop Cache terug/vooruit testen en DevTools zal proberen heen en weer te navigeren om te bepalen of de pagina kan worden hersteld vanuit bfcache.

Als webontwikkelaars is het van cruciaal belang om te weten hoe u uw pagina's kunt optimaliseren voor bfcache in alle browsers, omdat dit de browse-ervaring voor gebruikers aanzienlijk zal verbeteren, vooral voor gebruikers met langzamere netwerken of apparaten.

Tabblad Terug/vooruit cache

Chroomuitgave: 1110752

Nieuw filter in het deelvenster Eigenschappen

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

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

Dankzij deze verbeteringen kunt u sneller de eigendommen bereiken die u belangrijk vindt en zo uw productiviteit verbeteren!

Filter in het deelvenster Eigenschappen

Chroomuitgave: 1269674

Emuleer de CSS-mediafunctie voor geforceerde kleuren

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

Open het Commandomenu , voer de opdracht Rendering weergeven uit en stel vervolgens de vervolgkeuzelijst CSS-mediafunctie emuleren met geforceerde kleuren in.

CSS-mediafunctie met geforceerde kleuren

Chroomuitgave: 1130859

Toon linialen bij hover-commando

U kunt nu het Commandomenu openen en de opdracht Toon linialen bij zweven uitvoeren. Met de paginalinialen kunt u gemakkelijker de breedte en hoogte van een element meten.

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

Toon linialen bij hover-commando

Chroomuitgave: 1270562

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

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

Flexbox-editor

Chroomuitgave: 1263866

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

Sneltoetsen om XHR opnieuw af te spelen in het netwerkpaneel

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

XHR opnieuw afspelen

Chroomuitgave: 1050021

Sneltoets om alle zoekresultaten uit te vouwen

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

Open het tabblad Zoeken via Esc > menu met 3 stippen > Zoeken . Voer een zoekreeks in (bijvoorbeeld een functie) en druk op Enter om de lijst met zoekresultaten te bekijken. Concentreer u op de zoekresultaten en gebruik de volgende snelkoppeling om de zoekbestanden uit of samen te vouwen:

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

Ga naar de sneltoetsen voor referentie van sneltoetsen in Chrome DevTools.

Chroomuitgave: 1255073

Vuurtoren 9 in het Vuurtorenpaneel

In het Lighthouse -paneel wordt nu Lighthouse 9 uitgevoerd. Lighthouse toont nu alle elementen met dezelfde ID.

Niet-unieke element-ID is een veelvoorkomend toegankelijkheidsprobleem. De id waarnaar wordt verwezen in een attribuut aria-labelledby wordt bijvoorbeeld op meerdere elementen gebruikt.

Bekijk Wat is er nieuw in Lighthouse 9.0 voor meer informatie over de updates.

​ Een Lighthouse-audit voor 'Alle focusbare elementen moeten een unieke 'id' hebben, waarbij twee elementen worden weergegeven, beide met dezelfde 'id'

Chroomuitgave: 772558

Verbeterd bronnenpaneel

Tal van stabiliteitsverbeteringen in het Bronnenpaneel toen we het upgradeten om CodeMirror 6 te gebruiken. Hier zijn enkele opmerkelijke verbeteringen:

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

Chroomuitgave: 1241848

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

  • Het correct weergeven van het watervaldiagram van netwerkverzoeken. Vroeger was de stijl gebroken. ( 1275501 )
  • De codemarkering werd verbroken bij het zoeken in documenten met zeer lange regels in het paneel Bronnen . Het is nu opgelost. ( 1275496 )
  • Geen dubbele Payload- tabbladen meer in netwerkverzoeken. ( 1273972 )
  • De ontbrekende details van de lay-outverschuivingen in het gedeelte Samenvatting van het paneel Prestaties zijn opgelost. ( 1259606 )
  • Ondersteuning van willekeurige tekens (bijv , , . ) in netwerkzoekopdrachten . ( 1267196 )

[Experimenteel] Eindpunten in het deelvenster Reporting API

Het experimentele deelvenster Reporting API is geïntroduceerd in Chrome 96, zodat u de op uw pagina gegenereerde rapporten en hun status kunt controleren.

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

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

Deelvenster Rapportage-API

Chroomuitgave: 1200732

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .

,

Jecelyn Yeen

Preview-functie: toegankelijkheidsstructuur van volledige pagina

Met de nieuwe toegankelijkheidsstructuur voor de volledige pagina kunt u eenvoudiger een overzicht krijgen van de toegankelijkheidsstructuur voor de volledige pagina en krijgt u een beter inzicht in de manier waarop uw webinhoud wordt blootgesteld aan ondersteunende technologie.

Open in het paneel Elementen het deelvenster Toegankelijkheid en schakel het selectievakje Toegankelijkheidsstructuur op volledige pagina inschakelen in . Laad vervolgens DevTools opnieuw en u ziet een nieuwe toegankelijkheidsknop in het Elementenpaneel .

U kunt erop klikken om naar de toegankelijkheidsstructuurweergave van de volledige pagina te gaan. U kunt knooppunten uitvouwen of klikken om details te bekijken in het deelvenster Toegankelijkheid .

Selecteer een knooppunt en schakel terug naar de DOM-structuurweergave. Het corresponderende DOM-knooppunt is nu geselecteerd. Dit is een goede manier om de mapping tussen het DOM-knooppunt en het toegankelijkheidsboomknooppunt te begrijpen. Dit werkt ook voor de DOM-boom ⬌ Toegankelijkheidsboomweergave!

Voorheen was de toegankelijkheidsstructuur beschikbaar in het deelvenster Toegankelijkheid . De weergave is beperkt; u kunt er alleen één knooppunt en zijn voorouders mee verkennen.

Ons team werkt nog steeds actief aan deze preview-functie. We zijn op zoek naar uw feedback voor verdere verbeteringen!

Toegankelijkheidsboom op volledige pagina

Chroomuitgave: 887173

Preciezere wijzigingen op het tabblad Wijzigingen

De codewijzigingen op het tabblad Wijzigingen worden automatisch mooi afgedrukt.

Voorheen was het moeilijk om de daadwerkelijke wijzigingen van de verkleinde broncode te traceren, omdat alle code op één regel werd weergegeven.

Tabblad Wijzigingen

Chroomuitgaves: 1238818 , 1268754 , 1086491

Stel een langere time-out in voor het opnemen van gebruikersstromen

U 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 langzame netwerkverzoeken en lange animaties.

Ik heb bijvoorbeeld een gebruikersstroom op deze demopagina vastgelegd om het menu-item te laden en erop te klikken. Het laden van de menu-items gaat echter langzaam (het duurt 6 seconden). Het opnieuw afspelen van deze gebruikersstroom is mislukt omdat deze langer duurt dan 5 seconden (de standaardtime-out).

We kunnen de nieuwe Time-out -instellingen gebruiken om dit op te lossen. Vouw de stap uit waarmee we op het menu-item klikken. Bewerk de stap door Time-out toevoegen en stel deze in op 6000 milliseconden (gelijk aan 6s).

Optioneel kunt u de Time-out voor alle stappen aanpassen in de Replay-instellingen . Vouw de Replay-instellingen uit en bewerk de Time- outwaarde.

time-outinstellingen voor opname van gebruikersstromen

Chroomuitgave: 1257499

Zorg ervoor dat uw pagina's cachebaar zijn met het tabblad Terug/vooruit cache

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

Het nieuwe tabblad Terug/vooruit cache kan u helpen uw pagina's te testen om er zeker van te zijn dat ze zijn geoptimaliseerd voor bfcache, en eventuele problemen te identificeren waardoor ze mogelijk niet in aanmerking komen.

Om een ​​bepaalde pagina te testen, navigeert u ernaartoe in Chrome en gaat u vervolgens in DevTools naar Applicatie > Back-forward Cache . Klik vervolgens op de knop Cache terug/vooruit testen en DevTools zal proberen heen en weer te navigeren om te bepalen of de pagina kan worden hersteld vanuit bfcache.

Als webontwikkelaars is het van cruciaal belang om te weten hoe u uw pagina's kunt optimaliseren voor bfcache in alle browsers, omdat dit de browse-ervaring voor gebruikers aanzienlijk zal verbeteren, vooral voor gebruikers met langzamere netwerken of apparaten.

Tabblad Terug/vooruit cache

Chroomuitgave: 1110752

Nieuw filter in het deelvenster Eigenschappen

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

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

Dankzij deze verbeteringen kunt u sneller de eigendommen bereiken die u belangrijk vindt en zo uw productiviteit verbeteren!

Filter in het deelvenster Eigenschappen

Chroomuitgave: 1269674

Emuleer de CSS-mediafunctie voor geforceerde kleuren

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

Open het Commandomenu , voer de opdracht Rendering weergeven uit en stel vervolgens de vervolgkeuzelijst CSS-mediafunctie emuleren met geforceerde kleuren in.

CSS-mediafunctie met geforceerde kleuren

Chroomuitgave: 1130859

Toon linialen bij hover-commando

U kunt nu het Commandomenu openen en de opdracht Toon linialen bij zweven uitvoeren. Met de paginalinialen kunt u gemakkelijker de breedte en hoogte van een element meten.

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

Toon linialen bij hover-commando

Chroomuitgave: 1270562

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

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

Flexbox-editor

Chroomuitgave: 1263866

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

Sneltoetsen om XHR opnieuw af te spelen in het netwerkpaneel

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

XHR opnieuw afspelen

Chroomuitgave: 1050021

Sneltoets om alle zoekresultaten uit te vouwen

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

Open het tabblad Zoeken via Esc > menu met 3 stippen > Zoeken . Voer een zoekreeks in (bijvoorbeeld een functie) en druk op Enter om de lijst met zoekresultaten te bekijken. Concentreer u op de zoekresultaten en gebruik de volgende snelkoppeling om de zoekbestanden uit of samen te vouwen:

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

Ga naar de sneltoetsen voor referentie van sneltoetsen in Chrome DevTools.

Chroomuitgave: 1255073

Vuurtoren 9 in het Vuurtorenpaneel

In het Lighthouse -paneel wordt nu Lighthouse 9 uitgevoerd. Lighthouse toont nu alle elementen met dezelfde ID.

Niet-unieke element-ID is een veelvoorkomend toegankelijkheidsprobleem. De id waarnaar wordt verwezen in een attribuut aria-labelledby wordt bijvoorbeeld op meerdere elementen gebruikt.

Bekijk Wat is er nieuw in Lighthouse 9.0 voor meer informatie over de updates.

​ Een Lighthouse-audit voor 'Alle focusbare elementen moeten een unieke 'id' hebben, waarbij twee elementen worden weergegeven, beide met dezelfde 'id'

Chroomuitgave: 772558

Verbeterd bronnenpaneel

Tal van stabiliteitsverbeteringen in het Bronnenpaneel toen we het upgradeten om CodeMirror 6 te gebruiken. Hier zijn enkele opmerkelijke verbeteringen:

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

Chroomuitgave: 1241848

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

  • Het correct weergeven van het watervaldiagram van netwerkverzoeken. Vroeger was de stijl gebroken. ( 1275501 )
  • De codemarkering werd verbroken bij het zoeken in documenten met zeer lange regels in het paneel Bronnen . Het is nu opgelost. ( 1275496 )
  • Geen dubbele Payload- tabbladen meer in netwerkverzoeken. ( 1273972 )
  • De ontbrekende details van de lay-outverschuivingen in het gedeelte Samenvatting van het paneel Prestaties zijn opgelost. ( 1259606 )
  • Ondersteuning van willekeurige tekens (bijv , , . ) in netwerkzoekopdrachten . ( 1267196 )

[Experimenteel] Eindpunten in het deelvenster Reporting API

Het experimentele deelvenster Reporting API is geïntroduceerd in Chrome 96, zodat u de op uw pagina gegenereerde rapporten en hun status kunt controleren.

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

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

Deelvenster Rapportage-API

Chroomuitgave: 1200732

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .