Wat is er nieuw in DevTools (Chrome 88)

Jecelyn Yeen

Snellere DevTools-opstart

DevTools startup is nu ~37% sneller op het gebied van JavaScript-compilatie (van 6,9 seconden naar 5 seconden)! 🎉

Het team voerde een aantal optimalisaties door om de prestatieoverhead van serialisatie, parsing en deserialisatie tijdens het opstarten te verminderen.

Er komt binnenkort een technische blogpost waarin de implementatie gedetailleerd wordt uitgelegd. Blijf op de hoogte!

Chromium-probleem: 1029427

Nieuwe CSS-hoekvisualisatietools

DevTools biedt nu betere ondersteuning voor CSS-hoekdebuggen!

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

U kunt de hoekwaarde ook met behulp van sneltoetsen met de muis en het toetsenbord wijzigen. Raadpleeg onze documentatie voor meer informatie!

Chromium-problemen: 1126178 , 1138633

Niet-ondersteunde afbeeldingstypen emuleren

DevTools heeft twee nieuwe emulaties toegevoegd aan het tabblad Rendering, waarmee u 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 voor nieuwere browsers te serveren, met een fallback 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 afbeelding src ( currentSrc ) is nu de fallback WebP-afbeelding.

Chromium-probleem: 1130556

Simuleer de opslagquotumgrootte in het opslagpaneel

U kunt nu de opslagquotagrootte overschrijven in het deelvenster Opslag. Deze functie biedt u de mogelijkheid om verschillende apparaten te simuleren en het gedrag van uw apps te testen in scenario's met een lage schijfbeschikbaarheid.

Ga naar Toepassing > Opslag , schakel het selectievakje Aangepaste opslagquota simuleren in en voer een geldig getal in om de opslagquota te simuleren.

Chromium-problemen: 945786 , 1146985

Nieuwe Web Vitals-strook in de opnames van het Prestatiepaneel

Er is nu een optie beschikbaar om Web Vitals-informatie weer te geven bij prestatie-opnamen.

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

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

Ga naar web.dev/vitals voor meer informatie over hoe u de gebruikerservaring kunt optimaliseren met de Web Vitals-statistieken.

Chromium-probleem: n.v.t.

CORS-fouten melden in het paneel Netwerk

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

Bekijk in het paneel Netwerk de mislukte CORS-netwerkaanvraag. De statuskolom toont "CORS-fout" . Beweeg de muisaanwijzer over de fout; de tooltip toont nu de foutcode. Voorheen gaf DevTools alleen de algemene status "(mislukt)" weer voor CORS-fouten.

Hiermee leggen we de basis voor onze volgende verbeteringen, die een meer gedetailleerde beschrijving van de CORS-problemen zullen bieden!

Chromium-probleem: 1141824

Updates voor het weergeven van framedetails

Informatie over isolatie tussen oorsprongen in het framedetailsoverzicht

De cross-origin-isolatiestatus wordt nu weergegeven onder het gedeelte Beveiliging en isolatie .

In de nieuwe sectie API-beschikbaarheid wordt de beschikbaarheid van SharedArrayBuffer (SAB) weergegeven en of deze kunnen worden gedeeld met behulp van postMessage() .

Een waarschuwing over veroudering wordt weergegeven 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 vereist is voor functies zoals SharedArrayBuffers in dit artikel .

Chromium-probleem: 1139899

Informatie over nieuwe webworkers in het framedetailsoverzicht

DevTools geeft nu speciale webworkers weer onder het frame waarmee ze worden aangemaakt.

Vouw in het paneel Toepassing een kader met webworkers uit en selecteer vervolgens een worker onder de boom Workers om de details van de webworkers te bekijken.

Chromium-problemen: 1122507 , 1051466

Details van het openerframe weergeven voor geopende vensters

U kunt nu de details bekijken van welk frame ervoor zorgde dat een ander venster werd geopend.

Selecteer een geopend venster in de Frames- boom om de vensterdetails te bekijken. Klik op de link Opener Frame om de opener in het Elementenpaneel te tonen.

Chromium-probleem: 1107766

Open het netwerkpaneel vanuit het deelvenster Service Workers

Bekijk alle routeringsinformatie voor service worker (SW)-verzoeken met 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 software. Het netwerkpaneel wordt geopend in het onderste paneel en toont alle service worker-gerelateerde verzoeken (de netwerkverzoeken worden gefilterd op "is:service-worker-intercepted" ).

Chromium-probleem: n.v.t.

Nieuwe kopieeropties in het netwerkpaneel

Eigenschapswaarde kopiëren

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

Klik in het paneel Netwerk op een netwerkaanvraag om het deelvenster Kopteksten te openen. Klik met de rechtermuisknop op een van de eigenschappen onder deze sectie: Aanvraaglading (JSON) Formuliergegevens Queryreeksparameters Aanvraagkopteksten Antwoordkopteksten

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

Chromium-probleem: 1132084

Kopieer stacktrace voor netwerkinitiator

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

Chromium-probleem: 1139615

Wasm debug-updates

Voorbeeld van de waarde van de Wasm-variabele bij muisbeweging

Wanneer u de muisaanwijzer boven een variabele houdt tijdens het disassembleren van WebAssembly (Wasm) terwijl u op een breekpunt bent gepauzeerd, toont DevTools nu de huidige waarde van de variabele.

Open in het paneel Bronnen een Wasm-bestand, plaats een breekpunt 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

U kunt nu de Wasm-variabele evalueren in de console terwijl u gepauzeerd bent op een breekpunt.

In dit voorbeeld plaatsen we een breekpunt op de regel local.get $input . Typ $input in de console om tijdens het debuggen de huidige waarde van de variabele te retourneren, in dit geval 4 .

Chromium-probleem: 1127914

Consistente meeteenheden voor bestands-/geheugengroottes

DevTools gebruiken nu consequent kB voor het weergeven van bestands-/geheugengroottes. Voorheen combineerde DevTools kB (1000 bytes) met KiB (1024 bytes). Zo gebruikte het Netwerkpaneel voorheen de labels "kB", maar werden de berekeningen uitgevoerd met KiB, wat onnodige verwarring veroorzaakte.

Chromium-probleem: 1035309

Pseudo-elementen markeren in het Elementenpaneel

DevTools heeft het kleurcontrast van pseudo-elementen vergroot, zodat u ze beter kunt herkennen.

Chromium-probleem: 1143833

Experimentele kenmerken

CSS Flexbox-foutopsporingshulpmiddelen

Flexbox-foutopsporingstools zijn beschikbaar!

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 in de volgende flexboxeigenschappen:

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

Bovendien zijn deze iconen contextbewust. De richting van de iconen wordt aangepast op basis van:

• flex-direction
• direction
• writing-mode

Deze pictogrammen zijn bedoeld om u een beter beeld te geven van de flexbox-indeling van de pagina.

Hier is het ontwerpdocument van de Flexbox-toolingfuncties. Binnenkort worden er meer functies toegevoegd.

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

Chromium-problemen: 1144090 , 1139945

Pas sneltoetsen voor akkoorden aan

DevTools heeft sinds de laatste release experimentele ondersteuning toegevoegd voor het aanpassen van sneltoetsen .

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

Ga naar Instellingen > Snelkoppelingen , beweeg de muis over een opdracht en klik op de knop Bewerken (pen-icoon) om de snelkoppeling voor akkoorden aan te passen.

Chromium-probleem: 174309

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.

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles wat in de serie Wat is er nieuw in DevTools is behandeld.