Wat is er nieuw in DevTools (Chrome 117)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen aan het netwerkpaneel

Webinhoud lokaal nog sneller overschrijven

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

Als u webinhoud wilt overschrijven, opent u het paneel Netwerk , klikt u met de rechtermuisknop op een aanvraag en selecteert u Inhoud overschrijven .

De overschrijvingsopties in het vervolgkeuzemenu van een aanvraag.

Als u lokale overschrijvingen hebt ingesteld maar uitgeschakeld, schakelt DevTools deze in. Als u ze nog niet hebt ingesteld, vraagt ​​DevTools u dit in de actiebalk bovenaan. Selecteer een map om de overschrijvingen in op te slaan en geef DevTools er toegang toe.

Selecteer een map en geef toegang tot de map via de actiebalk bovenaan.

Zodra de overschrijvingen zijn ingesteld, stuurt DevTools u naar Bronnen > Overschrijvingen > Editor , zodat u webinhoud kunt overschrijven .

Houd er rekening mee dat de overschreven bronnen worden aangegeven met Opgeslagen. in het paneel Netwerk . Beweeg de muis over het pictogram om te zien wat er is overschreven.

Een overschrijvingspictogram naast een aanvraag in het paneel Netwerk.

Chromium-problemen: 1465785 , 1470532 , 1469359 .

Overschrijf de inhoud van XHR en haal verzoeken op

U kunt nu de inhoud van XHR- en fetch-requests overschrijven, naast de bijbehorende responsheaders. Met dergelijke overschrijvingen kunt u de API-responses simuleren om uw webpagina te debuggen, zelfs als uw backend en API nog niet klaar zijn.

DevTools ondersteunt momenteel content overrides voor de volgende aanvraagtypen: afbeeldingen (bijvoorbeeld avif, png), lettertypen, fetch en XHR, scripts (css en JS) en documenten (html). DevTools schakelt de optie 'Content overschrijven' nu uit voor niet-ondersteunde typen.

Chromium-problemen: 792101 , 1469776 .

Verberg Chrome-extensieverzoeken

Het paneel Netwerk heeft een nieuw filter gekregen, zodat u zich beter kunt concentreren op de code die u schrijft en u irrelevante verzoeken kunt filteren die worden verzonden door extensies die u mogelijk in Chrome hebt geïnstalleerd.

Om alle verzoeken die naar chrome-extension:// URL's worden verzonden te filteren, vinkt u aan Selectievakje. Verberg extensie-URL's .

Extensie-URL's zijn verborgen in de tabel met aanvragen.

Chromium-problemen: 1257885 , 1458803 .

Voor mensen leesbare HTTP-statuscodes

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

Voor en na de weergave van voor mensen leesbare HTTP-statuscodes.

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

Chromium-probleem: 1153956 .

Pretty-print-reacties voor JSON-subtypen

Het tabblad Respons voor een aanvraag met een application/[subtype]+json MIME-subtype (bijvoorbeeld ld+json , hal+json en andere) parseert de respons nu correct en biedt u de mogelijkheid deze mooier te maken.

Het voor en na het parseren van een application/json-subtype in een voorbeeld van een netwerkrespons.

Chromium-probleem: 406900 .

Prestaties: Bekijk de wijzigingen in de ophaalprioriteit voor netwerkgebeurtenissen

Het paneel Prestaties toont nu twee prioriteitsvelden in de Samenvatting van een gebeurtenis in het netwerkspoor : Initiële prioriteit en (uiteindelijke) prioriteit , in plaats van alleen de ene prioriteit . Met dit extra veld kunt u nu zien of de ophaalprioriteit van de gebeurtenis verandert en de volgorde van downloads aanpassen. Zie Resource laden 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 paneel Netwerk , met de Selectievakje. Instelling voor grote aanvraagrijen ingeschakeld.

De kolom Prioriteit in het paneel Netwerk.

Chromium-problemen: 1463901 , 1380964 .

Broninstellingen standaard ingeschakeld: Code vouwen en automatisch onthullen van bestanden

De Instellingen. Instellingen > Voorkeuren > Selectievakje. De optie voor het vouwen van code 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 Instorten. pictogram voor inklappen. Klik op {...} om het blok weer uit te klappen.

Bovendien is de Instellingen. Instellingen > Voorkeuren > Selectievakje. Automatisch bestanden weergeven in de zijbalk is nu ook standaard ingeschakeld.

Met deze instelling selecteert de bestandsboom in Bronnen > Pagina het bestand dat momenteel is geopend in de Editor wanneer u tussen tabbladen schakelt.

Chromium-problemen: 1459193 , 1336599 .

Verbeterde debug van problemen met cookies van derden

Om een ​​meer privé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 fundamenteel en kan een gezond, advertentie-ondersteund web in stand houden, waardoor cookies van derden overbodig worden. Privacy Sandbox kent een geleidelijke uitfasering, zodat u zich gemakkelijk kunt aanpassen aan veranderingen.

U kunt nu al testen hoe Chrome zich gedraagt ​​na de uitfasering van cookies van derden. Voer hiervoor Chrome uit vanaf de opdrachtregel met de vlag --test-third-party-cookies-phaseout . Zie 'Cookies debuggen' voor meer informatie over wat deze vlag doet.

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

  • Een belangrijke waarschuwing over de naderende uitfasering.
  • Problemen met cookies van derden.

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

Om dit te testen, kunt u de cookies op deze demopagina bekijken.

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

Bovendien is de Selectievakje. Het filter 'Geblokkeerde reactiecookies' in het paneel 'Netwerk' is opnieuw geformuleerd, zodat het duidelijker is dat alleen de geblokkeerde reactiecookies worden weergegeven.

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

Chromium-problemen: 1458839 , 1462693 , 1466310 .

Debug preloading in het toepassingspaneel

Het Chrome-team brengt volledige pre-rendering terug van toekomstige pagina's waar een gebruiker waarschijnlijk naartoe navigeert. Om u te helpen dit te debuggen, voegt DevTools de sectie Preloading toe aan het paneel Applicatie . De nieuwe prefetching en pre-rendering (gezamenlijk bekend als "navigational preloading") maakt gebruik van de Speculation Rules API in plaats van de linkgebaseerde resource hints .

Op deze prerender-demopagina , in de sectie Toepassing > Preloading , kunt u het volgende inspecteren:

  • Speculatieregels met een overzicht van alle regels die op de huidige pagina zijn gevonden.
  • Preloads die alle vooraf opgehaalde en vooraf gerenderde URL's uit de regels weergeven.
  • Deze pagina geeft de vooraf weergegeven status van de huidige pagina weer.

Voor meer informatie, zie het speciale bericht over het debuggen van speculatieregels .

Chromium-probleem: 1410709 .

Nieuwe kleuren

Je hebt misschien al gemerkt dat DevTools nu een vernieuwde look heeft die beter aansluit bij Chrome. Een belangrijke factor is het nieuwe kleurenschema.

Voor en na het aanbrengen van de nieuwe kleuren.

Deze versie (117) brengt meer UX-verbeteringen aan DevTools, die zowel al eerder zijn genoemd als verderop worden opgesomd, inclusief een aantal verbeterde UI-teksten.

Chromium-probleem: 1456677 .

Vuurtoren 10.4.0

Het Lighthouse -paneel draait nu Lighthouse 10.4.0. Deze versie bevat met name nieuwe toegankelijkheidscontroles voor het volgende:

Bijvoorbeeld:

Controle op de kleur van links, waardoor ze niet van elkaar te onderscheiden zijn, is mislukt.

Zie ook de volledige lijst met wijzigingen . Zie Lighthouse: Optimaliseer de websitesnelheid voor de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools.

Chromium-probleem: 772558 .

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

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

Leer hoe u de extensie kunt bouwen, uitvoeren en testen . U kunt er ook zelf aan bijdragen .

Chromium-probleem: 1410709 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • CSS-nesting : het Elementenpaneel toont nu de volledige selectorketen voor geneste onderliggende elementen ( 1172985 ).
  • Toepassing > Manifest heeft nu een sectie Overlay vensterbesturingselementen die controleert of er een display_override waarde aanwezig is in het manifest en koppelingen biedt naar relevante documentatie.
  • De Bronnen > Paginaboom doet nu het volgende, inclusief maar niet beperkt tot ( 1442863 ):
    • Mappen worden grijs weergegeven als de inhoud ervan op de negeerlijst staat.
    • Mappen worden oranje gekleurd als alle inhoud ervan afkomstig is uit een bronkaart.
  • Prestaties : De 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 ).
  • De schakelaar Animaties > Alles pauzeren behoudt nu zijn status tijdens het laden van de pagina ( 1446046 ).
  • Toepassing > Opslag > Cacheopslag is verplaatst naar de sectie Toepassing > Opslag > Cache ( 1462622 ).
  • Sommige UI-teksten en tooltips zijn verbeterd: Tooltips voor hardwareconcurrentie , Netwerkfilterteksten en een hoofdmenuoptie , hoofdlettergebruik in de toepassingsboomweergave , Netwerk > Headers-teksten , Bronnen > Overrides en Bestandssysteem-teksten .

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 transparante effecten liever verminderen. U kunt overwegen om deze voorkeur in overweging te nemen 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 prototype van de oplossing kunt maken en kunt testen hoe uw website zich in dit geval gedraagt.

Als u deze functie in Chrome wilt testen, schakelt u de 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 u een Chromium- of DevTools-ontwikkelaar bent, biedt de Protocol Monitor u een manier om alle CDP-verzoeken en -reacties van DevTools te bekijken en CDP-opdrachten te verzenden.

De Protocol Monitor heeft een nieuwe interface gekregen waarmee u eenvoudiger CDP-opdrachten kunt samenstellen en versturen. U hoeft nu niet langer opdrachten en hun parameters in de documentatie op te zoeken; DevTools geeft ze u aan.

Klik in de rechter benedenhoek van het tabblad Protocolmonitor op Linkerpaneel open. Toon CDP-opdracht-editor , selecteer een doel, begin met het typen van een opdracht, selecteer een van de voorgestelde, geef indien nodig parameterwaarden op en klik Versturen. Opdracht verzenden ( Ctrl/Cmd + Enter ).

Een CDP-opdracht opgeven en verzenden.

Chromium-probleem: 1469345 .

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.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.