Wat is er nieuw in DevTools (Chrome 117)

Sofia Emelianova

Verbeteringen in het netwerkpaneel

Overschrijf webinhoud lokaal nog sneller

De functie voor lokale overschrijvingen is nu gestroomlijnd, zodat u eenvoudig antwoordheaders en webinhoud van externe bronnen kunt nabootsen vanuit het netwerkpaneel zonder dat u er toegang toe hebt.

Als u webinhoud wilt overschrijven, opent u het netwerkpaneel , klikt u met de rechtermuisknop op een verzoek en selecteert u Inhoud overschrijven .

Als u lokale overschrijvingen hebt ingesteld maar uitgeschakeld, schakelt DevTools deze in. Als je ze nog niet hebt ingesteld, vraagt ​​DevTools je dit in de actiebalk bovenaan. Selecteer een map waarin u de overschrijvingen wilt opslaan en geef DevTools er toegang toe.

Zodra de overschrijvingen zijn ingesteld, brengt DevTools u vervolgens naar Bronnen > Overschrijvingen > Editor waarmee u webinhoud kunt overschrijven .

Merk op dat de overschreven bronnen worden aangegeven met in het netwerkpaneel . Beweeg over het pictogram om te zien wat er wordt overschreven.

Chroomuitgaves: 1465785 , 1470532 , 1469359 .

Overschrijf de inhoud van XHR en haal verzoeken op

U kunt nu de inhoud van XHR overschrijven en naast de antwoordheaders ook verzoeken ophalen. Met dergelijke overschrijvingen kunt u de API-reacties bespotten om fouten in uw webpagina op te sporen, zelfs als uw backend en API nog niet klaar zijn.

DevTools ondersteunt momenteel inhoudoverschrijvingen voor de volgende verzoektypen: afbeeldingen (bijvoorbeeld avif, png), lettertypen, fetch en XHR, scripts (css en js) en documenten (html). DevTools maakt nu de optie Inhoud overschrijven grijs voor niet-ondersteunde typen.

Chroomuitgaves: 792101 , 1469776 .

Chrome-extensieverzoeken verbergen

Om u te helpen zich te concentreren op de code die u schrijft en irrelevante verzoeken uit te filteren die worden verzonden door extensies die u mogelijk in Chrome heeft geïnstalleerd, krijgt het netwerkpaneel een nieuw filter.

Als u alle verzoeken wilt filteren die naar de URL's chrome-extension:// zijn verzonden, vinkt u dit aan Verberg extensie-URL's .

Chroomuitgaves: 1257885 , 1458803 .

Voor mensen leesbare HTTP-statuscodes

De statuscode in de header van het verzoek toont nu voor mensen leesbare tekst naast de HTTP-statuscodes, zodat u sneller kunt achterhalen wat er met het verzoek is gebeurd.

U kunt ook met de muis over de statuscode in de verzoektabel bewegen om dezelfde tekst te zien.

Chroomuitgave: 1153956 .

Mooie printreacties voor JSON-subtypen

Het tabblad Reactie van voor een verzoek met een application/[subtype]+json MIME-subtype (bijvoorbeeld ld+json , hal+json en andere) parseert het antwoord nu correct en laat u het mooier maken.

Chroomuitgave: 406900 .

Prestaties: bekijk de wijzigingen in de ophaalprioriteit voor netwerkgebeurtenissen

Het paneel Prestaties toont nu twee prioriteitsvelden in de samenvatting van een gebeurtenis in de netwerktrack : Initiële prioriteit en (eind) prioriteit , in plaats van alleen de afzonderlijke prioriteit . Met dit extra veld kun je nu zien of de ophaalprioriteit van het evenement verandert en de volgorde van downloads aanpassen. Zie Het laden van bronnen optimaliseren met de Fetch Priority API voor meer informatie.

Bovendien kunt u dezelfde informatie vinden in de kolom Prioriteit van het netwerkpaneel , met de Instelling voor grote verzoekrijen ingeschakeld.

Chroomuitgaves: 1463901 , 1380964 .

Broninstellingen standaard ingeschakeld: code opvouwen en automatisch bestanden onthullen

De Instellingen > Voorkeuren > De optie voor het vouwen van codes is nu standaard ingeschakeld. Met deze optie kunt u codeblokken vouwen.

Om een ​​codeblok te vouwen, beweegt u de muis over het regelnummer naast het begin van het blok en klikt u op de samenvouwen icoon. Klik op {...} om het blok opnieuw uit te vouwen.

Bovendien is de Instellingen > Voorkeuren > Bestanden automatisch weergeven in de zijbalk is nu ook standaard ingeschakeld.

Deze instelling zorgt ervoor dat de bestandsboom in Bronnen > Pagina het huidige bestand selecteert dat in de Editor wordt geopend wanneer u van tabblad wisselt.

Chroomuitgaves: 1459193 , 1336599 .

Verbeterde foutopsporing van problemen met cookies van derden

In een poging om een ​​meer privé-web te helpen opbouwen en parallel met updates door andere browsers , introduceerde Chrome het Privacy Sandbox -initiatief. Dit initiatief verbetert fundamenteel de privacy op internet en kan een gezond, door advertenties ondersteund internet in stand houden op een manier die cookies van derden overbodig maakt. Privacy Sandbox heeft een tijdlijn voor geleidelijke uitfasering, zodat u zich gemakkelijk aan veranderingen kunt aanpassen.

Je kunt nu al testen hoe Chrome zich gedraagt ​​na de uitfasering van cookies van derden. Om dit te doen, voert u Chrome uit vanaf de opdrachtregel met de vlag --test-third-party-cookies-phaseout . Zie Foutopsporing in cookies voor meer informatie over wat deze vlag doet.

Ongeacht de manier waarop u Chrome gebruikt (met of zonder de vlag), het tabblad Problemen bevat nu de Het selectievakje 'Problemen met cookies van derden opnemen' is standaard ingeschakeld voor alle nieuwe Chrome-gebruikers en rapporteert als resultaat:

• Een belangrijke veranderingswaarschuwing over de aanstaande uitfasering.
• Problemen met betrekking tot cookies van derden.

Als u als bestaande Chrome-gebruiker cookiewaarschuwingen wilt zien over de aanstaande uitfasering, vink dan dit selectievakje aan.

Om dit te testen, inspecteert u cookies op deze demopagina .

Bovendien is de Het filter voor geblokkeerde responscookies in het netwerkpaneel is opnieuw geformuleerd om duidelijk te maken dat het alleen de geblokkeerde responscookies weergeeft.

Chroomuitgaves: 1458839 , 1462693 , 1466310 .

Foutopsporing vooraf laden in het toepassingspaneel

Het Chrome-team brengt de volledige pre-rendering terug van toekomstige pagina's waar een gebruiker waarschijnlijk naartoe zal navigeren. Om u de mogelijkheid te bieden dit te debuggen, voegt DevTools de sectie Preloading toe aan het toepassingspaneel . De nieuwe prefetching en prerendering (gezamenlijk bekend als "navigational preloading") maakt gebruik van de Speculation Rules API in plaats van de op links gebaseerde bronhints .

Op deze demopagina , in de sectie Toepassing > Voorladen , kunt u het volgende inspecteren:

• Speculatieregels waarin alle regelsets op de huidige pagina worden vermeld.
• Vooraf geladen met een lijst van alle vooraf opgehaalde en vooraf gegenereerde URL's uit de regelsets.
• Deze pagina waarop de vooraf weergegeven status van de huidige pagina wordt vermeld.

Raadpleeg voor meer informatie het speciale bericht over het debuggen van speculatieregels .

Chroomuitgave: 1410709 .

Nieuwe kleuren

Het is je misschien al opgevallen dat DevTools nu een vernieuwd uiterlijk heeft dat beter aansluit bij Chrome. Eén factor die daaraan bijdraagt ​​is het nieuwe kleurenschema.

Deze versie (117) brengt meer UX-verbeteringen aan DevTools, zowel reeds genoemd als verder opgesomd, inclusief een aantal verbeterde UI-teksten.

Chroomuitgave: 1456677 .

Vuurtoren 10.4.0

Het Lighthouse- paneel draait nu Lighthouse 10.4.0. Met name voegt deze versie nieuwe toegankelijkheidsaudits toe voor het volgende:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Bijvoorbeeld:

Zie ook de volledige lijst met wijzigingen . Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 772558 .

De C/C++ WebAssembly-foutopsporingsextensie voor DevTools is nu open source

De C/C++ WebAssembly-foutopsporingsextensie voor DevTools is nu open source en bevindt zich in de DevTools frontend-repository . Deze extensie maakt foutopsporingsmogelijkheden mogelijk in DevTools voor C++-programma's die zijn gecompileerd naar WebAssembly. Zie Debug C/C++ WebAssembly voor meer informatie.

Leer hoe u de extensie bouwt, uitvoert en test en voel u vrij om een ​​bijdrage te leveren.

Chroomuitgave: 1410709 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

• CSS-nesten : het paneel Elementen toont nu de volledige selectieketen voor geneste onderliggende elementen ( 1172985 ).
• Toepassing > Manifest heeft nu een sectie Window Controls Overlay die controleert of een display_override waarde aanwezig is in het Manifest en links biedt naar relevante documentatie.
• De boomstructuur Bronnen > Pagina doet nu het volgende, inclusief maar niet beperkt tot ( 1442863 ):
  • Maakt mappen grijs als de volledige inhoud ervan op de negeerlijst staat.
  • Kleurt mappen oranje als alle inhoud afkomstig is van een bronkaart.
• Prestaties : Opname-instellingen worden nu automatisch verborgen wanneer u de opname start ( 1455498 ).
• Bronnen > Editor heeft het gedrag van Ctrl + Pijl (Win) en Opt + Pijl (MacOs) hersteld ( 1468208 ).
• Animaties > Alles pauzeren behoudt nu zijn status bij het laden van pagina's ( 1446046 ).
• Applicatie > Opslag > Cacheopslag verplaatst naar de sectie Applicatie > Opslag > Cache ( 1462622 ).
• Sommige UI-teksten en tooltips zijn verbeterd: Tooltip voor hardwareconcurrency , Netwerkfilterteksten en een hoofdmenuoptie , hoofdlettergebruik in de applicatieboomweergave , Netwerk > Kopteksten , Bronnen > Overschrijvingen en Bestandssysteemteksten .

Nieuwe experimentele functies

Nieuwe rendering-emulatie: prefers-reduced-transparency

Gebruikers van uw website kunnen de nieuwe experimentele CSS-mediafunctie prefers-reduced-transparency op hun apparaten inschakelen om hun voorkeur aan te geven voor het verminderen van transparante effecten. U kunt overwegen om met deze voorkeur rekening te houden om de toegankelijkheid van uw website te vergroten. Om u te helpen kan het tabblad Rendering nu de instelling prefers-reduced-transparency: reduce emuleren, zodat u een prototype van een oplossing kunt maken en kunt testen hoe uw website zich in dit geval gedraagt.

Als u deze functie in Chrome wilt testen, schakelt u Experimentele webplatformfuncties in chrome://flags .

Chroomuitgave: 1424879 .

Verbeterde protocolmonitor

Chrome DevTools gebruikt het Chrome DevTools Protocol (CDP) om Chrome-browsers te instrumenteren, inspecteren, debuggen en profileren. Als u een Chromium- of DevTools-ontwikkelaar bent, biedt de Protocolmonitor u een manier om alle CDP-verzoeken en -antwoorden van DevTools te bekijken en CDP-opdrachten te verzenden.

De Protocolmonitor krijgt een nieuwe interface waarmee u eenvoudiger CDP-opdrachten kunt samenstellen en verzenden. Nu hoeft u geen opdrachten en hun parameters op te zoeken in de documentatie; DevTools zal ze u voorstellen.

Klik in de rechterbenedenhoek van het tabblad Protocolmonitorlade op Toon CDP-opdrachteditor , selecteer een doel, begin met het typen van een opdracht, selecteer indien nodig een van de voorgestelde, specificeer parameterwaarden en klik op Commando verzenden ( Ctrl/Cmd + Enter ).

Chroomuitgave: 1469345 .

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .