Wat is er nieuw in DevTools (Chrome 99)

WebSocket-verzoeken beperken

Het Netwerkpaneel ondersteunt nu het beperken van websocket-aanvragen. Voorheen werkte de netwerkbeperking niet voor websocket-aanvragen.

Open het paneel Netwerk , klik op een websocketaanvraag en open het tabblad Berichten om de berichtoverdracht te bekijken. Selecteer '3G vertragen' om de snelheid te verlagen.

WebSocket-verzoeken beperken

Chromium-probleem: 423246

Nieuw rapport-API-paneel in het toepassingspaneel

Met het nieuwe deelvenster Rapportage-API kunt u de op uw pagina gegenereerde rapporten en hun status controleren.

Met de Reporting API kunt u beveiligingsschendingen op uw pagina, verouderde API-aanroepen en meer in de gaten houden.

Open een pagina die de Reporting API gebruikt (bijvoorbeeld een demopagina ). Scrol in het paneel 'Toepassing' naar beneden naar het gedeelte 'Achtergrondservices' en selecteer het paneel 'Rapporting API' .

In het gedeelte 'Rapporten' vindt u een lijst met de rapporten die op uw pagina zijn gegenereerd en hun status. Klik erop om de details van het rapport te bekijken.

In het gedeelte Eindpunten vindt u een overzicht van alle eindpunten die zijn geconfigureerd in de header Reporting-Endpoints .

Rapportage-API-paneel

Chromium-probleem: 1205856

Ondersteuning voor wachten tot het element zichtbaar/klikbaar is in het Recorder-paneel

Bij het opnieuw afspelen van een gebruikersstroomopname wacht het Recorder- paneel nu tot het element zichtbaar of klikbaar is in de viewport, of probeert het het element automatisch naar de viewport te scrollen voordat de stap opnieuw wordt afgespeeld. Voorheen mislukte het opnieuw afspelen direct.

Hier is een voorbeeld van een off-screen menu dat buiten de viewport is geplaatst en naar binnen schuift wanneer het wordt geactiveerd. De gebruiker moet het menu in- en uitschakelen en op het menu-item klikken. Voorheen mislukte de herhaling bij de laatste stap, omdat het menu-item nog naar binnen schuift en nog niet zichtbaar is in de viewport. Dit is nu opgelost.

Chromium-probleem: 1257499

Betere console-styling, -opmaak en -filtering

Geef logberichten de juiste stijl met ANSI-escape-code

U kunt nu de ANSI-escape sequences gebruiken om consoleberichten correct te stylen. Voorheen bood de DevTools-console zeer beperkte (en deels defecte) ondersteuning voor ANSI-escape sequences.

Het is gebruikelijk dat Node.js -ontwikkelaars logberichten kleur geven met behulp van ANSI-escape sequences, vaak met behulp van stylingbibliotheken zoals chalk , colors , ansi-colors en kleur .

Dankzij deze wijzigingen kunt u uw Node.js-applicaties nu naadloos debuggen met DevTools, met de juiste gekleurde consolemeldingen. Open deze demo om het zelf te bekijken!

Voor meer informatie over het opmaken en stylen van consoleberichten met DevTools gaat u naar Berichten opmaken en stylen in de Consoledocumentatie.

console-styling

Chromium-problemen: 1282837 , 1282076

Ondersteunt correct de opmaakspecificaties %s , %d , %i en %f

De console voert nu correct de typeconversies %s , %d , %i en %f uit zoals gespecificeerd in de Console Standard . Voorheen was het conversieresultaat inconsistent.

ondersteuning voor opmaakspecificaties in consoleberichten

Chromium-problemen: 1277944 , 1282076

Intuïtiever consolegroepfilter

Bij het filteren van het consolebericht wordt nu een consolebericht weergegeven als de inhoud ervan overeenkomt met het filter of als de titel van de groep (of de bovenliggende groep) overeenkomt met het filter. Voorheen werd de titel van de consolegroep weergegeven, ongeacht het filter.

Bovendien wordt, als er een consolebericht wordt weergegeven, nu ook de groep (of bovenliggende groep) waartoe deze behoort.

consolegroepfilter

Chromium-probleem: 1068788

Verbeteringen aan bronkaarten

Debug Chrome-extensie met bronkaartbestanden

Je kunt nu Chrome-extensies debuggen met bronmapbestanden. Voorheen ondersteunde DevTools alleen inline sourcemaps voor het debuggen van Chrome-extensies.

Debug Chrome-extensie met bronkaartbestanden

Chromium-probleem: 212374

Verbeterde bronmapboom in het Bronnenpaneel

De bronmapstructuur in het Bronnenpaneel is nu verbeterd met minder rommel in de mapstructuren en naamgeving (bijv. "../", "./", enz.). Onder de motorkap is dit het resultaat van het normaliseren van de absolute bron-URL's in de brontoewijzingen.

Verbeterde bronmapboom in het Bronnenpaneel

Chromium-probleem: 1284737

Geef bronbestanden van werknemers weer in het paneel Bronnen

Bronbestanden van werknemers (bijv. webworkers, serviceworkers) met een relatieve SourceURL worden nu weergegeven in het bronpaneel . Voorheen werden bronbestanden van werknemers niet correct verwerkt.

ALT_TEKST_HIER

Chromium-probleem: 1277002

Updates voor het automatische donkere thema van Chrome

De gebruikersinterface voor de emulatie van het automatische donkere thema is nu vereenvoudigd. Het is nu een selectievakje, voorheen een dropdownmenu.

Daarnaast zal, wanneer Auto Dark Theme is ingeschakeld, de vervolgkeuzelijst Emulate prefers-color-scheme automatisch worden uitgeschakeld en ingesteld op prefers-color-scheme: dark .

Chrome 96 introduceert een Origin-proefversie voor automatisch donker thema op Android. Met deze functie past de browser een automatisch gegenereerd donker thema toe op websites met een licht thema, wanneer de gebruiker hiervoor heeft gekozen in het besturingssysteem.

Automatische emulatie van donker thema

Chromium-probleem: 1243309

Aanraakvriendelijke kleurenkiezer en gesplitst paneel

U kunt nu kleuren selecteren en de grootte van de lade in DevTools aanpassen met uw vingers of een stylus op apparaten met een touchscreen.

Hier ziet u een voorbeeld, gemaakt met het touchscreen van het Google Pixelbook -apparaat.

Chromium-problemen: 1284245 , 1284995

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

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.