Wat is er nieuw in DevTools (Chrome 79)

Kayce Basken
Kayce Basques

Nieuwe functies voor cookies

Onderzoek waarom een ​​cookie werd geblokkeerd.

Nadat je netwerkactiviteit hebt vastgelegd, selecteer je een netwerkbron en ga je naar het bijgewerkte tabblad Cookies om te begrijpen waarom de aanvraag- of antwoordcookies van die bron zijn geblokkeerd. Zie Wijzigingen in het standaardgedrag zonder SameSite om te begrijpen waarom je mogelijk meer geblokkeerde cookies ziet in Chrome 76 en later.

Het tabblad Cookies.

Het tabblad Cookies .

  • Gele aanvraagcookies zijn niet verzonden. Deze zijn standaard verborgen. Klik op 'Gefilterde aanvraagcookies weergeven' om ze te tonen.
  • De gele responscookies werden via het netwerk verzonden, maar niet opgeslagen.
  • Beweeg de muis over Meer informatieinformatie om te achterhalen waarom een ​​cookie is geblokkeerd.
  • De meeste gegevens in de tabellen Request Cookies en Response Cookies zijn afkomstig uit de HTTP-headers van de bron. De gegevens Domain , Path en Expires/Max-Age zijn afkomstig van het Chrome DevTools Protocol .

Chromium-problemen #856777 , #993843

Bekijk cookie-waarden

Klik op een rij in het deelvenster Cookies om de waarde van die cookie te bekijken.

De waarde van een cookie bekijken.

De waarde van een cookie bekijken.

Chromium-probleem #462370

Simuleer verschillende voorkeuren voor kleurschema's en voorkeuren voor minder beweging.

Met de mediaquery `prefers-color-scheme` kunt u de stijl van uw website afstemmen op de voorkeuren van uw gebruiker. Als de mediaquery prefers-color-scheme: dark bijvoorbeeld waar is, betekent dit dat uw gebruiker zijn besturingssysteem op de donkere modus heeft ingesteld en de voorkeur geeft aan een donkere gebruikersinterface.

Open het opdrachtmenu , voer de opdracht 'Show Rendering' uit en stel vervolgens de vervolgkeuzelijst 'prefers-color-scheme' van de 'Emulate CSS media feature' in op de debugmodus voor uw stijlen ' prefers-color-scheme: dark en ' prefers-color-scheme: light .

voorkeurskleurenschema: donker

Wanneer prefers-color-scheme: dark is ingesteld (middelste vak), toont het deelvenster Stijlen (rechter vak) de CSS die wordt toegepast wanneer die mediaquery waar is en toont de viewport de stijlen voor de donkere modus (linker vak).

Je kunt ook prefers-reduced-motion: reduce met behulp van het vervolgkeuzemenu prefers-reduced-motion in de emulate CSS media-functie, naast het vervolgkeuzemenu prefers-color-scheme in de emulate CSS media-functie .

Chromium-probleem #1004246

Tijdzone-emulatie

Met het tabblad Sensoren kunt u nu niet alleen de geolocatie overschrijven , maar ook willekeurige tijdzones emuleren en de impact daarvan op uw webapplicaties testen. Verrassend genoeg verbetert deze nieuwe functie ook de betrouwbaarheid van de geolocatie-emulatie: voorheen konden webapplicaties locatievervalsing detecteren door de locatie te vergelijken met de lokale tijdzone van de gebruiker. Nu geolocatie en tijdzone-emulatie gekoppeld zijn, is deze categorie van onjuiste vergelijkingen geëlimineerd.

Code-dekkingsupdates

Het tabblad 'Dekking' kan je helpen ongebruikte JavaScript en CSS te vinden .

Het tabblad 'Dekking' gebruikt nu nieuwe kleuren om gebruikte en ongebruikte code weer te geven. Deze kleurencombinatie is aantoonbaar toegankelijker voor mensen met kleurenblindheid. De rode balk aan de linkerkant geeft ongebruikte code aan en de blauwe balk aan de rechterkant geeft gebruikte code aan.

Met het nieuwe filtertekstvak voor het type codedekking kunt u de dekkingsinformatie filteren op type: alleen JavaScript-dekking weergeven, alleen CSS-dekking weergeven of alle typen dekking weergeven.

Het tabblad Dekking.

Het tabblad Dekking.

Het paneel 'Bronnen' toont gegevens over de codedekking wanneer deze beschikbaar zijn. Door op de rode of blauwe markeringen naast het regelnummer te klikken, wordt het tabblad 'Dekking' geopend en het bestand gemarkeerd.

Dekkingsgegevens in het paneel Bronnen.

Dekkingsgegevens in het paneel Bronnen. Regel 8 is een voorbeeld van ongebruikte code. Regel 11 is een voorbeeld van gebruikte code.

Chromium-problemen #1003671 , #1004185

Onderzoek waarom een ​​netwerkbron is aangevraagd.

Nadat u de netwerkactiviteit hebt vastgelegd, selecteert u een netwerkbron en gaat u vervolgens naar het tabblad 'Initiator' om te begrijpen waarom de bron is aangevraagd. In het gedeelte 'Request call stack' wordt de JavaScript-aanroepstack beschreven die aan het netwerkverzoek voorafging.

Het tabblad Initiator.

Het tabblad Initiator .

Chromium-problemen 963183 , 842488

De panelen Console en Bronnen respecteren de inspringvoorkeuren weer.

DevTools bood lange tijd een instelling om de inspringing aan te passen naar 2, 4, 8 spaties of tabs. Tot voor kort was deze instelling echter vrijwel nutteloos, omdat de console- en broncodepanelen de instelling negeerden. Deze bug is nu verholpen.

Ga naar Instellingen > Voorkeuren > Bronnen > Standaard inspringing om uw voorkeur in te stellen.

Chromium-probleem #977394

Nieuwe sneltoetsen voor cursornavigatie

Druk op Control+P in het paneel Console of Bronnen om de cursor naar de regel erboven te verplaatsen. Druk op Control+N om de cursor naar de regel eronder te verplaatsen.

Chromium-probleem #983874

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