Wat is er nieuw in DevTools (Chrome 99)

Het beperken van WebSocket-verzoeken

Het netwerkpaneel ondersteunt nu het beperken van websocketverzoeken. Voorheen werkte deze functie niet voor websocketverzoeken.

Open het paneel Netwerk , klik op een websocketverzoek en open het tabblad Berichten om de berichtoverdracht te bekijken. Selecteer Langzame 3G om de snelheid te beperken.

Het beperken van WebSocket-verzoeken

Chromium-probleem: 423246

Nieuw paneel voor de rapportage-API in het toepassingspaneel.

Gebruik het nieuwe paneel voor de rapportage-API om de op uw pagina gegenereerde rapporten en hun status te controleren.

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

Open een pagina die gebruikmaakt van de Reporting API (bijvoorbeeld een demopagina ). Ga in het paneel Toepassing naar beneden naar het gedeelte Achtergrondservices en selecteer het paneel Reporting 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.

In het gedeelte 'Endpoints' vindt u een overzicht van alle endpoints die zijn geconfigureerd in de kop Reporting-Endpoints .

Rapportage-API-paneel

Chromium-probleem: 1205856

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

Bij het opnieuw afspelen van een gebruikersstroomopname wacht het opnamepaneel nu totdat het element zichtbaar of klikbaar is in het weergavegebied, of probeert het element automatisch in het weergavegebied te scrollen voordat de stap opnieuw wordt afgespeeld. Voorheen mislukte het opnieuw afspelen onmiddellijk.

Hier is een voorbeeld van een offscreen-menu dat buiten het zichtbare gedeelte van het scherm is geplaatst en naar binnen schuift wanneer het wordt geactiveerd. De gebruikersflow is als volgt: het menu openen/sluiten en op een menu-item klikken. Voorheen mislukte de replay bij de laatste stap, omdat het menu-item nog niet naar binnen schoof en nog niet zichtbaar was in het zichtbare gedeelte van het scherm. Dit is nu opgelost.

Chromium-probleem: 1257499

Verbeterde console-styling, -opmaak en -filtering.

Geef logberichten de juiste stijl met ANSI-escapecode.

Je kunt nu ANSI-escape-sequenties gebruiken om consoleberichten correct op te maken. Voorheen bood de DevTools-console zeer beperkte (en deels gebrekkige) ondersteuning voor ANSI-escape-sequenties.

Het is gebruikelijk dat Node.js- ontwikkelaars logberichten kleuren met behulp van ANSI-escape-sequenties, vaak met behulp van stylingbibliotheken zoals chalk , colors , ansi-colors , kleur , enz.

Met deze wijzigingen kunt u uw Node.js-applicaties nu probleemloos debuggen met DevTools, inclusief correct gekleurde consoleberichten. Open deze demo om het zelf te bekijken!

Voor meer informatie over het formatteren en stylen van consoleberichten met DevTools, raadpleegt u de documentatie over het formatteren en stylen van berichten in de console .

console styling

Chromium-problemen: 1282837 , 1282076

De formaatspecificaties %s , %d , %i en %f moeten correct worden ondersteund.

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

Ondersteuning voor formaatspecificaties in consoleberichten

Chromium-problemen: 1277944 , 1282076

Intuïtievere filter voor consolegroepen

Bij het filteren van consoleberichten wordt een bericht nu alleen 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.

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

consolegroepfilter

Chromium-probleem: 1068788

Bronkaarten verbeteringen

Debug de Chrome-extensie met behulp van source map-bestanden.

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

Debug de Chrome-extensie met behulp van source map-bestanden.

Chromium-probleem: 212374

Verbeterde mapstructuur voor bronbestanden in het paneel Bronnen.

De mappenstructuur in het paneel Bronnen is verbeterd, met een overzichtelijkere mapstructuur en naamgeving (bijv. “../”, “./”, enz.). Dit is het resultaat van het normaliseren van de absolute bron-URL's in de bronkaarten.

Verbeterde mapstructuur voor bronbestanden in het paneel Bronnen.

Chromium-probleem: 1284737

Toon de bronbestanden van de worker in het paneel Bronnen.

Bronbestanden van workers (bijv. webworkers, serviceworkers) met een relatieve SourceURL worden nu weergegeven in het paneel Bron . Voorheen werden worker-bronbestanden niet correct verwerkt.

ALT_TEXT_HERE

Chromium-probleem: 1277002

De automatische donkere thema-updates van Chrome

De gebruikersinterface voor het emuleren van het automatische donkere thema is nu vereenvoudigd. Het is nu een selectievakje, in plaats van een keuzelijst.

Daarnaast wordt, wanneer het automatische donkere thema is ingeschakeld, het keuzemenu 'Emulate prefers-color-scheme' uitgeschakeld en automatisch ingesteld op ' prefers-color-scheme: dark' .

Chrome 96 introduceert een Origin-proefversie voor het automatisch toepassen van een donker thema op Android. Met deze functie past de browser automatisch een donker thema toe op websites met een licht thema, wanneer de gebruiker donkere thema's in het besturingssysteem heeft ingeschakeld.

Automatische emulatie van het donkere thema

Chromium-probleem: 1243309

Aanraakvriendelijke kleurenpicker en gesplitst venster

Je kunt nu in de ontwikkelaarstools de kleur selecteren en het formaat van de lade aanpassen met je vingers of een stylus op touchscreen-apparaten.

Hier is een voorbeeld dat is vastgelegd met het touchscreen van een Google Pixelbook .

Chromium-problemen: 1284245 , 1284995

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .