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!

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.

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.

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.

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!

Chroomuitgave: 1141824

Framedetails bekijken updates

Informatie over cross-originele isolatie 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 .

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 kader met webwerkers uit en selecteer vervolgens een werknemer onder de structuur Werknemers om de details van de webwerker te bekijken.

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.

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 SW.

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" ).

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.

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.

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 Bronnenpaneel een Wasm-bestand, plaats een breekpunt en vernieuw de pagina. Ga naar een variabele om de waarde te zien.

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 .

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.

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.

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.

Chroomuitgave: 174309

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta 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 Meer > 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 .

Jecelyn Yeen

Snellere Devtools Startup

DevTools Startup is nu ~ 37% sneller in termen van JavaScript -compilatie (van 6,9s tot 5s)! 🎉

Het team heeft wat optimalisatie gedaan om de prestatie -overhead van serialisatie, parsing en deserialisatie tijdens de startup te verminderen.

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

Chroomprobleem: 1029427

Nieuwe CSS -hoek visualisatiehulpmiddelen

DevTools heeft nu betere ondersteuning voor CSS Angle Debugging!

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

Er zijn snelkoppelingen voor muizen en toetsenbord om ook de hoekwaarde te wijzigen, bekijk onze documentatie voor meer informatie!

Chromium -problemen: 1126178 , 1138633

Emuleer niet -ondersteunde afbeeldingstypen

DevTools heeft twee nieuwe emulaties toegevoegd op het tabblad Rendering, zodat u 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 browsers te wisselen.

Stel dat we de volgende HTML -code hebben om een ​​afbeelding in AVIF en WEBP te bedienen 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 Image Format uitschakelen" en vernieuw de pagina. Hover over de img src . De huidige afbeelding SRC ( currentSrc ) is nu de fallback -webp -afbeelding.

Chroomprobleem: 1130556

Simuleren opslagquotumgrootte in het opslagvenster

U kunt nu de opslagquota -grootte in het opslagvenster overschrijven. Deze functie geeft u de mogelijkheid om verschillende apparaten te simuleren en het gedrag van uw apps te testen in scenario's met lage schijfbeschikbaarheid.

Ga naar applicatie > opslag , schakel het selectievakje Aangepast opslagquota in en voer elk geldig nummer in om het opslagquota te simuleren.

Chromium -problemen: 945786 , 1146985

Nieuwe Web Vitals Lane in de opnames van het prestatiepaneel

Prestatie -opnames hebben nu een optie om vitale informatie van webvitals weer te geven.

Nadat u uw laadprestaties hebt opgenomen, schakelt u het selectievakje Web Vitals in het prestatiepaneel in om de nieuwe Web Vitals Lane te bekijken.

De rijstrook toont momenteel Web Vitals -informatie zoals First Contentful Paint (FCP), grootste contentful verf (LCP) en lay -outverschuiving (LS).

Bekijk Web.dev/vitals voor meer informatie over het optimaliseren van gebruikerservaring met de Web Vitals -statistieken.

Chroomprobleem: nvt

Meld CORS -fouten in het netwerkpaneel

DevTools toont nu CORS-fout wanneer een netwerkverzoek is mislukt vanwege cross-origin resource sharing (CORS).

Bekijk in het netwerkpaneel het mislukte CORS -netwerkverzoek. De kolom Status toont "CORS -fout" . Beweeg over de fout, de ToolTip toont nu de foutcode. Eerder vertoonde Devtools alleen de generieke "(mislukte)" status voor CORS -fouten.

Dit legt de basis voor onze volgende verbeteringen bij het geven van meer gedetailleerde beschrijving van de CORS -problemen!

Chroomprobleem: 1141824

Framedetails Bekijk updates

ISOLATIE-informatie over kruisorigin in de weergave Framedetails

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

De sectie Nieuwe API -beschikbaarheid toont de beschikbaarheid van SharedArrayBuffer S (SAB) en of ze kunnen worden gedeeld met postMessage() .

Een afschrijvingswaarschuwing zal laten zien of de SAB en postMessage() momenteel beschikbaar is, maar de context is niet geïsoleerd door cross-origin. Meer informatie over isolatie van cross-origin en waarom het nodig is voor functies zoals SharedArrayBuffers in dit artikel .

Chromium -probleem: 1139899

Nieuwe webwerkersinformatie in de weergave Kaderdetails

DevTools toont nu speciale webmedewerkers onder het frame die ze creëert.

Vouw in het applicatiepaneel een frame uit met webmedewerkers en selecteer vervolgens een werknemer onder de werknemersboom om de gegevens van de webmedewerker te bekijken.

Chromium -problemen: 1122507 , 1051466

Display opener frame details voor geopende Windows

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

Selecteer een geopend venster onder de framesboom om de vensterdetails te bekijken. Klik op de opener frame -link om de opener in het elementenpaneel te onthullen.

Chromium -probleem: 1107766

Open het netwerkpaneel van het deelvenster Service Workers

Bekijk alle servicearbeiders (SW) Routing -informatie met de link Nieuwe netwerkaanvragen . Dit biedt ontwikkelaars toegevoegde context bij het debuggen van de SW.

Ga naar Application > Service Workers , klik op de netwerkverzoeken van een SW. Het netwerkpaneel wordt geopend in het onderste paneel met alle serviceworker gerelateerde aanvragen (de netwerkverzoeken worden gefilterd door "IS: service-werker-geïntercepteerd" ).

Chroomprobleem: nvt

Nieuwe kopie -opties in het netwerkpaneel

Kopieer de eigenschapswaarde

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

Klik in het netwerkpaneel op een netwerkverzoek om het headersvenster te openen. Klik met de rechtermuisknop op een van de eigenschappen onder deze sectie: Request Payload (JSON) formulier Data Query String Parameters Request -headers Response headers

Vervolgens kunt u de waarde kopiëren 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 vervolgens StackTrace kopiëren om de StackTrace naar uw klembord te kopiëren.

Chroomprobleem: 1139615

Wasm debugging -updates

Voorbeeld van wasme variabele waarde op mouseover

Bij het zweven van een variabele in WebAssembly (WASM) demontage terwijl hij op een breekpunt is gepauzeerd, toont DevTools nu de variabele huidige waarde.

Open in het bronnenpaneel een WADM -bestand, zet een breekpunt en ververs de pagina. Beweeg naar een variabele om de waarde te zien.

Chromium -problemen: 1058836 , 1071432

Evalueer de wasme variabele in de console

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

In dit voorbeeld hebben we een breekpunt op de lijn local.get $input . Tijdens het debuggen zal Type $input in de console de huidige waarde van de variabele, die in dit geval 4 is.

Chroomprobleem: 1127914

Consistente meeteenheden voor bestands-/geheugengroottes

DevTools gebruiken nu consequent KB voor het weergeven van bestands-/geheugengroottes. Eerder devtools gemengde KB (1000 bytes) en KIB (1024 bytes). Het netwerkpaneel gebruikte bijvoorbeeld eerder "KB" -labels, maar voerde eigenlijk berekeningen uit met behulp van KIB, wat onnodige verwarring veroorzaakte.

Chroomprobleem: 1035309

Markeer pseudo -elementen in het elementenpaneel

DevTools heeft het kleurcontrast van pseudo -elementen verhoogd om je te helpen ze beter te zien.

Chroomprobleem: 1143833

Experimentele kenmerken

CSS Flexbox Debugging Tools

Flexbox debugging -tools komen eraan!

Om te beginnen toont Devtools nu een flex -badge in het elementenpaneel voor elementen met display: flex erop toegepast.

Daarnaast worden nieuwe uitlijningspictogrammen toegevoegd in de volgende flexbox -eigenschappen:

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

Bovendien zijn deze pictogrammen contextbewust. De pictogramrichting wordt aangepast volgens:

• flex-direction
• direction
• writing-mode

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

Hier is het ontwerpdocum van de Flexbox -tools -functies. Binnenkort worden er meer functies toegevoegd.

Probeer het eens en laat ons weten wat je denkt!

Chromium -problemen: 1144090 , 1139945

Pas de sneltoetsen van de akkoorden aan

DevTools voegde experimentele ondersteuning toe voor het aanpassen van sneltoetsen sinds de laatste release.

U kunt nu akkoorden (aka multi-keypress snelkoppelingen) maken in de snelkoppelingseditor.

Ga naar instellingen > Snelkoppelingen , zweef op een opdracht en klik op de knop Bewerken (PEN -pictogram) om de snelkoppeling van de akkoorden aan te passen.

Chromium Issue: 174309

Download de voorbeeldkanalen

Overweeg het gebruik van de Chrome Canary , Dev of Beta als uw standaardontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, test geavanceerde webplatform-API's en vinden 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 dat verband houdt met Devtools.

• Dien een suggestie of feedback aan ons via CRBUG.com .
• Meld een probleem met DevTools met behulp van de meer opties > Help > melden een devTools -problemen in devtools.
• Tweet op @chromedevtools .
• Laat reacties achter op ons wat nieuw is in devtools YouTube -video's of devtools tips YouTube -video's .

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .

Jecelyn Yeen

Faster DevTools startup

DevTools startup now is ~37% faster in terms of JavaScript compilation (from 6.9s down to 5s)! 🎉

The team did some optimization to reduce the performance overhead of serialisation, parsing and deserialisation during the startup.

There will be an upcoming engineering blog post explaining the implementation in detail. Blijf op de hoogte!

Chromium issue: 1029427

New CSS angle visualization tools

DevTools now has better support for CSS angle debugging!

When an HTML element on your page has CSS angle applied to it (eg background: linear-gradient(angle, color-stop1, color-stop2) , transform: rotate(angle) ), a clock icon is shown next to the angle in the Styles pane. Click on the clock icon to toggle the clock overlay. Click anywhere in the clock or drag the needle to change the angle!

There are mouse and keyboard shortcuts to change the angle value as well, check out our documentation to learn more!

Chromium issues: 1126178 , 1138633

Emulate unsupported image types

DevTools added two new emulations in the Rendering tab, allowing you to disable AVIF and WebP image formats. These new emulations make it easier for developers to test different image loading scenarios without having to switch browsers.

Suppose we have the following HTML code to serve an image in AVIF and WebP for newer browsers, with a fallback PNG image for older 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 the Rendering tab, select "Disable AVIF image format" and refresh the page. Hover over the img src . The current image src ( currentSrc ) is now the fallback WebP image.

Chromium issue: 1130556

Simulate storage quota size in the Storage pane

You can now override storage quota size in the Storage pane. This feature gives you the ability to simulate different devices and test the behavior of your apps in low disk availability scenarios.

Go to Application > Storage , enable the Simulate custom storage quota checkbox, and enter any valid number to simulate the storage quota.

Chromium issues: 945786 , 1146985

New Web Vitals lane in the Performance panel recordings

Performance recordings now have an option to display Web Vitals information.

After recording your load performance, enable the Web Vitals checkbox in the Performance panel to view the new Web Vitals lane.

The lane currently displays Web Vitals information such as First Contentful Paint (FCP), Largest Contentful Paint (LCP) and Layout Shift (LS).

Check out web.dev/vitals to learn more about how to optimize user experience with the Web Vitals metrics.

Chromium issue: N/A

Report CORS errors in the Network panel

DevTools now shows CORS error when a network request is failed due to Cross-origin Resource Sharing (CORS).

In the Network panel, observe the failed CORS network request. The status column shows "CORS error" . Hover over on the error, the tooltip now shows the error code. Previously, DevTools only showed generic "(failed)" status for CORS errors.

This lays the foundation for our next enhancements on providing more detailed description of the CORS problems!

Chromium issue: 1141824

Frame details view updates

Cross-origin isolation information in the Frame details view

The cross-origin isolated status is now displayed under the Security & Isolation section.

The new API availability section displays the availability of SharedArrayBuffer s (SAB) and whether they can be shared using postMessage() .

A deprecation warning will show if the SAB and postMessage() is currently available, but the context is not cross-origin isolated. Learn more about cross-origin isolation and why it will be required for features like SharedArrayBuffers in this article .

Chromium issue: 1139899

New Web Workers information in the Frame details view

DevTools now displays dedicated web workers under the frame which creates them.

In the Application panel, expand a frame with web workers, then select a worker under the Workers tree to view the web worker's details.

Chromium issues: 1122507 , 1051466

Display opener frame details for opened windows

You can now view the details about which frame caused the opening of another Window.

Select an opened window under the Frames tree to view the window details. Click on the Opener Frame link to reveal the opener in the Elements panel.

Chromium issue: 1107766

Open Network panel from the Service Workers pane

View all service worker (SW) request routing information with the new Network requests link. This provides developers added context when debugging the SW.

Go to Application > Service Workers , click on the Network requests of a SW. The Network panel is opened in the bottom panel displaying all service worker related requests (the network requests are filtered by "is:service-worker-intercepted" ).

Chromium issue: N/A

New copy options in the Network panel

Copy property value

The new "Copy value" option in the context menu lets you copy the property value of a network request.

In the Network panel, click on a network request to open the Headers pane. Right click on one of the properties under these section: Request payload (JSON) Form Data Query String Parameters Request Headers Response Headers

Then, you can select Copy value to copy the property value to your clipboard.

Chromium issue: 1132084

Copy stacktrace for network initiator

Right-click a network request, then select Copy stacktrace to copy the stacktrace to your clipboard.

Chromium issue: 1139615

Wasm debugging updates

Preview Wasm variable value on mouseover

When hovering over a variable in WebAssembly (Wasm) disassembly while paused on a breakpoint, DevTools now shows the variable current value.

In the Sources panel, open a Wasm file, put a breakpoint and refresh the page. Hover to a variable to see the value.

Chromium issues: 1058836 , 1071432

Evaluate Wasm variable in the Console

You can now evaluate Wasm variable in the Console while paused on a breakpoint.

In this example, we put a breakpoint on the line local.get $input . When debugging, type $input in the Console will return the current value of the variable, which is 4 in this case.

Chromium issue: 1127914

Consistent units of measurement for file/memory sizes

DevTools now consistently use kB for displaying file/memory sizes. Previously DevTools mixed kB (1000 bytes) and KiB (1024 bytes). For example, the Network panel previously used "kB" labels but actually performed calculations using KiB, which caused needless confusion.

Chromium issue: 1035309

Highlight pseudo elements in the Elements panel

DevTools has increased the color contrast of pseudo elements to help you better spot them.

Chromium issue: 1143833

Experimental features

CSS Flexbox debugging tools

Flexbox debugging tools are coming!

For starters, DevTools now shows a flex badge in the Elements panel for elements with display: flex applied to it.

Beside that, new alignment icons are added in the following flexbox properties:

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

On top of that, these icons are context-aware. The icon direction will be adjusted according to:

• flex-direction
• direction
• writing-mode

These icons aim to help you better visualize the flexbox layout of the page.

Here is the design doc of the Flexbox tooling features. More features will be added soon.

Give it a try and let us know what you think!

Chromium issues: 1144090 , 1139945

Customize chords keyboard shortcuts

DevTools added experimental support for customize keyboard shortcuts since last release.

You can now create chords (aka multi-keypress shortcuts) in the shortcut editor.

Go to Settings > Shortcuts , hovering on a command and click the Edit button (pen icon) to customize the chords shortcut.

Chromium issue: 174309

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.