Wat is er nieuw in DevTools (Chrome 81)

Kayce Basken
Kayce Basques

Moto G4-ondersteuning in apparaatmodus

Nadat je de apparaatwerkbalk hebt ingeschakeld, kun je nu de afmetingen van een Moto G4-viewport simuleren vanuit de apparatenlijst .

Het simuleren van een Moto G4-viewport

Klik op 'Apparaatkader weergeven' om de hardware van de Moto G4 rondom het weergavegebied te tonen.

De hardware van de Moto G4 wordt getoond.

Gerelateerde functies:

  • Open het opdrachtmenu en voer de opdracht Capture screenshot uit om een ​​schermafbeelding te maken van het weergavegebied waarin de Moto G4-hardware zichtbaar is (nadat u 'Apparaatkader weergeven' hebt ingeschakeld).
  • Beperk de netwerk- en CPU-belasting om de surfomstandigheden van een mobiele gebruiker nauwkeuriger te simuleren.

Chromium-probleem #924693

Updates met betrekking tot cookies

Geblokkeerde cookies in het deelvenster Cookies

In het deelvenster Cookies in het toepassingspaneel worden geblokkeerde cookies nu geel gekleurd.

Geblokkeerde cookies in het deelvenster Cookies van het toepassingspaneel

Zie ook Debuggen waarom een ​​cookie is geblokkeerd om te leren hoe u een vergelijkbare gebruikersinterface vanuit het netwerkpaneel kunt openen.

Chromium-probleem #1030258

Prioriteit van cookies in het cookiepaneel

De cookietabellen in de panelen Netwerk en Applicatie bevatten nu een kolom Prioriteit .

Chromium-probleem #1026879

Alle cookiewaarden bewerken

Alle cellen in de tabel Cookies zijn nu bewerkbaar, behalve de cellen in de kolom Grootte , omdat die kolom de netwerkgrootte van de cookie in bytes weergeeft. Zie Velden voor een uitleg van elke kolom.

Een cookie-waarde bewerken

Kopieer dit als Node.js fetch om cookiegegevens mee te nemen.

Klik met de rechtermuisknop op een netwerkverzoek en selecteer Kopiëren > Kopiëren als Node.js fetch om een fetch expressie te verkrijgen die cookiegegevens bevat.

Kopiëren als Node.js fetch

Chromium-probleem #1029826

Nauwkeurigere webapp-manifestpictogrammen

Voorheen voerde het Manifest-paneel in het Toepassingspaneel zelf verzoeken uit om de manifestpictogrammen van de web-app weer te geven. DevTools toont nu exact hetzelfde manifestpictogram als Chrome gebruikt.

Pictogrammen in het manifestvenster

Chromium-probleem #985402

Beweeg de muis over CSS- content om niet-geëscapte waarden te zien.

Beweeg de muis over de waarde van een content om de niet-geëscapte versie van de waarde te zien.

In deze demo ziet u bijvoorbeeld een ontsnapte tekenreeks in het deelvenster Stijlen wanneer u het pseudo-element p::after inspecteert:

De ontsnapte tekenreeks

Als je met de muis over de content beweegt, zie je de niet-geëscapte waarde:

De niet-ontsnapte waarde

Gedetailleerdere foutmeldingen in de bronmap worden weergegeven in de console.

De console geeft nu meer details over waarom een ​​bronkaart niet geladen of geparseerd kon worden. Voorheen gaf de console alleen een foutmelding zonder uitleg over wat er mis was gegaan.

Een foutmelding bij het laden van de bronkaart in de console.

Instelling om te voorkomen dat er voorbij het einde van een bestand wordt gescrold.

Open Instellingen en schakel vervolgens Voorkeuren > Bronnen > Scrollen voorbij het einde van het bestand toestaan ​​uit om het standaardgedrag van de gebruikersinterface uit te schakelen waarmee je in het paneel Bronnen ver voorbij het einde van een bestand kunt scrollen.

Hier is een GIF van de functie .

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