Wat is er nieuw in DevTools (Chrome 98)

Jecelyn Yeen

Previewfunctie: Toegankelijkheidsboom op volledige pagina

Dankzij de nieuwe toegankelijkheidsboom op volledige pagina krijgt u eenvoudiger overzicht in de toegankelijkheidsboom op volledige pagina en krijgt u beter inzicht in hoe uw webinhoud wordt blootgesteld aan ondersteunende technologie.

Open in het deelvenster Elementen het deelvenster Toegankelijkheid en vink het selectievakje 'Toegankelijkheidsboom op volledige pagina inschakelen' aan. Laad DevTools vervolgens opnieuw en u ziet een nieuwe toegankelijkheidsknop in het deelvenster Elementen .

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

Selecteer een knooppunt en schakel terug naar de DOM-boomweergave. Het bijbehorende DOM-knooppunt is nu geselecteerd. Dit is een geweldige manier om de koppeling tussen het DOM-knooppunt en het bijbehorende knooppunt in de toegankelijkheidsboom te begrijpen. Dit werkt ook voor de DOM-boom ⬌ Toegankelijkheidsboomweergave!

Voorheen was de toegankelijkheidsboom beschikbaar in het deelvenster Toegankelijkheid . De weergave is beperkt: u kunt slechts één knooppunt en de bijbehorende voorouders bekijken.

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

Chromium-probleem: 887173

Nauwkeurigere wijzigingen in het tabblad Wijzigingen

De codewijzigingen op het tabblad Wijzigingen worden automatisch mooi afgedrukt.

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

Chromium-problemen: 1238818 , 1268754 , 1086491

Stel een langere time-out in voor het opnemen van de gebruikersstroom

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

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

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

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

Chromium-probleem: 1257499

Zorg ervoor dat uw pagina's cachebaar zijn met het tabblad Back/forward cache

Back/forward cache (of bfcache) is een browseroptimalisatie waarmee u direct vooruit en terug kunt navigeren.

Met het nieuwe tabblad Back/forward cache kunt u uw pagina's testen om er zeker van te zijn dat ze zijn geoptimaliseerd voor bfcache. Ook kunt u eventuele problemen identificeren die ervoor zorgen dat ze niet in aanmerking komen.

Om een ​​specifieke pagina te testen, navigeert u ernaartoe in Chrome en gaat u vervolgens in DevTools naar Toepassing > Back-forward Cache . Klik vervolgens op de knop Back-forward cache testen . DevTools zal dan proberen weg te navigeren en terug te keren om te bepalen of de pagina hersteld kan worden vanuit bfcache.

Als webontwikkelaar is het van groot belang om te weten hoe u uw pagina's kunt optimaliseren voor bfcache in alle browsers. Dit zal namelijk de browse-ervaring voor gebruikers aanzienlijk verbeteren, met name voor gebruikers met tragere netwerken of apparaten.

Chromium-probleem: 1110752

Nieuw filter voor het deelvenster Eigenschappen

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

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

Dankzij deze verbeteringen kunt u sneller bij de panden komen die voor u van belang zijn, waardoor uw productiviteit toeneemt!

Chromium-probleem: 1269674

De CSS-functie voor gedwongen kleurenmedia emuleren

Met de CSS-mediafunctie voor gedwongen kleuren kunt u detecteren of de gebruikersagent een modus voor gedwongen kleuren heeft ingeschakeld (bijvoorbeeld de Windows-modus Hoog contrast), waarbij een door de gebruiker gekozen, beperkt kleurenpalet op de pagina wordt afgedwongen.

Open het Opdrachtmenu , voer de opdracht Rendering weergeven uit en stel vervolgens de vervolgkeuzelijst CSS-mediafunctie emuleren in op gedwongen kleuren .

Chromium-probleem: 1130859

Linialen weergeven bij zwevende opdracht

U kunt nu het menu Opdracht openen en de opdracht Linialen weergeven bij zweven uitvoeren. De paginalinialen maken het gemakkelijker om de breedte en hoogte van een element te meten.

Voorheen kon u de paginalinialen alleen inschakelen via het selectievakje Instellingen > 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 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

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 (rechtermuisknop > XHR opnieuw afspelen ).

Chromium-probleem: 1050021

Sneltoets om alle zoekresultaten uit te vouwen

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

Open het tabblad Zoeken via Esc > menu met drie puntjes > Zoeken . Voer een zoekterm in (bijvoorbeeld een functie) en druk op Enter om de lijst met zoekresultaten te bekijken. Focus op de zoekresultaten en gebruik de volgende sneltoets om de zoekbestanden uit of in te klappen:

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

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

Chromium-probleem: 1255073

Vuurtoren 9 in het Vuurtorenpaneel

Het Lighthouse- paneel draait nu op Lighthouse 9. Lighthouse geeft nu alle elementen weer die dezelfde id delen.

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

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

​

Chromium-probleem: 772558

Verbeterd bronnenpaneel

Talrijke stabiliteitsverbeteringen in het Bronnenpaneel na de upgrade naar CodeMirror 6. Hier zijn enkele opvallende 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 van bewerkbare bronnen (bijv. fragmenten, lokale overschrijvingen)

Chromium-probleem: 1241848

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

• Correcte weergave van het watervaldiagram van netwerkverzoeken. Voorheen was de stijl kapot. ( 1275501 )
• De codemarkering was defect bij het zoeken in documenten met zeer lange regels in het Bronnenpaneel . Dit is nu verholpen. ( 1275496 )
• Geen dubbele Payload- tab meer in netwerkaanvragen. ( 1273972 )
• De ontbrekende details over de lay-outverschuivingen in het gedeelte Samenvatting van het paneel Prestaties zijn hersteld. ( 1259606 )
• Ondersteuning voor willekeurige tekens (bijv , , . ) in netwerkzoekopdrachten . ( 1267196 )

[Experimenteel] Eindpunten in het deelvenster Rapportage-API

Het experimentele deelvenster Rapportage-API is geïntroduceerd in Chrome 96 om u te helpen de op uw pagina gegenereerde rapporten en hun status te controleren.

De sectie Eindpunten is nu beschikbaar. Deze 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 bewaken.

Chromium-probleem: 1200732

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.