Wat is er nieuw in DevTools (Chrome 99)

Jecelyn Yeen

WebSocket-aanvragen beperken

Het netwerkpaneel ondersteunt nu het beperken van websocketverzoeken. Voorheen werkte de netwerkbeperking niet bij websocketverzoeken.

Open het netwerkpaneel , klik op een websocketverzoek en open het tabblad Berichten om de berichtoverdrachten te observeren. Selecteer Slow 3G om de snelheid te verlagen.

WebSocket-aanvragen beperken

Chroomuitgave: 423246

Nieuw deelvenster Rapportage-API in het paneel Toepassingen

Gebruik het nieuwe deelvenster Rapportage-API om de op uw pagina gegenereerde rapporten en hun status te controleren.

De Reporting API is ontworpen om u te helpen beveiligingsschendingen van uw pagina, verouderde API-aanroepen en meer te monitoren.

Open een pagina die gebruikmaakt van de Reporting API (bijvoorbeeld demopagina ). Blader in het paneel Toepassingen omlaag naar de sectie Achtergrondservices en selecteer het deelvenster Rapportage-API .

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

De sectie Eindpunten geeft u een overzicht van alle eindpunten die zijn geconfigureerd in de kop Reporting-Endpoints .

Deelvenster Rapportage-API

Chroomuitgave: 1205856

Ondersteuning wacht totdat het element zichtbaar/klikbaar is in het Recorder-paneel

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

Hier is een voorbeeld van een menu buiten het scherm dat buiten de viewport is geplaatst en naar binnen schuift wanneer geactiveerd. De gebruikersstroom bestaat uit het schakelen tussen het menu en het klikken op het menu-item. Voorheen mislukte de herhaling bij de laatste stap, omdat het menu-item nog steeds naar binnen schuift en nog niet zichtbaar is in de viewport. Het is nu opgelost.

Chroomuitgave: 1257499

Betere console-stijl, opmaak en filtering

Stijl logberichten op de juiste manier met ANSI-escape-code

U kunt nu de ANSI-escape-reeksen gebruiken om consoleberichten op de juiste manier op te maken. Voorheen had de DevTools-console zeer beperkte (en gedeeltelijk verbroken) ondersteuning voor ANSI-escape-reeksen.

Het is gebruikelijk dat Node.js -ontwikkelaars logberichten inkleuren via ANSI-escape-reeksen, vaak met behulp van bepaalde stijlbibliotheken zoals chalk , Colors , ansi-colors , kleur , enz.

Met deze wijzigingen kunt u nu naadloos fouten opsporen in uw Node.js-applicaties met DevTools, met de juiste gekleurde consoleberichten. Open deze demo om hem zelf te bekijken!

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

console-stijl

Chroomuitgaves: 1282837 , 1282076

Ondersteunt de formatspecificaties %s , %d , %i en %f op de juiste manier

De console voert nu correct de conversies van het type %s , %d , %i en %f uit, zoals gespecificeerd in de consolestandaard . Voorheen was het gespreksresultaat inconsistent.

ondersteuning voor formaatspecificaties in consolebericht

Chroomuitgaves: 1277944 , 1282076

Intuïtiefer consolegroepfilter

Bij het filteren van het consolebericht wordt nu een consolebericht weergegeven als de berichtinhoud overeenkomt met het filter of als de titel van de groep (of de vooroudergroep) overeenkomt met het filter. Voorheen werd de titel van de consolegroep ondanks het filter weergegeven.

Als er bovendien een consolebericht wordt weergegeven, wordt nu ook de groep (of de vooroudergroep) waartoe het behoort, weergegeven.

consolegroepfilter

Chroomuitgave: 1068788

Verbeteringen in bronkaarten

Debug de Chrome-extensie met bronkaartbestanden

U kunt nu fouten in de Chrome-extensie opsporen met bronkaartbestanden. Voorheen ondersteunde DevTools alleen inline sourcemap voor foutopsporing in Chrome-extensies.

Debug de Chrome-extensie met bronkaartbestanden

Chroomuitgave: 212374

Verbeterde bronmappenstructuur 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 bronkaarten.

Verbeterde bronmappenstructuur in het Bronnenpaneel

Chroomuitgave: 1284737

Geef de bronbestanden van werknemers weer in het deelvenster Bronnen

Bronbestanden van werknemers (bijvoorbeeld webwerkers, servicemedewerkers) met relatieve SourceURL worden nu weergegeven in het bronpaneel . Voorheen werden werkbronbestanden niet correct verwerkt.

ALT_TEXT_HIER

Chroomuitgave: 1277002

Chrome's Auto Dark Theme-updates

De Auto Dark Theme-emulatie- UI is nu vereenvoudigd. Het is nu een selectievakje, voorheen was het een vervolgkeuzelijst.

Afgezien daarvan, wanneer het Auto Dark-thema is ingeschakeld, wordt de vervolgkeuzelijst Voorkeurskleurenschema emuleren uitgeschakeld en automatisch ingesteld op voorkeurskleurenschema: donker .

Chrome 96 introduceert een Origin-proefversie voor Auto Dark Theme op Android. Met deze functie past de browser een automatisch gegenereerd donker thema toe op sites met een licht thema, wanneer de gebruiker zich in het besturingssysteem heeft aangemeld voor donkere thema's.

Automatische donkere thema-emulatie

Chroomuitgave: 1243309

Aanraakvriendelijke kleurkiezer en gesplitst venster

U kunt nu kleur selecteren en het formaat van de lade in DevTools wijzigen met uw vingers of stylus op touchscreen-apparaten.

Hier is een voorbeeld gemaakt met het touchscreen van het Google Pixelbook -apparaat.

Chroomuitgaves: 1284245 , 1284995

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

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 .