Wat is er nieuw in DevTools (Chrome 117)

Sofia Emelianova

Verbeteringen aan het netwerkpaneel

Webcontent lokaal overschrijven, nog sneller

De functie voor lokale overschrijvingen is nu gestroomlijnd, waardoor u eenvoudig responsheaders en webinhoud van externe bronnen kunt simuleren vanuit het netwerkpaneel , zelfs zonder toegang tot die bronnen.

Om webinhoud te overschrijven, opent u het paneel Netwerk , klikt u met de rechtermuisknop op een verzoek en selecteert u Inhoud overschrijven .

Als je 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 om de overschrijvingen in op te slaan en geef DevTools toegang tot die map.

Zodra de overschrijvingen zijn ingesteld, brengt DevTools je naar Bronnen > Overschrijvingen > Editor , waar je webinhoud kunt overschrijven .

Merk op dat de overschreven bronnen worden aangegeven met In het paneel Netwerk . Beweeg de muis over het pictogram om te zien wat er wordt overschreven.

Chromium-problemen: 1465785 , 1470532 , 1469359 .

De inhoud van XHR- en fetch-verzoeken overschrijven.

Je kunt nu de inhoud van XHR- en fetch-verzoeken overschrijven, evenals de bijbehorende responseheaders. Met dergelijke overschrijvingen kun je de API-respons simuleren om je webpagina te debuggen, zelfs als je backend en API nog niet gereed zijn.

DevTools ondersteunt momenteel het overschrijven van inhoud voor de volgende verzoektypen: afbeeldingen (bijvoorbeeld avif, png), lettertypen, fetch en XHR, scripts (css en js) en documenten (html). De optie 'Inhoud overschrijven' wordt nu grijs weergegeven voor niet-ondersteunde typen.

Chromium-problemen: 792101 , 1469776 .

Chrome-extensieverzoeken verbergen

Om u te helpen focussen op de code die u schrijft en irrelevante verzoeken van extensies die u mogelijk in Chrome hebt geïnstalleerd te filteren, krijgt het netwerkpaneel een nieuw filter.

Om alle verzoeken die naar chrome-extension:// URL's worden verzonden te filteren, controleer je het volgende: Verberg extensie-URL's .

Chromium-problemen: 1257885 , 1458803 .

Mensen leesbare HTTP-statuscodes

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

Je kunt ook met de muis over de statuscode in de aanvraagtabel bewegen om dezelfde tekst te zien.

Chromium-probleem: 1153956 .

Mooi opgemaakte antwoorden voor JSON-subtypen

Het tabblad 'Response ' voor een verzoek met het MIME-subtype application/[subtype]+json (bijvoorbeeld ld+json , hal+json en andere) parseert de respons nu correct en stelt u in staat deze op te maken.

Chromium-probleem: 406900 .

Prestaties: Bekijk de wijzigingen in de ophaalprioriteit voor netwerkgebeurtenissen

Het paneel Prestaties toont nu twee prioriteitsvelden in het overzicht van een gebeurtenis in het netwerkspoor : Initiële prioriteit en (uiteindelijke) prioriteit , in plaats van slechts één prioriteit . Met dit extra veld kunt u nu zien of de ophaalprioriteit van de gebeurtenis verandert en de downloadvolgorde aanpassen. Zie voor meer informatie: Bronnen laden optimaliseren met de Fetch Priority API .

Daarnaast vindt u dezelfde informatie in de kolom Prioriteit van het paneel Netwerk , met de Instelling voor grote aanvraagrijen ingeschakeld.

Chromium-problemen: 1463901 , 1380964 .

Standaard ingeschakelde broninstellingen: Codefolding en automatische bestandsweergave

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

Om een ​​codeblok in te klappen, beweeg je de muis over het regelnummer naast het begin van het blok en klik je op de knop. Inklappictogram. Klik op {...} om het blok weer uit te vouwen.

Bovendien, de Instellingen > Voorkeuren > Het automatisch weergeven van bestanden in de zijbalk is nu ook standaard ingeschakeld.

Met deze instelling selecteert de bestandsstructuur in Bronnen > Pagina het bestand dat momenteel in de editor is geopend wanneer u van tabblad wisselt.

Chromium-problemen: 1459193 , 1336599 .

Verbeterde foutopsporing bij problemen met cookies van derden

In een poging om een ​​privacyvriendelijker web te creëren en parallel aan updates van andere browsers , introduceerde Chrome het Privacy Sandbox- initiatief. Dit initiatief verbetert de privacy op het web aanzienlijk en kan een gezond, door advertenties ondersteund web in stand houden op een manier die cookies van derden overbodig maakt. Privacy Sandbox wordt geleidelijk afgebouwd, zodat u zich comfortabel kunt aanpassen aan de veranderingen.

Je kunt nu al testen hoe Chrome zich gedraagt ​​na de uitfasering van cookies van derden. Start hiervoor Chrome via de opdrachtregel met de vlag --test-third-party-cookies-phaseout . Zie Foutopsporing van cookies voor meer informatie over de werking van deze vlag.

Ongeacht hoe je Chrome uitvoert (met of zonder de vlag), het tabblad Problemen bevat nu de Het selectievakje voor problemen met cookies van derden is standaard ingeschakeld voor alle nieuwe Chrome-gebruikers, met als gevolg dat er meldingen verschijnen:

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

Als je als bestaande Chrome-gebruiker waarschuwingen wilt zien over de aanstaande uitfasering van cookies, vink dan dit vakje aan.

Om dit te testen, bekijk de cookies op deze demopagina .

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

Chromium-problemen: 1458839 , 1462693 , 1466310 .

Foutopsporing bij het vooraf laden in het toepassingspaneel

Het Chrome-team brengt het volledig vooraf renderen van toekomstige pagina's die een gebruiker waarschijnlijk zal bezoeken terug . Om 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 linkgebaseerde resource hints .

Op deze demo-pagina voor prerendering kunt u in het gedeelte Toepassing > Preloading het volgende bekijken:

• Speculatieregels: een lijst met alle regelsets die op deze pagina te vinden zijn.
• Vooraf geladen bestanden die een lijst bevatten van alle vooraf opgehaalde en weergegeven URL's uit de regelsets.
• Deze pagina toont de vooraf gerenderde status van de huidige pagina.

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

Chromium-probleem: 1410709 .

Nieuwe kleuren

Je hebt misschien al gemerkt dat DevTools een vernieuwd uiterlijk heeft dat beter aansluit bij Chrome. Een van de factoren die daaraan hebben bijgedragen, is het nieuwe kleurenschema.

Deze versie (117) brengt meer UX-verbeteringen naar DevTools, zowel de reeds genoemde als de hieronder vermelde, waaronder een aantal verbeterde UI-teksten.

Chromium-probleem: 1456677 .

Lighthouse 10.4.0

Het Lighthouse- paneel draait nu op Lighthouse 10.4.0. Deze versie voegt met name nieuwe toegankelijkheidsaudits toe voor de volgende aspecten:

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

Bijvoorbeeld:

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

Chromium-probleem: 772558 .

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

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

Leer hoe je de extensie bouwt, uitvoert en test, en draag gerust bij .

Chromium-probleem: 1410709 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

• CSS-nesting : Het paneel Elementen toont nu de volledige selectorketen voor geneste kinderen ( 1172985 ).
• De sectie 'Applicatie > Manifest' bevat nu een 'Vensterbesturingselementen-overlay' die controleert of er een display_override waarde in het manifest aanwezig is en links naar relevante documentatie biedt.
• De paginastructuur 'Bronnen > Pagina ' doet nu het volgende, inclusief maar niet beperkt tot ( 1442863 ):
  • Mappen worden grijs weergegeven als alle inhoud ervan op de negeerlijst staat.
  • Mappen die volledig uit een bronmap afkomstig zijn, worden oranje gekleurd.
• Prestaties : Opname-instellingen worden nu automatisch verborgen wanneer u de opname start ( 1455498 ).
• Bronnen > Editor herstelde het gedrag van Ctrl + Pijltoets (Windows) en Opt + Pijltoets (MacOS) ( 1468208 ).
• De optie 'Animaties > Alles pauzeren' behoudt nu zijn status bij het laden van pagina's ( 1446046 ).
• Toepassing > Opslag > Cache-opslag verplaatst naar de sectie Toepassing > Opslag > Cache ( 1462622 ).
• Enkele UI-teksten en tooltips zijn verbeterd: de tooltip voor hardwareconcurrentie , de teksten van netwerkfilters en een hoofdmenu-optie , het gebruik van hoofdletters in de toepassingsboomweergave , de teksten bij Netwerk > Headers , Bronnen > Overrides en Bestandssysteem .

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 aan te geven dat ze de transparantie-effecten willen verminderen. U kunt overwegen om met deze voorkeur rekening te houden om de toegankelijkheid van uw website te verbeteren. Om u hierbij te helpen, kan het tabblad 'Rendering' nu de instelling prefers-reduced-transparency: reduce emuleren, zodat u een oplossing kunt prototypen en testen hoe uw website zich in dit geval gedraagt.

Om deze functie in Chrome te testen, schakelt u experimentele webplatformfuncties in chrome://flags .

Chromium-probleem: 1424879 .

Verbeterde protocolmonitor

Chrome DevTools gebruikt het Chrome DevTools Protocol (CDP) om Chrome-browsers te instrumenteren, inspecteren, debuggen en profileren. Als Chromium- of DevTools-ontwikkelaar biedt de protocolmonitor u de mogelijkheid om alle CDP-verzoeken en -reacties van DevTools te bekijken en zelf CDP-opdrachten te verzenden.

De protocolmonitor krijgt een nieuwe interface waarmee u gemakkelijker CDP-opdrachten kunt samenstellen en verzenden. U hoeft nu niet langer de opdrachten en hun parameters in de documentatie op te zoeken; DevTools stelt ze voor.

Klik in de rechterbenedenhoek van het tabblad 'Protocolmonitor' . Open de CDP-opdrachteditor , selecteer een doel, begin met het typen van een opdracht, selecteer een van de voorgestelde opdrachten, geef indien nodig parameterwaarden op en klik. Verzend commando ( Ctrl/Cmd + Enter ).

Chromium-probleem: 1469345 .

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .