Wat is er nieuw in DevTools (Chrome 79)

Nieuwe functies voor cookies

Debug waarom een ​​cookie werd geblokkeerd

Nadat u de netwerkactiviteit hebt geregistreerd, selecteert u een netwerkbron en navigeert u vervolgens naar het bijgewerkte tabblad Cookies om te begrijpen waarom de verzoek- of reactiecookies van die bron zijn geblokkeerd. Zie Wijzigingen in het standaardgedrag zonder SameSite om te begrijpen waarom u mogelijk meer geblokkeerde cookies ziet in Chrome 76 en hoger.

Het tabblad Cookies.

Het tabblad Cookies .

  • Gele verzoekcookies zijn niet via de draad verzonden. Deze zijn standaard verborgen. Klik op uitgefilterde aanvraagcookies weergeven om ze weer te geven.
  • Gele responscookies zijn via de draad verzonden, maar niet opgeslagen.
  • Beweeg over Meer informatieinformatie om erachter te komen waarom een ​​cookie werd geblokkeerd.
  • De meeste gegevens in de tabellen Request Cookies en Response Cookies zijn afkomstig van de HTTP-headers van de bron. De gegevens Domein , Pad en Expires/Max-Age zijn afkomstig van het Chrome DevTools Protocol .

Chroomproblemen #856777 , #993843

Bekijk cookiewaarden

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

De waarde van een cookie bekijken.

De waarde van een cookie bekijken.

Chroom nummer 462370

Simuleer verschillende voorkeurskleurenschema's en voorkeuren voor verminderde beweging

Met de mediaquery 'Voorkeurskleurenschema' kunt u de stijl van uw site afstemmen op de voorkeuren van uw gebruiker. Als de query ' prefers-color-scheme: dark media' bijvoorbeeld waar is, betekent dit dat uw gebruiker zijn besturingssysteem in de donkere modus heeft gezet en de voorkeur geeft aan gebruikersinterfaces in de donkere modus.

Open het Commandomenu , voer de opdracht Rendering tonen uit en stel vervolgens de vervolgkeuzelijst CSS-mediafunctie emuleren voorkeuren-kleurenschema in om fouten op te sporen in de stijlen prefers-color-scheme: dark en prefers-color-scheme: light .

geeft de voorkeur aan kleurenschema: donker

Wanneer prefers-color-scheme: dark is ingesteld (middelste vak), toont het deelvenster Stijlen (rechtervak) de CSS die wordt toegepast wanneer de mediaquery waar is en toont de viewport de donkere modusstijlen (linkervak).

U kunt ook prefers-reduced-motion: reduce met behulp van de vervolgkeuzelijst CSS-media emuleren geeft voorkeur aan beweging naast de vervolgkeuzelijst CSS-media-functie emuleren voorkeur-kleurenschema .

Chroomnummer 1004246

Tijdzone-emulatie

Op het tabblad Sensoren kunt u nu niet alleen de geolocatie overschrijven , maar ook willekeurige tijdzones emuleren en de impact op uw webapps testen. Misschien verrassend verbetert deze nieuwe functie ook de betrouwbaarheid van geolocatie-emulatie: voorheen konden webapps locatiespoofing detecteren door de locatie te vergelijken met de lokale tijdzone van de gebruiker. Nu geolocatie- en tijdzone-emulatie zijn gekoppeld, wordt deze categorie van mismatches geëlimineerd.

Updates van codedekking

Op het tabblad Dekking kunt u ongebruikte JavaScript en CSS vinden .

Het tabblad Dekking gebruikt nu nieuwe kleuren om gebruikte en ongebruikte code weer te geven. Het is bewezen dat deze kleurencombinatie toegankelijker is voor mensen met kleurenzichtstoornissen. De rode balk aan de linkerkant vertegenwoordigt ongebruikte code en de blauwachtige balk aan de rechterkant vertegenwoordigt gebruikte code.

Met het nieuwe filtertekstvak voor dekkingstypen kunt u dekkingsinformatie filteren op type: geef alleen JavaScript-dekking weer, alleen CSS, of geef alle typen dekking weer.

Het tabblad Dekking.

Het tabblad Dekking.

In het paneel Bronnen worden codedekkingsgegevens weergegeven wanneer deze beschikbaar zijn. Als u op de rode of blauwachtige markeringen naast het regelnummer klikt, wordt het tabblad Dekking geopend en wordt 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.

Chroomnummers #1003671 , #1004185

Debug waarom er om een ​​netwerkbron is gevraagd

Nadat u de netwerkactiviteit hebt vastgelegd, selecteert u een netwerkbron en navigeert u vervolgens naar het tabblad Initiator om te begrijpen waarom de bron is opgevraagd. In de sectie Request call stack wordt de JavaScript-aanroepstack beschreven die naar het netwerkverzoek leidt.

Het tabblad Initiator.

Het tabblad Initiator .

Chroomuitgave 963183 , 842488

Console- en Bronnenpanelen respecteren opnieuw de inspringvoorkeuren

DevTools heeft lange tijd een instelling gehad om uw inspringingsvoorkeur aan te passen aan 2 spaties, 4 spaties, 8 spaties of tabbladen. Onlangs was de instelling in wezen nutteloos omdat de panelen Console en Bronnen de instelling negeerden. Deze bug is nu opgelost.

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

Chroomnummer 977394

Nieuwe snelkoppelingen 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 onderstaande regel te verplaatsen.

Chroomnummer 983874

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 .