Wat is er nieuw in DevTools (Chrome 75)

Kayce Basques

Hallo! Dit is wat er nieuw is in Chrome DevTools in Chrome 75.

Videoversie van deze pagina

Betekenisvolle vooraf ingestelde waarden bij het automatisch aanvullen van CSS-functies

Sommige CSS-eigenschappen, zoals filter , gebruiken functies voor waarden. filter: blur(1px) voegt bijvoorbeeld een vervaging van 1 pixel toe aan een knooppunt. Bij het automatisch aanvullen van eigenschappen zoals filter vult DevTools de eigenschap nu in met een betekenisvolle waarde, zodat u een voorbeeld kunt zien van wat voor soort wijziging de waarde op het knooppunt zal hebben.

Figuur 1 . Het oude autocomplete-gedrag. DevTools vult automatisch aan om te filter: blur en er is geen verandering zichtbaar in de viewport.

Figuur 2 . Het nieuwe gedrag voor automatisch aanvullen. DevTools vult automatisch aan om filter: blur(1px) en de wijziging is zichtbaar in de viewport.

Relevant Chromium-probleem: #931145

Wis locatiegegevens uit het Commandomenu

Druk op Control + Shift + P of Command + Shift + P (Mac) om het Commandomenu te openen en voer vervolgens de opdracht Sitegegevens wissen uit om alle gegevens met betrekking tot de pagina te wissen, waaronder: Servicemedewerkers , localStorage , sessionStorage , IndexedDB , Web SQL , Cookies , Cache en Applicatiecache .

Figuur 3 . Het commando Sitegegevens wissen .

Het wissen van sitegegevens is al een tijdje beschikbaar via Applicatie > Opslag wissen . De nieuwe functie in Chrome 75 is de mogelijkheid om de opdracht uit te voeren vanuit het Commandomenu.

Als u niet alle sitegegevens wilt verwijderen, kunt u bepalen welke gegevens worden verwijderd via Toepassing > Opslag wissen .

Figuur 4 . Toepassing > Opslag wissen .

Relevant Chromium-probleem: #942503

Bekijk alle IndexedDB-databases

Voorheen kon u met Applicatie > IndexedDB alleen IndexedDB-databases vanaf de hoofdoorsprong inspecteren. Als u bijvoorbeeld een <iframe> op uw pagina had en die <iframe> IndexedDB gebruikte, zou u de database(s) ervan niet kunnen zien. Vanaf Chrome 75 toont DevTools IndexedDB-databases voor alle oorsprongen.

Figuur 5 . Het oude gedrag. De pagina is een demo ingesloten die IndexedDB gebruikt, maar er zijn geen databases zichtbaar.

Figuur 6 . Het nieuwe gedrag. De databases van de demo zijn zichtbaar.

Relevant Chromium-probleem: #943770

Bekijk de ongecomprimeerde grootte van een bron bij het aanwijzen van de muis

Stel dat u netwerkactiviteit inspecteert . Uw site maakt gebruik van tekstcompressie om de overdrachtsgrootte van bronnen te verkleinen. U wilt zien hoe groot de bronnen van de pagina zijn nadat de browser deze heeft gedecomprimeerd. Voorheen was deze informatie alleen beschikbaar bij gebruik van grote verzoekrijen . Nu kunt u toegang krijgen tot deze informatie door over de kolom Grootte te bewegen.

Figuur 7 . Beweeg over de kolom Grootte om de ongecomprimeerde grootte van een resource te bekijken.

Relevant Chromium-probleem: #805429

Inline-breekpunten in het breekpuntvenster

Stel dat u een coderegelbreekpunt toevoegt aan de volgende coderegel:

document.querySelector('#dante').addEventListener('click', logWarning);

Met DevTools kun je al een tijdje specificeren wanneer het precies moet pauzeren op een breekpunt als dit: aan het begin van de regel, voordat document.querySelector('#dante') wordt aangeroepen, of vóór addEventListener('click', logWarning) wordt genoemd. Als u ze alle drie inschakelt, creëert u feitelijk drie breekpunten. Voorheen bood het deelvenster Breekpunten u niet de mogelijkheid om deze 3 breekpunten afzonderlijk te beheren. Vanaf Chrome 75 krijgt elk inline breekpunt een eigen vermelding in het deelvenster Breekpunten .

