Wat is er nieuw in DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova

De officiële verzameling Recorder-extensies is nu beschikbaar.

De officiële verzameling export- en replay- extensies voor Recorder is nu beschikbaar.

Om de collectie rechtstreeks vanuit de Recorder te openen, selecteert u Exporteren > Extensies ophalen... in de actiebalk bovenaan het Recorder- paneel.

Netwerkverbeteringen

Deze versie bevat een aantal verbeteringen aan het netwerkpaneel .

Reden van de fout in de kolom Status

De kolom Status toont nu altijd de reden van de fout. Voorheen moest u 'Grote aanvraagrijen' inschakelen of de aanvraag in de tabel selecteren.

De situatie vóór en na toont de reden van de storing in de kolom Status.

Chromium-problemen: 1506760 .

Verbeterd submenu kopiëren

Het submenu 'Kopiëren ' van een verzoek is nu beter georganiseerd.

De situatie vóór en na de verbetering van het submenu 'Kopiëren'.

Bovendien kopieert de optie ' Kopiëren als cURL' nu de juiste opdracht naar het klembord in Windows.

Chromium-problemen: 1267033 , 1276452 , 798498 .

Prestatieverbeteringen

Deze versie bevat een aantal verbeteringen aan het prestatiepaneel .

Broodkruimels in de tijdlijn

Met de tijdlijn bovenaan het paneel 'Uitvoeringen ' kunt u nu navigatiepaden instellen en ertussen springen.

Om een ​​breadcrumb in te stellen, selecteer je een bereik op de tijdlijn , beweeg je de muis eroverheen en klik je op de knop 'N ms . Je kunt meerdere geneste breadcrumbs achter elkaar maken. Om tussen zoomniveaus te schakelen, klik je op de corresponderende breadcrumb in de keten bovenaan de tijdlijn . Bekijk de volgende video om breadcrumbs in actie te zien.

Chromium-problemen: 1467739 .

Evenementinitiatoren in het hoofdcircuit

Het prestatiegedeelte > Hoofdtrack toont nu standaard pijlen die initiators verbinden met de daaropvolgende gebeurtenissen die ze hebben veroorzaakt.

  • Stijl- of lay-outfout -> Stijlen of lay-out opnieuw berekenen
  • Verzoek om animatieframe -> Animatieframe geactiveerd
  • Verzoek om inactieve callback -> Activeer inactieve callback
  • Timer installeren -> Timer geactiveerd
  • WebSocket aanmaken -> WebSocket-handshake verzenden en ontvangen of WebSocket verbreken

Om de pijlen te zien, zoek je een dergelijke gebeurtenis in de trace en klik je erop. Deze functie was voorheen een experiment.

Een pijl vanuit het verzoek en het activeren van een inactieve callback.

Chromium-problemen: 1434596 .

Menu voor het selecteren van een JavaScript VM-instantie in Node.js DevTools

In het paneel Prestaties van Node.js DevTools kunt u nu een JavaScript VM-instantie selecteren via het bijbehorende vervolgkeuzemenu in de actiebalk. Een vergelijkbare functie was beschikbaar in de binnenkort te vervallen JavaScript Profiler .

De situatie vóór en na het toevoegen van een nieuw menu waarmee je een JavaScript VM-instantie kunt selecteren.

Chromium-problemen: 1511813 .

Elementverbeteringen

Deze versie bevat een aantal verbeteringen aan het Elementenpaneel .

Naast de volgende twee functies onthoudt het paneel Elementen nu ook het laatst geopende tabblad, bijvoorbeeld Berekend of Eigenschappen .

Het pseudo-element ::view-transition is nu bewerkbaar in Stijlen.

Je kunt de CSS-pseudo-elementen ::view-transition nu bewerken in Stijlen met behulp van het stijlblad 'Inspecteur'.

De ondersteuning voor het bewerken van weergaveovergangen (vóór en na).

Zie voor meer informatie Vloeiende en eenvoudige overgangen met de View Transitions API .

Chromium-problemen: 1511233 .

De eigenschap align-content ondersteunt blokcontainers.

De eigenschap align-content werkt nu met alle blokcontainers , inclusief table-caption en table-cell . Voorheen werkte deze alleen met `grid` en `flex`.

De ondersteuning voor het uitlijnen van inhoud vóór en na in blokcontainers.

Chromium-problemen: 1500511 .

Nieuwe sneltoets en opdracht in Bronnen

Je kunt nu Cmd (Mac) / Ctrl (Windows) + Shift + klikken op een regelnummer in Broncode om een ​​logpunt te maken. Deze sneltoets is een aanvulling op de al bestaande Cmd (Mac) / Ctrl (Windows) + klikken voor voorwaardelijke breakpoints.

Het opdrachtmenu krijgt de nieuwe opdracht 'Actief bestand weergeven in de zijbalk van de navigator ', die hetzelfde doet als de overeenkomstige optie in het vervolgkeuzemenu van de editor .

