Wat is er nieuw in DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova

De officiële collectie Recorder-extensies is live

De officiële verzameling export- en afspeelrecorderextensies is nu live.

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

Netwerkverbeteringen

Deze versie brengt een aantal verbeteringen aan het Netwerkpaneel .

Reden van mislukking 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 voor- en na-weergave van de reden voor de mislukking in de kolom Status.

Chromium-problemen: 1506760 .

Verbeterd submenu Kopiëren

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

Het voor- en naproces van het verbeteren 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 brengt een aantal verbeteringen aan het Prestatiepaneel .

Broodkruimels in de tijdlijn

Via de tijdlijn bovenaan het paneel Prestaties kunt u nu broodkruimels instellen en ertussen springen.

Om een breadcrumb in te stellen, selecteert u een bereik op de tijdlijn , beweegt u de muis erover en klikt u op de knop N ms . U kunt meerdere geneste breadcrumbs achter elkaar maken. Om tussen zoomniveaus te springen, klikt u op de bijbehorende breadcrumb in de keten boven aan de tijdlijn . Bekijk de volgende video om breadcrumbs in actie te zien.

Chromium-problemen: 1467739 .

Evenementinitiatiefnemers in het hoofdspoor

Het spoor Prestaties > Hoofd toont nu standaard pijlen die initiators en de gebeurtenissen die ze veroorzaakten met elkaar verbinden.

  • Ongeldigverklaring van stijl of lay-out -> Stijlen of lay-out opnieuw berekenen
  • Animatieframe aanvragen -> Animatieframe geactiveerd
  • Verzoek om terug te bellen bij inactiviteit -> Branden om terug te bellen bij inactiviteit
  • Timer installeren -> Timer geactiveerd
  • WebSocket aanmaken -> WebSocket-handshake verzenden... en ontvangen of WebSocket vernietigen

Om de pijlen te zien, zoekt u een dergelijke gebeurtenis in de trace en klikt u erop. Voorheen was deze functie een experiment.

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

Chromium-problemen: 1434596 .

JavaScript VM-instantie-selectormenu voor Node.js DevTools

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

Voor en na het toevoegen van een nieuw menu waarmee u een JavaScript VM-instantie kunt selecteren.

Chromium-problemen: 1511813 .

Verbeteringen aan elementen

Deze versie brengt een aantal verbeteringen aan het Elementenpaneel .

Naast de volgende twee functies onthoudt het Elementenpaneel nu het laatste tabblad dat u hebt geopend, bijvoorbeeld Berekend of Eigenschappen .

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

U kunt nu de CSS-pseudo-elementen ::view-transition in Stijlen bewerken met behulp van het inspector-stijlblad.

Ondersteuning van view-transition pseudo-elementen voor voor en na bewerking.

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

Chromium-problemen: 1511233 .

Ondersteuning van de eigenschap align-content voor blokcontainers

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

De voor- en na-align-content-ondersteuning in blokcontainers.

Chromium-problemen: 1500511 .

Nieuwe snelkoppeling en opdracht in Bronnen

U kunt nu Cmd (Mac) / Ctrl (Win) + Shift + klikken op een regelnummer in Bronnen om een logpoint te maken. Deze sneltoets is een aanvulling op de reeds bestaande Cmd (Mac) / Ctrl (Win) + klikken voor voorwaardelijke breekpunten.

Het Opdrachtmenu haalt de nieuwe opdracht Actief bestand weergeven in de navigatorzijbalk op, die hetzelfde doet als de overeenkomstige optie in het vervolgkeuzemenu van de Editor .

De nieuwe opdracht om het actieve bestand in de navigatorzijbalk weer te geven.

Chromium-problemen: 1486933 , 1467464 .

Houdingsondersteuning voor geëmuleerde opvouwbare apparaten

Met de apparaatmodus kunt u nu de positie van een geëmuleerd opvouwbaar apparaat instellen: Doorlopend of Ingeklapt . De doorlopende positie verwijst naar een "platte" positie en in de ingeklapte positie vormt het een hoek tussen de delen van het scherm.

Een keuzemenu met houdingopties.

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

Chromium-probleem: 1066842 .

Dynamische thema's

DevTools past nu automatisch het kleurenthema van Chrome aan. Zo stelt u een thema in:

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

DevTools past het kleurenthema aan dat is geselecteerd in Uiterlijk.

Chromium-problemen: 1483276 .

Waarschuwingen over de uitfasering van cookies van derden in de panelen Netwerk en Toepassing

Zowel het Netwerk- als het Toepassingspaneel markeren nu waarschuwingen naast cookies die worden beïnvloed door de beperkingen van derden van Tracking Protection .

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

Voor en na het vastleggen van cookies van derden in het paneel Netwerk.

Navigeer in de toepassing naar Opslag > Cookies en klik op een domein. Geel gemarkeerde cookies worden niet in de browser opgeslagen.

Voor en na het markeren van cookies van derden in het paneel Toepassing.

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 .

Vuurtoren 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 detecteren of uw website nog steeds cookies van derden gebruikt.

Audit die cookies van derden detecteert.

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 772558 .

Toegankelijkheid

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

  • Wanneer u > Experimenten opent, is het zoekvak nu automatisch in focus.
  • De knop voor het wissen van invoer in Netwerk > Filter heeft nu de focus.
  • De bestandsstructuur in Bronnen > Pagina wordt nu correct weergegeven in de modus met hoog contrast.
  • Schermlezers melden nu correct het volgende:
    • De status van de selectievakjes in Bronnen > Breekpunten .
    • Positie- en indexinformatie voor een lijst met suggesties.
    • Actieresultaat bij het toevoegen of verwijderen van een locatie in Instellingen > Locaties .
    • Groepen uitsluitingsregels (algemeen of aangepast) in Instellingen > Negeerlijst .

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

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Animaties :
    • De bug waarbij de pop-upweergave van schermafbeeldingen buiten de grenzen viel, is opgelost ( 1506991 ).
    • De bug waarbij verwijderde animatieknooppunten niet als verwijderd werden gemarkeerd, is opgelost ( 1506561 ).
  • Netwerk :
    • Koptekst overschrijven : een bug met een vals paars stippictogram op het tabblad Kopteksten is opgelost ( 1507856 ).
    • Preview : Er is een bug opgelost met een onnodige dubbele decodering ( 1509336 ).
    • Er is een bug opgelost waardoor korte verzoeken niet werden weergegeven ( 1509862 ).
  • Toepassing > IndexedDB : knoppen in de actiebalk opnieuw gerangschikt voor consistentie met andere panelen ( 1393800 ).
  • Sensoren : Er is een bug opgelost waarbij de niet-beschikbare locatie leidde tot een onjuiste succesvolle callback ( 1486859 ).
  • Prestatie :
    • De knop Prullenbak verzamelen heeft nu een passend pictogram, "dweil" in plaats van een "prullenbak" ( 1507530 ).
    • Prestatietracering behoudt nu gegevens bij navigatie naar about:blank ( 1509947 ).

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.

Wat is er nieuw in DevTools

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