Wat is er nieuw in DevTools (Chrome 88)

Jecelyn Yeen

Snellere DevTools-startup

De opstarttijd van DevTools is nu ongeveer 37% sneller qua JavaScript-compilatie (van 6,9 seconden naar 5 seconden)! 🎉

Het team heeft enkele optimalisaties doorgevoerd om de prestatieoverhead van serialisatie, parsing en deserialisatie tijdens het opstarten te verminderen.

Er komt binnenkort een blogpost op de website van de technische afdeling waarin de implementatie in detail wordt uitgelegd. Blijf op de hoogte!

Chromium-probleem: 1029427

Nieuwe visualisatietools voor CSS-hoeken

DevTools biedt nu betere ondersteuning voor het debuggen van CSS-hoeken!

Wanneer een HTML-element op je pagina de CSS-eigenschap `angle` heeft (bijvoorbeeld ` background: linear-gradient(angle, color-stop1, color-stop2) , transform: rotate(angle) ), wordt er een klokpictogram naast de hoek in het deelvenster Stijlen weergegeven. Klik op het klokpictogram om de klokoverlay in of uit te schakelen. Klik ergens in de klok of sleep de wijzer om de hoek te wijzigen!

Er zijn ook muis- en toetsenbordsneltoetsen om de hoekwaarde te wijzigen. Raadpleeg onze documentatie voor meer informatie!

Chromium-problemen: 1126178 , 1138633

Emuleer niet-ondersteunde afbeeldingstypen

DevTools heeft twee nieuwe emulaties toegevoegd aan het tabblad Rendering, waarmee je de AVIF- en WebP-afbeeldingsformaten kunt uitschakelen. Deze nieuwe emulaties maken het voor ontwikkelaars gemakkelijker om verschillende scenario's voor het laden van afbeeldingen te testen zonder van browser te hoeven wisselen.

Stel dat we de volgende HTML-code hebben om een ​​afbeelding in AVIF- en WebP-formaat weer te geven voor nieuwere browsers, met een reserve-PNG-afbeelding voor oudere browsers.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Open het tabblad 'Rendering' , selecteer 'AVIF-afbeeldingsindeling uitschakelen' en vernieuw de pagina. Beweeg de muis over de img src . De huidige image src ( currentSrc ) is nu de reserve WebP-afbeelding.

Chromium-probleem: 1130556

Simuleer de opslagquotumgrootte in het deelvenster Opslag.

Je kunt nu de opslagquotagrootte overschrijven in het deelvenster Opslag. Met deze functie kun je verschillende apparaten simuleren en het gedrag van je apps testen in scenario's met beperkte schijfruimte.

Ga naar Toepassing > Opslag , schakel het selectievakje 'Aangepast opslagquotum simuleren' in en voer een geldig getal in om het opslagquotum te simuleren.

Chromium-problemen: 945786 , 1146985

Nieuwe Web Vitals-sectie in de prestatie-paneelopnames

Bij het opnemen van optredens is er nu een optie om Web Vitals-informatie weer te geven.

Nadat u de laadprestaties hebt vastgelegd, schakelt u het selectievakje Web Vitals in het paneel Prestaties in om de nieuwe Web Vitals-strook te bekijken.

De lane toont momenteel Web Vitals-informatie zoals First Contentful Paint (FCP), Largest Contentful Paint (LCP) en Layout Shift (LS).

Bekijk web.dev/vitals voor meer informatie over hoe je de gebruikerservaring kunt optimaliseren met de Web Vitals-statistieken.

Chroomprobleem: niet van toepassing

Meld CORS-fouten in het netwerkpaneel.

DevTools geeft nu een CORS-fout weer wanneer een netwerkverzoek mislukt vanwege Cross-origin Resource Sharing (CORS).

In het paneel Netwerk ziet u de mislukte CORS-netwerkaanvraag. In de statuskolom staat 'CORS-fout' . Als u de muis over de fout beweegt, toont de tooltip nu de foutcode. Voorheen toonde DevTools alleen de algemene status '(mislukt)' voor CORS-fouten.

Dit vormt de basis voor onze volgende verbeteringen, waarmee we de CORS-problemen gedetailleerder zullen beschrijven!

Chromium-probleem: 1141824

Details van het frame bekijken updates

Informatie over isolatie tussen verschillende oorsprongen in de Frame-detailsweergave

De geïsoleerde status voor meerdere bronnen wordt nu weergegeven onder het gedeelte Beveiliging en isolatie .

In het nieuwe gedeelte over API-beschikbaarheid wordt de beschikbaarheid van SharedArrayBuffer (SAB) weergegeven, evenals of deze kunnen worden gedeeld met behulp van postMessage() .

Er verschijnt een waarschuwing dat de functionaliteit verouderd is als de SAB en postMessage() momenteel beschikbaar zijn, maar de context niet cross-origin-geïsoleerd is. Lees meer over cross-origin-isolatie en waarom dit nodig is voor functies zoals SharedArrayBuffers in dit artikel .

Chromium-probleem: 1139899

Nieuwe informatie over Web Workers in de detailweergave van het frame.

DevTools toont nu de specifieke webworkers onder het frame waarin ze zijn aangemaakt.

Vouw in het paneel Toepassing een frame met webworkers uit en selecteer vervolgens een worker in de Workers -structuur om de details van de webworker te bekijken.

Chromium-problemen: 1122507 , 1051466

Details van het vensteropenerframe weergeven voor geopende vensters

Je kunt nu de details bekijken over welk frame de opening van een ander venster heeft veroorzaakt.

Selecteer een geopend venster in de Frames -structuur om de vensterdetails te bekijken. Klik op de link 'Opener Frame' om de opener in het Elements-paneel weer te geven.

Chromium-probleem: 1107766

Open het paneel Netwerk vanuit het paneel Service Workers.

Bekijk alle routeringsinformatie van service worker (SW)-verzoeken via de nieuwe link 'Netwerkverzoeken' . Dit biedt ontwikkelaars extra context bij het debuggen van de SW.

Ga naar Toepassing > Service Workers en klik op de netwerkverzoeken van een service worker. Het paneel Netwerk wordt geopend in het onderste venster en toont alle service worker-gerelateerde verzoeken (de netwerkverzoeken worden gefilterd op "is:service-worker-intercepted" ).

Chroomprobleem: niet van toepassing

Nieuwe kopieeropties in het netwerkpaneel

Kopieer eigenschapwaarde

Met de nieuwe optie "Waarde kopiëren" in het contextmenu kunt u de eigenschapswaarde van een netwerkverzoek kopiëren.

Klik in het paneel Netwerk op een netwerkverzoek om het deelvenster Headers te openen. Klik met de rechtermuisknop op een van de eigenschappen onder deze sectie: Verzoekpayload (JSON), Formuliergegevens, Queryreeksparameters, Verzoekheaders, Antwoordheaders.

Vervolgens kunt u 'Waarde kopiëren' selecteren om de eigenschapswaarde naar uw klembord te kopiëren.

Chromium-probleem: 1132084

Kopieer de stacktrace voor de netwerkinitiator.

Klik met de rechtermuisknop op een netwerkverzoek en selecteer vervolgens 'Stacktrace kopiëren' om de stacktrace naar uw klembord te kopiëren.

Chromium-probleem: 1139615

Wasm-debugupdates

Voorbeeldweergave van de Wasm-variabelewaarde bij muisover.

Wanneer je in de WebAssembly (Wasm)-disassembler met de muis over een variabele beweegt terwijl je op een breakpoint bent gepauzeerd, toont DevTools nu de huidige waarde van de variabele.

Open in het paneel 'Bronnen ' een Wasm-bestand, plaats een breakpoint en vernieuw de pagina. Beweeg de muis over een variabele om de waarde te bekijken.

Chromium-problemen: 1058836 , 1071432

Evalueer de Wasm-variabele in de console.

Je kunt nu de Wasm-variabele in de console evalueren terwijl je op een breakpoint bent gepauzeerd.

In dit voorbeeld plaatsen we een breakpoint op de regel local.get $input . Tijdens het debuggen geeft het typen van $input in de console de huidige waarde van de variabele weer, in dit geval 4 .

Chromium-probleem: 1127914

Consistente meeteenheden voor bestands-/geheugengroottes

DevTools gebruikt nu consequent kB voor het weergeven van bestands-/geheugengroottes. Voorheen gebruikte DevTools een mix van kB (1000 bytes) en KiB (1024 bytes). Het paneel Netwerk gebruikte bijvoorbeeld voorheen "kB"-labels, maar voerde berekeningen uit met KiB, wat tot onnodige verwarring leidde.

Chromium-probleem: 1035309

Markeer pseudo-elementen in het paneel Elementen.

DevTools heeft het kleurcontrast van pseudo-elementen verhoogd, zodat je ze beter kunt herkennen.

Chromium-probleem: 1143833

Experimentele kenmerken

CSS Flexbox-debuggingtools

Flexbox-debuggingtools komen eraan!

Om te beginnen toont DevTools nu een flex badge in het Elementenpaneel voor elementen waarop display: flex is toegepast.

Daarnaast zijn er nieuwe uitlijningspictogrammen toegevoegd aan de volgende flexbox-eigenschappen:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

Bovendien zijn deze pictogrammen contextafhankelijk. De richting van het pictogram wordt aangepast aan de hand van:

• flex-direction
• direction
• writing-mode

Deze pictogrammen zijn bedoeld om u te helpen de flexbox-layout van de pagina beter te visualiseren.

Hier vindt u het ontwerpdocument met de functies van de Flexbox-tools. Binnenkort worden er meer functies toegevoegd.

Probeer het eens en laat ons weten wat je ervan vindt!

Chromium-problemen: 1144090 , 1139945

Toetsenbord sneltoetsen voor akkoorden aanpassen

DevTools biedt sinds de vorige release experimentele ondersteuning voor het aanpassen van toetsenbordshortcuts .

Je kunt nu akkoorden (ook wel sneltoetsen met meerdere toetsaanslagen genoemd) maken in de sneltoetseditor.

Ga naar Instellingen > Sneltoetsen , beweeg de muis over een opdracht en klik op de knop Bewerken (penpictogram) om de sneltoets voor akkoorden aan te passen.

Chromium-probleem: 174309

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.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

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