Wat is er nieuw in DevTools (Chrome 117)

Sofia Emelianova
Sofia Emelianova
GitHub

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.

Om webinhoud te 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 Opgeslagen. in het netwerkpaneel . Beweeg over het pictogram om te zien wat er wordt overschreven.

Een overschrijfpictogram naast een verzoek in het netwerkpaneel.

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 Selectievakje. 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 het antwoord nu 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 paneel Netwerk , met de Selectievakje. 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. Instellingen > Voorkeuren > Selectievakje. 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 Instorten. samenvouwen icoon. Klik op {...} om het blok opnieuw uit te vouwen.

Bovendien is de Instellingen. Instellingen > Voorkeuren > Selectievakje. 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 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 Selectievakje. 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 Selectievakje. 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 weergegeven.

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. Een 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:

De kleur van de links is niet gecontroleerd, 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

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 Linkerpaneel open. 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 Versturen. Commando verzenden ( Ctrl/Cmd + Enter ).

Een CDP-opdracht opgeven en verzenden.

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.

Wat is er nieuw in DevTools

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