Wat is er nieuw in DevTools (Chrome 79)

Nieuwe functies voor cookies

Fout opsporen waarom een ​​cookie is geblokkeerd

Selecteer na het registreren van netwerkactiviteit een netwerkbron en navigeer vervolgens naar het bijgewerkte tabblad Cookies om te begrijpen waarom de aanvraag- 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 kabel verzonden. Deze zijn standaard verborgen. Klik op 'Gefilterde verzoekcookies weergeven' om ze weer te geven.
  • Geel antwoord Cookies werden via de kabel verzonden maar niet opgeslagen.
  • Beweeg de muis over 'Meer informatie'informatie om te weten te komen waarom een ​​cookie is geblokkeerd.
  • De meeste gegevens in de tabellen Request Cookies en Response Cookies zijn afkomstig van de HTTP-headers van de resource. De gegevens over Domain , Path en Expires/Max-Age zijn afkomstig van het Chrome DevTools Protocol .

Chromium-problemen #856777 , #993843

Bekijk cookiewaarden

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

De waarde van een koekje bekijken.

De waarde van een koekje bekijken.

Chromium-probleem #462370

Simuleer verschillende voorkeuren voor kleurenschema's en verminderde beweging

Met de mediaquery prefers-color-scheme kunt u de stijl van uw site afstemmen op de voorkeuren van uw gebruiker. Als de mediaquery prefers-color-scheme: dark bijvoorbeeld true is, betekent dit dat uw gebruiker zijn of haar besturingssysteem heeft ingesteld op de donkere modus en de voorkeur geeft aan donkere gebruikersinterfaces.

Open het menu Opdracht , voer de opdracht Rendering weergeven uit en stel vervolgens de vervolgkeuzelijst CSS-media emuleren prefers-color-scheme in om de stijlen prefers-color-scheme: dark en prefers-color-scheme: light debuggen.

prefereert-kleurenschema: donker

Wanneer prefers-color-scheme: dark is ingesteld (middelste vak), wordt in het deelvenster Stijlen (rechter vak) de CSS weergegeven die wordt toegepast wanneer de media query true is. In het venster worden de stijlen van de donkere modus weergegeven (linker vak).

U kunt prefers-reduced-motion: reduce ook simuleren met behulp van de vervolgkeuzelijst CSS-media emuleren prefers-reduced-motion naast de vervolgkeuzelijst CSS-media emuleren prefers-color-scheme .

Chromium-probleem #1004246

Tijdzone-emulatie

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

Updates van de codedekking

Met 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. Deze kleurencombinatie is aantoonbaar toegankelijker voor mensen met kleurenblindheid. De rode balk links staat voor ongebruikte code en de blauwachtige balk rechts voor gebruikte code.

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

Het tabblad Dekking.

Het tabblad Dekking.

Het paneel Bronnen geeft codedekkingsgegevens weer wanneer deze beschikbaar zijn. Door op de rode of blauwe markeringen naast het regelnummer te klikken, 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.

Chromium-problemen #1003671 , #1004185

Fout opsporen waarom een ​​netwerkbron is aangevraagd

Selecteer na het registreren van de netwerkactiviteit een netwerkresource en navigeer vervolgens naar het tabblad Initiator om te begrijpen waarom de resource is aangevraagd. De sectie 'Aanvraag-aanroepstack' beschrijft de JavaScript-aanroepstack die voorafgaat aan de netwerkaanvraag.

Het tabblad Initiator.

Het tabblad Initiator .

Chromium-problemen 963183 , 842488

Console- en Bronpanelen respecteren opnieuw inspringvoorkeuren

DevTools had lange tijd een instelling waarmee je de inspringing kon aanpassen naar 2, 4, 8 of tabs. Onlangs was deze instelling vrijwel nutteloos omdat de panelen Console en Bronnen deze instelling negeerden. Deze bug is nu verholpen.

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

Chromium-probleem #977394

Nieuwe snelkoppelingen voor cursornavigatie

Druk op Control+P in het console- of bronpaneel 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 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.