Figuur 8 . Het oude gedrag. Er is slechts één vermelding in het deelvenster Breekpunten .

Figuur 9 . Het nieuwe gedrag. Er zijn drie vermeldingen in het deelvenster Breekpunten .

Relevant Chromium-probleem: #927961

Het aantal geïndexeerde DB- en cachebronnen

De deelvensters IndexedDB en Cache geven nu het totale aantal bronnen in een database of cache aan.

Figuur 10 . Totaal aantal vermeldingen in een IndexedDB-database.

Relevante Chromium-problemen: #941197 , #930773 , #930865

Instelling voor het uitschakelen van de gedetailleerde inspectietooltip

Chrome 73 introduceerde gedetailleerde tooltips in de inspectiemodus .

Figuur 11 . Een gedetailleerde tooltip met kleur, lettertype, marge en contrast.

U kunt deze gedetailleerde tooltips nu uitschakelen via Instellingen > Voorkeuren > Elementen > Gedetailleerde inspectie-tooltip tonen .

Figuur 12 . Een minimale tooltip die alleen de breedte en hoogte weergeeft.

Relevant Chromium-probleem: #948417

Instelling voor het wisselen van tabbladinspringing in de paneeleditor Bronnen

Uit toegankelijkheidstests bleek dat er een tab-trap in de Editor aanwezig was. Zodra een toetsenbordgebruiker de Editor had geopend, kon hij er niet meer uit, omdat de Tab- toets werd gebruikt voor inspringen. Als u het standaardgedrag wilt overschrijven en Tab wilt gebruiken om de focus te verplaatsen, schakelt u Instellingen > Voorkeuren > Bronnen > Schakel tabblad verplaatsen focus in in .

Er is de laatste tijd veel werk verricht om de gebruikersinterface van DevTools zelf beter navigeerbaar te maken via het toetsenbord. Bekijk Rob's Navigate Chrome DevTools With Assistive Technology voor meer informatie.

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 .

Kayce Basques

Hallo! Dit is wat nieuw is in Chrome Devtools in Chrome 75.

Video -versie van deze pagina

Zinvolle vooraf ingestelde waarden bij het automatisch aanvullen van CSS -functies

Sommige CSS -eigenschappen, zoals filter , nemen functies voor waarden. filter: blur(1px) voegt een 1-pixel vervaging toe aan een knooppunt. Bij het automatisch aanvullen van eigenschappen zoals filter , vult Devtools de eigenschap nu met een zinvolle waarde, zodat u een voorbeeld kunt bekijken wat voor wijziging de waarde op het knooppunt zal hebben.

Figuur 1 . Het oude autocomplete gedrag. DevTools is automatisch aan filter: blur en er is geen verandering zichtbaar in de Viewport.

Figuur 2 . Het nieuwe autocomplete gedrag. DevTools is automatisch aan filter: blur(1px) en de verandering is zichtbaar in de Viewport.

Relevant chroomprobleem: #931145

Wisselgegevens wissen van het opdrachtmenu

Druk op Control + Shift + P of Command + Shift + P (Mac) om het opdrachtmenu te openen en vervolgens de opdracht Wissen Sitegegevens uit te voeren om alle gegevens met betrekking tot de pagina te wissen, waaronder: Service Workers , localStorage , sessionStorage , IndexedDB , Web SQL , Cookies , cache en applicatiecache .

Figuur 3 . De opdracht voor het duidelijk sitegegevens .

Het wissen van sitegegevens is al een tijdje beschikbaar via Application > Clear Storage . De nieuwe functie in Chrome 75 is het uitvoeren van de opdracht vanuit het opdrachtmenu.

Als u niet alle sitegegevens wilt verwijderen, kunt u bepalen welke gegevens worden verwijderd uit applicatie > opslag wissen .

Figuur 4 . Toepassing > Opslag wissen .

Relevant chroomprobleem: #942503

Bekijk alle IndexedDB -databases

Eerder Application > IndexedDB stelde u alleen in staat om indexeddb -databases van de belangrijkste oorsprong te inspecteren. Als u bijvoorbeeld een <iframe> op uw pagina had en dat <iframe> indexeddb gebruikte, zou u de database (s) niet kunnen zien. Vanaf Chrome 75 toont DevTools indexeddb -databases voor alle oorsprong.

Figuur 5 . Het oude gedrag. De pagina verloopt een demo die indexeddb gebruikt, maar er zijn geen databases zichtbaar.

Figuur 6 . Het nieuwe gedrag. De databases van de demo zijn zichtbaar.

Relevant chroomprobleem: #943770

Bekijk de niet -gecomprimeerde grootte van een bron bij Hover

Stel dat u netwerkactiviteit inspecteert . Uw site gebruikt tekstcompressie om de overdrachtsgrootte van bronnen te verminderen. U wilt zien hoe groot de bronnen van de pagina zijn nadat de browser ze niet comprimeert. Eerder was deze informatie alleen beschikbaar bij het gebruik van grote aanvraagrijen . Nu hebt u toegang tot deze informatie door de kolom Size te zweven.

Figuur 7 . Zwevend over de kolom Size om de niet -gecomprimeerde grootte van een bron te bekijken.

Relevant chroomprobleem: #805429

Inline breekpunten in het breekpuntvenster

Stel dat u een breekpunt van de code toevoegt aan de volgende regel code:

document.querySelector('#dante').addEventListener('click', logWarning);

Sinds een tijdje heeft Devtools u in staat om aan te geven wanneer het precies op een breekpunt als volgt moet pauzeren: aan het begin van de regel, vóór document.querySelector('#dante') wordt aangeroepen, of vóór addEventListener('click', logWarning) wordt genoemd. Als u alle 3 inschakelt, maakt u in wezen 3 breekpunten. Eerder gaf het breakpoints -deelvenster u niet de mogelijkheid om deze 3 breekpunten afzonderlijk te beheren. Vanaf Chrome 75 krijgt elk inline breekpunt zijn eigen invoer in het breakpoints -paneel.

Figuur 8 . Het oude gedrag. Er is slechts 1 vermelding in het breakpoints -deelvenster.

Figuur 9 . Het nieuwe gedrag. Er zijn 3 inzendingen in het breakpoints -deelvenster.

Relevant chroomprobleem: #927961

IndexedDB en cache -resource tellingen

De indexeddb- en cachepanen geven nu het totale aantal bronnen aan in een database of cache.

Figuur 10 . Totale vermeldingen in een indexeddb -database.

Relevante chroomkwesties: #941197 , #930773 , #930865

Instelling voor het uitschakelen van de gedetailleerde inspectietool

Chrome 73 introduceerde gedetailleerde tooltips in de inspectiemodus .

Figuur 11 . Een gedetailleerde tooltip met kleur, lettertype, marge en contrast.

U kunt deze gedetailleerde tooltips nu uitschakelen van instellingen > Voorkeuren > Elementen > Gedetailleerde inspectietool weergeven .

Figuur 12 . Een minimale tooltip met alleen breedte en hoogte.

Relevant chroomprobleem: #948417

Instelling voor het schakelen van tab -inspringing in de source -paneeleditor

Toegankelijkheidstests onthulden dat er een TAB -val in de editor was. Zodra een toetsenbordgebruiker in de editor is getrokken, hadden ze er geen manier van om het uit te stellen omdat de tableutel werd gebruikt voor inspringen. Om het standaardgedrag te negeren en het tabblad te gebruiken om de focus te verplaatsen, schakelt u instellingen > Voorkeuren in > Bronnen > Schakel tabblad MOVES FOCUS .

Er is onlangs veel werk geweest om de DevTools UI zelf meer toetsenbord te bevaarbaar maken. Bekijk Rob's Navigate Chrome Devtools met Assistive Technology voor meer informatie.

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 .