Deze pagina is vertaald door de Cloud Translation API.

Wat is er nieuw in DevTools (Chrome 122)

Sofia Emelianova

De officiële verzameling Recorder-extensies is live

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

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

Netwerkverbeteringen

Deze versie brengt een aantal verbeteringen aan het netwerkpaneel .

Reden van de fout in de kolom Status

In de kolom Status wordt nu altijd een foutreden weergegeven. Voorheen moest u check_box Big Request-rijen inschakelen of het verzoek in de tabel selecteren.

De voor en na tonen de foutreden in de kolom Status.

Chroomafgiften: 1506760 .

Verbeterd submenu Kopiëren

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

De voor en na het verbeteren van het submenu Kopiëren.

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

Chroomuitgaves: 1267033 , 1276452 , 798498 .

Prestatieverbeteringen

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Broodkruimels in de tijdlijn

Via de tijdlijn bovenaan het prestatiepaneel kunt u nu broodkruimels instellen en daartussen springen.

Om een broodkruimel in te stellen, selecteert u een bereik op de tijdlijn , beweegt u eroverheen en klikt u op de knop N ms zoom_in . U kunt meerdere geneste broodkruimels achter elkaar maken. Om tussen zoomniveaus te wisselen, klikt u op de overeenkomstige broodkruimel in de keten bovenaan de tijdlijn . Bekijk de volgende video om broodkruimels in actie te zien.

Chroomuitgaves: 1467739 .

Evenementinitiatiefnemers in het hoofdspoor

Het spoor Prestaties > Hoofd toont nu standaard pijlen die initiatiefnemers verbinden met de volgende gebeurtenissen die ze veroorzaakten.

Ongeldigheid van stijl of lay-out -> Stijlen of lay- out opnieuw berekenen
Animatieframe aanvragen -> Animatieframe geactiveerd
Inactief terugbellen aanvragen -> Inactief terugbellen activeren
Installatietimer -> Timer geactiveerd
Maak een WebSocket -> Verzenden... en ontvang een WebSocket-handshake of vernietig WebSocket

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

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

Chroomafgiften: 1434596 .

In het prestatiepaneel van Node.js DevTools kunt u nu een JavaScript VM-instantie selecteren in het overeenkomstige vervolgkeuzemenu in de actiebalk. Een soortgelijke functie was beschikbaar in de binnenkort verouderde JavaScript Profiler .

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

Chroomafgiften: 1511813 .

Elementenverbeteringen

Deze versie brengt een aantal verbeteringen aan het Elementenpaneel .

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

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

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

Ondersteuning voor en na het bewerken van pseudo-elementen voor weergave-overgang.

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

Chroomafgiften: 1511233 .

De `align-content` eigenschapsondersteuning 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.

Ondersteuning voor en na het uitlijnen van inhoud in blokcontainers.

Chroomafgiften: 1500511 .

Nieuwe snelkoppeling en opdracht in Bronnen

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

Het Commandomenu krijgt de nieuwe opdracht Reveal active file in navigator sidebar die hetzelfde doet als de corresponderende optie in het vervolgkeuzemenu van de Editor .

De nieuwe opdracht om het actieve bestand in de zijbalk van de navigator weer te geven.

Chroomuitgaves: 1486933 , 1467464 .

Houdingsondersteuning voor geëmuleerde opvouwbare apparaten

In de apparaatmodus kunt u nu de houding van een geëmuleerd opvouwbaar apparaat instellen: Continu of Gevouwen . De continue houding verwijst naar een "platte" positie en gevouwen vormt een hoek tussen delen van het scherm.

Een vervolgkeuzemenu met houdingsopties.

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

Chroomuitgave: 1066842 .

Dynamische thematiek

DevTools komt nu automatisch overeen met het kleurthema van Chrome. Een thema instellen:

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

DevTools komt overeen met het kleurthema dat is geselecteerd in Uiterlijk.

Chroomafgiften: 1483276 .

Waarschuwingen voor het uitfaseren van cookies van derden in de Netwerk- en Applicatiepanelen

Zowel het netwerk- als het applicatiepaneel markeren en tonen nu waarschuwingen naast cookies die getroffen zijn door de beperkingen van derden van Tracking Protection .

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

De voor en na het vastleggen van cookies van derden in het Netwerkpaneel.

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

De voor en na het markeren van cookies van derden in het toepassingspaneel.

Beweeg de muis over het waarschuwingspictogram om tooltip te zien waarin de problemen worden beschreven 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.

Chroomafgiften: 1506225 , 1503961 .

Vuurtoren 11.4.0

Het Lighthouse- paneel draait nu Lighthouse 11.4.0. Bekijk de volledige lijst met wijzigingen . Een van de opmerkelijke veranderingen is de nieuwe audit waarmee u kunt detecteren of uw website nog steeds cookies van derden gebruikt.

Audit die cookies van derden detecteert.

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools.

Chroomuitgave: 772558 .

Toegankelijkheid

Deze versie heeft de volgende toegankelijkheidsverbeteringen:

Wanneer u Instellingen > Experimenten opent, is het zoekvak nu automatisch in focus.
De knop Annuleren Invoer wissen in Netwerk > Filter kan nu worden gefocust.
De bestandsboom in Bronnen > Pagina wordt nu correct weergegeven in de modus met hoog contrast.
Schermlezers kondigen nu correct het volgende aan:
- De status van 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 instellingen Instellingen > Negeerlijst .

Chroomuitgaves: 1504938 , 1499868 , 1512161 , 1515224 , 1515418 , 1516998 , 1517015 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

Animaties :
- De bug opgelost waarbij de popover van schermafbeeldingen buiten het bereik werd weergegeven ( 1506991 ).
- De bug opgelost waarbij verwijderde animatieknooppunten niet als verwijderd waren gemarkeerd ( 1506561 ).
Netwerk :
- Koptekstoverschrijvingen : een bug opgelost met een vals paars stippictogram op het tabblad Kopteksten ( 1507856 ).
- Preview : Een bug opgelost met onnodige dubbele decodering ( 1509336 ).
- Een bug opgelost waardoor korte verzoeken niet verschenen ( 1509862 ).
Toepassing > IndexedDB : Herschikte knoppen in de actiebalk voor consistentie met andere panelen ( 1393800 ).
Sensoren : een bug opgelost waarbij de locatie niet beschikbaar was, onjuiste succesvolle callback ( 1486859 ).
Prestatie :
- De knop Afval verzamelen heeft nu een passend pictogram, "dweilen" in plaats van een "prullenbak" ( 1507530 ).
- Prestatietracering bewaart nu gegevens bij het navigeren naar about:blank ( 1509947 ).

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

Stuur ons een suggestie of feedback via crbug.com .
Rapporteer een DevTools-probleem met behulp van de opties Meer > Help > Rapporteer een DevTools-probleem in DevTools.
Tweet op @ChromeDevTools .
Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .