Wat is er nieuw in DevTools (Chrome 99)

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. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

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

Chroom 124

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chroom 66

Chroom 65

Chroom 64

Chroom 63

Chroom 62

Chroom 61

Chroom 60

Chroom 59