Deze pagina is vertaald door de Cloud Translation API.

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 .

De overschrijfopties in het vervolgkeuzemenu van een verzoek.

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.

Selecteer een map en geef toegang daartoe in de actiebalk bovenaan.

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 .

Extensie-URL's verborgen in de verzoekentabel.

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.

De voor en na weergave van door mensen leesbare HTTP-statuscodes.

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 nu het antwoord correct en laat u het mooier maken.

De voor en na het parseren van een applicatie/json-subtype in een voorbeeld van een netwerkantwoord.

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.

Voor en na het weergeven van wijzigingen in de ophaalprioriteit.

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

De kolom Prioriteit in het paneel Netwerk.

Chroomuitgaves: 1463901 , 1380964 .

Broninstellingen standaard ingeschakeld: code opvouwen en automatische bestandsonthulling

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, introduceerde Chrome, parallel met updates door andere browsers , 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 geleidelijke uitfaseringstijdlijn , 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 .

Problemen met cookies van derden worden gerapporteerd op het tabblad Problemen.

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.

Het selectievakje is ingeschakeld en toont alleen de verzoeken met geblokkeerde responscookies.

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.

Het voor en na het aanbrengen van nieuwe kleuren.

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:

Bijvoorbeeld:

Er is geen controle uitgevoerd op de kleur van de links, waardoor ze niet van elkaar te onderscheiden zijn.

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`

Uw websitegebruikers 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 ).

Een CDP-opdracht opgeven en verzenden.

Chroomuitgave: 1469345 .

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 .