De nieuwe opdracht toont het actieve bestand in de zijbalk van de browser.

Chromium-problemen: 1486933 , 1467464 .

Houdingsondersteuning voor gesimuleerde opvouwbare apparaten

In de apparaatmodus kunt u nu de houding van een gesimuleerd opvouwbaar apparaat instellen: Continu of Opgevouwen . De continue houding verwijst naar een "platte" positie en de opgevouwen houding vormt een hoek tussen de delen van het scherm.

Een keuzemenu met houdingsopties.

Daarnaast wordt de lijst met apparaten uitgebreid met een nieuw geëmuleerd opvouwbaar apparaat: de Asus Zenbook Fold.

Chromium-probleem: 1066842 .

Dynamische thematisering

DevTools past zich nu automatisch aan het kleurenthema van Chrome aan. Om een ​​thema in te stellen:

  1. Open een nieuw tabblad en klik rechtsonder op 'Chrome aanpassen' .
  2. Kies in 'Uiterlijk' een thema via wijzigen' of selecteer een kleurenpalet.

DevTools past zich aan het kleurenthema aan dat is geselecteerd in Uiterlijk.

Chromium-problemen: 1483276 .

Waarschuwingen over het uitfaseren van cookies van derden in de panelen Netwerk en Toepassing

Zowel het netwerkpaneel als het applicatiepaneel markeren en tonen nu waarschuwingen naast cookies die worden beïnvloed door de beperkingen van derden van Tracking Protection .

Zoek in het netwerk een verzoek met een , klik erop en open het tabblad Cookies .

Het verschil vóór en na het vastleggen van cookies van derden in het netwerkpaneel.

Ga in de toepassing naar Opslag > Cookies en klik op een domein. Cookies die geel gemarkeerd zijn, worden niet in de browser opgeslagen.

De situatie vóór en na het markeren van cookies van derden in het toepassingspaneel.

Beweeg de muis over het waarschuwingspictogram om een ​​tooltip te zien met een beschrijving van de problemen, en klik op het pictogram om het tabblad Problemen te openen met meer informatie.

Bovendien worden de cookies in de tabel nu standaard op naam gesorteerd.

Chromium-problemen: 1506225 , 1503961 .

Lighthouse 11.4.0

Het Lighthouse- paneel draait nu op Lighthouse 11.4.0. Bekijk de volledige lijst met wijzigingen . Een van de opvallende wijzigingen is de nieuwe audit waarmee u kunt controleren of uw website nog steeds gebruikmaakt van cookies van derden.

Audit die cookies van derden detecteert.

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Toegankelijkheid

Deze versie bevat de volgende verbeteringen op het gebied van toegankelijkheid:

  • Wanneer je opent (Instellingen > Experimenten) , wordt het zoekvak nu automatisch geselecteerd.
  • De knop ' Invoer wissen ' in Netwerk > Filter is nu selecteerbaar.
  • De bestandsstructuur in Bronnen > Pagina wordt nu correct weergegeven in de modus met hoog contrast.
  • Schermlezers spreken de volgende zaken nu correct uit:
    • De status van de selectievakjes in Bronnen > Breakpoints .
    • Positie- en indexinformatie voor een lijst met suggesties.
    • Resultaat van de actie bij het toevoegen of verwijderen van een locatie in : Instellingen > Locaties .
    • Groepen uitsluitingsregels (algemeen of aangepast) in de instellingen Negeerlijst .

Chromium-problemen: 1504938 , 1499868 , 1512161 , 1515224 , 1515418 , 1516998 , 1517015 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Animaties :
    • De bug waarbij de screenshot-popover buiten het weergavegebied werd weergegeven, is verholpen ( 1506991 ).
    • De bug waarbij verwijderde animatieknooppunten niet als verwijderd werden gemarkeerd, is verholpen ( 1506561 ).
  • Netwerk :
    • Koptekstaanpassingen : Een bug met een onterecht paars stipje in het tabblad Kopteksten is verholpen ( 1507856 ).
    • Voorbeeld : Een bug met onnodige dubbele decodering is verholpen ( 1509336 ).
    • Een bug is verholpen waardoor korte verzoeken niet werden weergegeven ( 1509862 ).
  • Applicatie > IndexedDB : Knoppen in de actiebalk opnieuw gerangschikt voor consistentie met andere panelen ( 1393800 ).
  • Sensoren : Een bug verholpen waarbij de callback voor niet-beschikbare locaties onjuist was ( 1486859 ).
  • Prestatie :
    • De knop 'Afval verzamelen' heeft nu een passend pictogram, 'dweil' in plaats van een 'bak' ( 1507530 ).
    • De prestatietrace behoudt nu gegevens bij het navigeren naar about:blank ( 1509947 ).

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.

Wat is er nieuw in DevTools?

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