Wat is er nieuw in DevTools (Chrome 88)

Jecelyn Yeen

Sneller opstarten van DevTools

Het opstarten van DevTools is nu ~37% sneller in termen van JavaScript-compilatie (van 6,9 seconden naar 5 seconden)! 🎉

Het team heeft enige optimalisatie doorgevoerd om de prestatieoverhead van serialisatie, parsering en deserialisatie tijdens het opstarten te verminderen.

Er zal binnenkort een technische blogpost verschijnen waarin de implementatie in detail wordt uitgelegd. Blijf op de hoogte!

Chroomuitgave: 1029427

Nieuwe tools voor CSS-hoekvisualisatie

DevTools heeft nu betere ondersteuning voor foutopsporing in CSS-hoeken!

CSS-hoek

Wanneer op een HTML-element op uw pagina een CSS-hoek is toegepast (bijvoorbeeld background: linear-gradient(angle, color-stop1, color-stop2) , transform: rotate(angle) ), wordt er een klokpictogram weergegeven naast de hoek 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 veranderen!

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

Chroomuitgaves: 1126178 , 1138633

Emuleer niet-ondersteunde afbeeldingstypen

DevTools heeft twee nieuwe emulaties toegevoegd op het tabblad Rendering, waardoor u de AVIF- en WebP-beeldformaten 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 weer te geven voor nieuwere browsers, 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-beeldformaat uitschakelen" en vernieuw de pagina. Beweeg over de img src . De huidige afbeeldingsbron ( currentSrc ) is nu de reserve-WebP-afbeelding.

Emuleer afbeeldingstypen

Chroomuitgave: 1130556

Simuleer de grootte van de opslagquota in het deelvenster Opslag

U kunt nu de grootte van de opslagquota overschrijven in het deelvenster Opslag. Met deze functie kunt u verschillende apparaten simuleren en het gedrag van uw apps testen in scenario's met lage schijfbeschikbaarheid.

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

Simuleer de grootte van opslagquota

Chroomafgiften: 945786 , 1146985

Nieuwe Web Vitals-baan in de opnames van het prestatiepaneel

Opnames van optredens hebben nu een optie om Web Vitals-informatie weer te geven.

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

De baan 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.

Web Vitals-baan

Chroomprobleem: n.v.t

Rapporteer CORS-fouten in het netwerkpaneel

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

Bekijk in het netwerkpaneel het mislukte CORS-netwerkverzoek. De statuskolom toont "CORS-fout" . Beweeg over de fout, de tooltip toont nu de foutcode. Voorheen toonde DevTools alleen de algemene status '(mislukt)' voor CORS-fouten.

Dit legt de basis voor onze volgende verbeteringen op het gebied van een meer gedetailleerde beschrijving van de CORS-problemen!

CORS-fouten

Chroomuitgave: 1141824

Framedetails bekijken updates

Cross-origin-isolatie-informatie in de weergave Framedetails

De geïsoleerde status van cross-origin wordt nu weergegeven onder de sectie Beveiliging en isolatie .

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

Er wordt een beëindigingswaarschuwing weergegeven als de SAB en postMessage() momenteel beschikbaar zijn, maar de context niet cross-origineel geïsoleerd is. Lees in dit artikel meer over cross-origin isolatie en waarom dit nodig is voor functies zoals SharedArrayBuffers .

Cross-oorsprong informatie

Chroomuitgave: 1139899

Nieuwe Web Workers-informatie in de weergave Framedetails

DevTools geeft nu speciale webwerkers weer onder het frame dat ze maakt.

Vouw in het paneel Toepassingen een frame uit met webwerkers en selecteer vervolgens een werknemer onder de structuur Werknemers om de details van de webwerker te bekijken.

Informatie over webwerkers

Chroomafgiften: 1122507 , 1051466

Geef details van het openerframe weer voor geopende ramen

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

Selecteer een geopend venster onder de Frames- structuur om de vensterdetails te bekijken. Klik op de link Openerframe om de opener in het paneel Elementen weer te geven.

Details van het openerframe

Chroomuitgave: 1107766

Open het Netwerkpaneel vanuit het paneel Servicewerkers

Bekijk alle routeringsinformatie voor servicemedewerkers (SW) met de nieuwe link Netwerkaanvragen . Dit biedt ontwikkelaars extra context bij het debuggen van de software.

Ga naar Applicatie > Servicemedewerkers en klik op de netwerkverzoeken van een SW. Het netwerkpaneel wordt geopend in het onderste paneel en toont alle servicemedewerkergerelateerde verzoeken (de netwerkaanvragen worden gefilterd op "is:service-worker-intercepted" ).

Open het Netwerkpaneel vanuit Servicewerkers

Chroomprobleem: 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 netwerkverzoek kopiëren.

Eigenschapswaarde kopiëren

Klik in het paneel Netwerk op een netwerkverzoek om het paneel Kopteksten te openen. Klik met de rechtermuisknop op een van de eigenschappen onder deze sectie: Payload (JSON) aanvragen Formulier Gegevens Query String Parameters Request Headers Response Headers

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

Chroomuitgave: 1132084

Kopieer stacktrace voor netwerkinitiator

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

Kopieer Stacktrace

Chroomuitgave: 1139615

Wasm-foutopsporingsupdates

Bekijk een voorbeeld van de waarde van de Wasm-variabele bij mouseover

Wanneer u tijdens het demonteren van WebAssembly (Wasm) over een variabele zweeft 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. Ga naar een variabele om de waarde te zien.

Bekijk een voorbeeld van de Wasm-variabele bij mouseover

Chroomuitgaves: 1058836 , 1071432

Evalueer de Wasm-variabele in de console

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

In dit voorbeeld plaatsen we een breekpunt op de regel local.get $input . Als u tijdens het debuggen $input in de console typt, wordt de huidige waarde van de variabele geretourneerd, in dit geval is dit 4 .

Evalueer de Wasm-variabele in de console

Chroomuitgave: 1127914

Consistente maateenheden voor bestands-/geheugengroottes

DevTools gebruiken nu consequent kB voor het weergeven van bestands-/geheugengroottes. Voorheen mengde DevTools kB (1000 bytes) en KiB (1024 bytes). Het Netwerkpanel gebruikte voorheen bijvoorbeeld 'kB'-labels, maar voerde in werkelijkheid berekeningen uit met behulp van KiB, wat nodeloze verwarring veroorzaakte.

Chroomuitgave: 1035309

Markeer pseudo-elementen in het paneel Elementen

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

Markeer pseudo-elementen

Chroomuitgave: 1143833

Experimentele kenmerken

CSS Flexbox-foutopsporingstools

Flexbox-foutopsporingstools komen eraan!

Om te beginnen toont DevTools nu een flex badge in het Elementen-paneel voor elementen met display: flex op toegepast.

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

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

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

  • flex-direction
  • direction
  • writing-mode

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

CSS Flex-foutopsporing

Hier is het ontwerpdocument van de Flexbox-toolingfuncties. Meer functies zullen binnenkort worden toegevoegd.

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

Chroomafgiften: 1144090 , 1139945

Pas sneltoetsen voor akkoorden aan

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

Je kunt nu akkoorden (ook wel snelkoppelingen met meerdere toetsen genoemd) maken in de snelkoppelingseditor.

Ga naar Instellingen > Snelkoppelingen , plaats de muisaanwijzer op een commando en klik op de knop Bewerken (penpictogram) om de snelkoppeling voor akkoorden aan te passen.

Sneltoetsen voor akkoorden

Chroomuitgave: 174309

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 .