Wat is er nieuw in DevTools (Chrome 75)

Kayce Basken
Kayce Basques
X GitHub

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 , accepteren functies als waarde. Bijvoorbeeld: filter: blur(1px) voegt een vervaging van 1 pixel toe aan een element. Bij het automatisch aanvullen van eigenschappen zoals filter vult DevTools de eigenschap nu in met een zinvolle waarde, zodat je kunt zien wat voor verandering de waarde op het element teweegbrengt.

Het oude gedrag van de automatische aanvulfunctie.

Afbeelding 1. Het oude gedrag van de automatische aanvulling. DevTools vult automatisch aan met filter: blur en er is geen verandering zichtbaar in de viewport.

Het nieuwe gedrag van de autocomplete-functie.

Afbeelding 2. Het nieuwe gedrag van de automatische aanvulling. DevTools vult automatisch aan met filter: blur(1px) en de wijziging is zichtbaar in de viewport.

Relevant Chromium-probleem: #931145

Wis sitegegevens via het opdrachtmenu.

Druk op Control + Shift + P of Command + Shift + P (Mac) om het opdrachtmenu te openen en voer vervolgens de opdracht ' Sitegegevens wissen ' uit om alle gegevens met betrekking tot de pagina te wissen, inclusief: Service workers , localStorage , sessionStorage , IndexedDB , Web SQL , cookies , cache en toepassingscache .

De opdracht 'Sitegegevens wissen'.

Afbeelding 3. De opdracht ' Sitegegevens wissen' .

Het wissen van sitegegevens is al een tijdje mogelijk via Toepassingen > Opslag wissen . De nieuwe functie in Chrome 75 is de mogelijkheid om deze opdracht vanuit het Opdrachtenmenu uit te voeren.

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

Tabblad 'Applicatie' met 'Opslag wissen' geselecteerd.

Afbeelding 4. Toepassing > Opslag wissen .

Relevant Chromium-probleem: #942503

Bekijk alle IndexedDB-databases

Voorheen kon je via Toepassing > IndexedDB alleen IndexedDB-databases van de hoofdbron bekijken. Als je bijvoorbeeld een <iframe> op je pagina had en dat <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 toont een demo die gebruikmaakt van IndexedDB, maar er zijn geen databases zichtbaar.

Afbeelding 5. Het oude gedrag. De pagina bevat een demo die gebruikmaakt van IndexedDB, 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 door de muis eroverheen te 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 niet-gecomprimeerde grootte van een bron te bekijken.

Afbeelding 7. Beweeg de muis over de kolom 'Grootte' om de niet-gecomprimeerde grootte van een bron te bekijken.

Relevant Chromium-probleem: #805429

Inline breakpoints in het breakpointvenster

Stel dat u een breakpoint toevoegt aan de volgende regel code:

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

De ontwikkelaarstools bieden al een tijdje de mogelijkheid om precies aan te geven wanneer een breakpoint moet worden gepauzeerd: 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 kon je deze drie breakpoints niet afzonderlijk beheren in het deelvenster Breakpoints . Vanaf Chrome 75 krijgt elk inline breakpoint een eigen item in het deelvenster Breakpoints .

Het oude gedrag. Er staat slechts één item in het deelvenster 'Breakpoints'.

Afbeelding 8. Het oude gedrag. Er staat slechts 1 item in het deelvenster 'Breakpoints' .

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

Afbeelding 9. Het nieuwe gedrag. Er staan ​​3 items in het deelvenster 'Breakpoints' .

Relevant Chromium-probleem: #927961

IndexedDB- en cacheresourcetellingen

De vensters IndexedDB en Cache tonen nu het totale aantal resources in een database of cache.

Totaal aantal vermeldingen in een IndexedDB-database.

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

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

Instelling om de tooltip voor gedetailleerde inspectie uit te schakelen.

Chrome 73 introduceerde gedetailleerde tooltips in de inspectiemodus .

Een gedetailleerde tooltip.

Afbeelding 11. Een gedetailleerde tooltip met informatie over kleur, lettertype, marge en contrast.

Je kunt deze gedetailleerde tooltips nu uitschakelen via Instellingen > Voorkeuren > Elementen > Gedetailleerde inspectietooltip weergeven .

Een minimalistische tooltip.

Afbeelding 12. Een minimalistische tooltip die alleen de breedte en hoogte weergeeft.

Relevant Chromium-probleem: #948417

Instelling voor het in- of 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 opende met de tabtoets, kon hij of zij er niet meer uit, omdat de tabtoets werd gebruikt voor inspringen. Om dit standaardgedrag te overschrijven en de tabtoets te gebruiken om de focus te verplaatsen, schakelt u de optie 'Tab verplaatst focus' in via Instellingen > Voorkeuren > Bronnen > 'Tab verplaatst focus inschakelen' .

Er is de laatste tijd veel werk verzet om de gebruikersinterface van DevTools beter te bedienen met het toetsenbord. Bekijk Robs artikel ' Navigeren door Chrome DevTools met ondersteunende technologie' voor meer informatie.

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .