Wat is er nieuw in DevTools (Chrome 122)

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... op 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 het selectievakje 'Grote aanvraagrijen' inschakelen of de aanvraag in de tabel selecteren.

Chromium-problemen: 1506760 .

Verbeterd submenu Kopiëren

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

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 zoom_in . 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 -> Brand 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.

Chromium-problemen: 1434596 .

JavaScript VM-instantie-selectiemenu voor Node.js DevTools

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

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.

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.

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 .

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 Opgevouwen . De doorlopende positie verwijst naar een "platte" positie en de opgevouwen positie vormt een hoek tussen de delen van het scherm.

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 zich nu automatisch aan het kleurenthema van Chrome aan. Zo stelt u een thema in:

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

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 cookies die worden beïnvloed door de beperkingen van derden van Tracking Protection en geven hier waarschuwingen bij weer.

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

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

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.

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 Instellingen > Experimenten opent, is het zoekvak nu automatisch in focus .
• De knop ' Invoer wissen' 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 Instellingen > Locaties .
  • Groepen uitsluitingsregels (algemeen of aangepast) in de instellingen 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 het navigeren 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.

• 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 wat in de serie Wat is er nieuw in DevTools is behandeld.