Wat is er nieuw in DevTools (Chrome 75)

Kayce Basken

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

Videoversie van deze pagina

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

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

Het oude automatisch aanvullen-gedrag.

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

Het nieuwe automatisch aanvullen-gedrag.

Figuur 2. Het nieuwe autoaanvullen. DevTools vult automatisch aan volgens filter: blur(1px) en de wijziging is zichtbaar in de viewport.

Relevant Chromium-probleem: #931145

Sitegegevens wissen via het opdrachtmenu

Druk op Control + Shift + P of Command + Shift + P (Mac) om het opdrachtmenu te openen en voer vervolgens de opdracht Clear Site Data uit om alle gegevens met betrekking tot de pagina te wissen, waaronder: Service workers , localStorage , sessionStorage , IndexedDB , Web SQL , Cookies , Cache en Application Cache .

De opdracht Sitegegevens wissen.

Figuur 3. De opdracht Sitegegevens wissen .

Het wissen van sitegegevens is al een tijdje mogelijk via Toepassing > Opslag wissen . De nieuwe functie in Chrome 75 is dat je de opdracht kunt uitvoeren via het opdrachtmenu.

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

Tabblad 'Toepassing' met 'Opslag wissen' geselecteerd.

Figuur 4. Toepassing > Opslag wissen .

Relevant Chromium-probleem: #942503

Bekijk alle IndexedDB-databases

Voorheen kon je met Application > IndexedDB alleen IndexedDB-databases inspecteren vanaf de hoofdbron. Als je bijvoorbeeld een <iframe> op je pagina had staan ​​en die <iframe> IndexedDB gebruikte, kon je de database(s) ervan niet zien. Vanaf Chrome 75 toont DevTools IndexedDB-databases voor alle bronnen.

Het oude gedrag. De pagina embedt een demo die IndexedDB gebruikt, maar er zijn geen databases zichtbaar.

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

Het nieuwe gedrag. De databases van de demo zijn 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 eroverheen bewegen

Stel dat u netwerkactiviteit inspecteert . Uw site gebruikt tekstcompressie om de overdrachtsgrootte van bronnen te verkleinen. U wilt zien hoe groot de bronnen van de pagina zijn nadat de browser ze heeft gedecomprimeerd. Voorheen was deze informatie alleen beschikbaar bij gebruik van grote aanvraagrijen . Nu kunt u deze informatie bekijken door met de muis over de kolom 'Grootte' te bewegen.

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

Figuur 7. Beweeg de muis 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 regel code-breekpunt toevoegt aan de volgende regel code:

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

DevTools biedt je al een tijdje de mogelijkheid om aan te geven wanneer er precies gepauzeerd moet worden op een breakpoint, zoals hier: aan het begin van de regel, voordat document.querySelector('#dante') wordt aangeroepen, of voordat addEventListener('click', logWarning) wordt aangeroepen. Als je alle drie inschakelt, creëer je in feite drie breakpoints. Voorheen bood het venster Breakpoints je niet de mogelijkheid om deze drie breakpoints afzonderlijk te beheren. Vanaf Chrome 75 krijgt elk inline breakpoint een eigen vermelding in het venster Breakpoints .

Het oude gedrag. Er staat maar één item in het deelvenster Breekpunten.

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

Het nieuwe gedrag. Er staan ​​3 items in het deelvenster Breekpunten.

Figuur 9. Het nieuwe gedrag. Er staan ​​3 items in het deelvenster Breekpunten .

Relevant Chromium-probleem: #927961

Aantallen geïndexeerde DB- en cachebronnen

In de deelvensters IndexedDB en Cache wordt nu het totale aantal bronnen in een database of cache weergegeven.

Totaal aantal vermeldingen in een IndexedDB-database.

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 voor de inspectiemodus .

Een gedetailleerde tooltip.

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

U kunt deze gedetailleerde tooltips nu uitschakelen via Instellingen > Voorkeuren > Elementen > Gedetailleerde inspectietooltips weergeven .

Een minimale tooltip.

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

Relevant Chromium-probleem: #948417

Instelling voor het in-/uitschakelen van tab-inspringing in de editor van het Bronnenpaneel

Uit toegankelijkheidstests bleek dat er een tab-val in de Editor zat. Zodra een toetsenbordgebruiker de Editor had geopend met de Tab-toets, kon hij of zij deze niet meer verlaten, omdat de Tab- toets werd gebruikt voor inspringen. Om het standaardgedrag te negeren en de Tab-toets te gebruiken om de focus te verplaatsen, schakelt u Instellingen > Voorkeuren > Bronnen > Tab-verplaatsing focus inschakelen in .

Er is de laatste tijd veel werk verzet om de DevTools-gebruikersinterface zelf beter te kunnen navigeren met het toetsenbord. Bekijk Robs artikel Navigate Chrome DevTools With Assistive Technology voor meer informatie.

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.

Wat is er nieuw in DevTools

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