Wat is er nieuw in DevTools (Chrome 75)

Kayce Basken

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.

Het oude autocomplete-gedrag.

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

Het nieuwe gedrag voor automatisch aanvullen.

Figuur 2 . Het nieuwe gedrag voor automatisch aanvullen. DevTools vult automatisch aan om te 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 .

Het commando Sitegegevens wissen.

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 .

Tabblad 'Toepassing' met 'Opslag wissen' geselecteerd.

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.

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

Figuur 5 . Het oude gedrag. De pagina is een demo ingesloten 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 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.

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

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 .

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

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

Het nieuwe gedrag. Er zijn drie vermeldingen 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.

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 in 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 inspectie-tooltip tonen .

Een minimale tooltip.

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 > Tabbladverplaatsingen inschakelen 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 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 .