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 weergeven uit en stel vervolgens de vervolgkeuzelijst CSS-mediafunctie emuleren voorkeuren-kleurenschema in om fouten op te sporen in 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. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .

Chroom 126

Chroom 125

Chroom 124

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

,

Nieuwe functies voor cookies

Debug waarom een ​​koekje is geblokkeerd

Selecteer na het opnemen van netwerkactiviteit een netwerkbron en navigeer vervolgens naar het tabblad bijgewerkte cookies om te begrijpen waarom het verzoek of de responscookies van die bron werden geblokkeerd. Zie wijzigingen in het standaardgedrag zonder Samesite om te begrijpen waarom u mogelijk meer geblokkeerde cookies ziet in Chrome 76 en later.

Het tabblad Cookies.

Het tabblad Cookies .

  • Gele aanvraagkoekjes werden niet over de draad verzonden. Deze zijn standaard verborgen. Klik op Gefilterde aanvraagcookies weergeven om ze te laten zien.
  • Gele responskoekjes werden over de draad gestuurd maar niet opgeslagen.
  • Beweeg over meer informatieinformatie Om te leren waarom een ​​koekje werd geblokkeerd.
  • De meeste gegevens in de aanvraagcookies en responscookiestabellen zijn afkomstig van de HTTP -headers van de bron. De gegevens van het domein , de pad en het versnellen/max-leeftijd zijn afkomstig van het Chrome DevTools-protocol .

Chromium -problemen #856777 , #993843

Bekijk cookie -waarden

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

De waarde van een cookie bekijken.

De waarde van een cookie bekijken.

Chromium Issue #462370

Simuleer verschillende voorkeurs-color-Scheme en de voorkeurs-gereduceerde motie-voorkeuren

Met de Media Query van de voorkeur-Color-Scheme kunt u de stijl van uw site matchen met de voorkeuren van uw gebruiker. Als bijvoorbeeld de prefers-color-scheme: dark Media Query waar is, betekent dit dat uw gebruiker zijn besturingssysteem op de donkere modus heeft ingesteld en de voorkeur geeft aan de Dark Mode UIS.

Open het opdrachtmenu , voer de opdracht show rendering uit en stel vervolgens de emulate CSS Media-functie voorkeur in-Color-Scheme- dropdown in om uw prefers-color-scheme: dark and prefers-color-scheme: light Styles te debuggen.

Prefers-Color-Scheme: Dark

Wanneer prefers-color-scheme: dark is ingesteld (Middle Box), toont het Styles-paneel (rechterbox) de CSS die wordt toegepast wanneer die media-query waar is en de Viewport de Dark Mode-stijlen toont (linksbox).

U kunt ook prefers-reduced-motion: reduce met behulp van de emulate CSS Media-functie Prefers-gereduceerde-motion dropdown naast de emulate CSS Media-functie Prefers-Color-Scheme dropdown.

Chromium Issue #1004246

Tijdzone -emulatie

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

Updates van de codedekking

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

Het tabblad Dekking maakt nu gebruik van nieuwe kleuren om gebruikte en ongebruikte code weer te geven. Deze kleurencombinatie is bewezen toegankelijker te zijn voor mensen met tekortkomingen in de kleur zicht. De rode balk aan de linkerkant vertegenwoordigt ongebruikte code en de blauwachtige balk rechts vertegenwoordigt de gebruikte code.

Met het tekstvak met het nieuwe dekkingstype -filter kunt u filteren voor dekkingsinformatie op het type: alleen JavaScript -dekking weergeven, alleen CSS of alle soorten dekking weergeven.

Het tabblad dekking.

Het tabblad dekking.

Het paneel Bronnen geeft code -dekkingsgegevens weer wanneer deze beschikbaar zijn. Klik op de rode of blauwachtige markeringen naast het regelnummer opent het tabblad Dekking en markeert het bestand.

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

Debug waarom een ​​netwerkbron is gevraagd

Selecteer na het opnemen van netwerkactiviteit een netwerkbron en navigeer vervolgens naar het tabblad Initiator om te begrijpen waarom de bron is aangevraagd. De sectie Request Call Stack beschrijft de JavaScript -oproepstapel die leidt naar het netwerkverzoek.

Het tabblad Initiator.

Het tabblad Initiator .

Chromium -problemen 963183 , 842488

Console- en bronnen Panelen respecteren opnieuw inspringende voorkeuren

Lange tijd heeft Devtools een instelling gehad om uw inspringingsvoorkeur aan te passen aan 2 ruimtes, 4 ruimtes, 8 ruimtes of tabbladen. Onlangs was de setting in wezen nutteloos omdat de console- en bronnenpanelen de setting negeerden. Deze bug is nu opgelost.

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

Chromium Issue #977394

Nieuwe snelkoppelingen voor cursornavigatie

Druk op besturing+P in de console- of bronnenpanelen om uw cursor naar de lijn hierboven te verplaatsen. Druk op controle+n om uw cursor naar de onderstaande lijn te verplaatsen.

Chromium Issue #983874

Download de voorbeeldkanalen

Overweeg het gebruik van de Chrome Canary , Dev of Beta als uw standaardontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, test geavanceerde webplatform-API's en vinden problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome Devtools -team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders dat verband houdt met Devtools.

  • Dien een suggestie of feedback aan ons via CRBUG.com .
  • Meld een probleem met DevTools met behulp van de meer optiesMeer > Help > melden een devTools -problemen in devtools.
  • Tweet op @chromedevtools .
  • Laat reacties achter op ons wat nieuw is in devtools YouTube -video's of devtools tips YouTube -video's .

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 werd geannuleerd .

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59