Wat is er nieuw in DevTools (Chrome 81)

Moto G4-ondersteuning in apparaatmodus

Nadat u de Apparaatwerkbalk hebt ingeschakeld, kunt u nu de afmetingen van een Moto G4-viewport simuleren vanuit de Apparaatlijst .

Een Moto G4-viewport simuleren

Klik op Apparaatframe tonen om de Moto G4-hardware rond de viewport weer te geven.

De Moto G4-hardware wordt getoond

Gerelateerde kenmerken:

  • Open het Commandomenu en voer de opdracht Capture screenshot uit om een ​​screenshot te maken van de viewport die de Moto G4-hardware bevat (nadat Show Device Frame is ingeschakeld).
  • Geef gas aan het netwerk en de CPU om de surfomstandigheden van een mobiele gebruiker nauwkeuriger te simuleren.

Chroomnummer 924693

Cookie-gerelateerde updates

Geblokkeerde cookies in het Cookies-paneel

Het Cookies-paneel in het Applicatiepaneel kleurt geblokkeerde cookies nu met een gele achtergrond.

Geblokkeerde cookies in het Cookies-paneel van het Applicatiepaneel

Zie ook Foutopsporing waarom een ​​cookie werd geblokkeerd om te leren hoe u toegang krijgt tot een vergelijkbare gebruikersinterface vanuit het netwerkpaneel.

Chroom nummer 1030258

Cookieprioriteit in het Cookie-paneel

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

Chroom nummer 1026879

Bewerk alle cookiewaarden

Alle cellen in de Cookie-tabellen kunnen nu worden bewerkt, behalve de cellen in de kolom Grootte , omdat die kolom de netwerkgrootte van de cookie weergeeft, in bytes. Zie Velden voor een uitleg van elke kolom.

Een cookiewaarde bewerken

Kopieer terwijl Node.js wordt opgehaald om cookiegegevens op te nemen

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

Kopieer terwijl Node.js wordt opgehaald

Chroom nummer 1029826

Nauwkeuriger manifestpictogrammen voor webapps

Voorheen voerde het paneel Manifest in het paneel Applicaties zijn eigen verzoeken uit om manifestpictogrammen van webapps weer te geven. DevTools toont nu exact hetzelfde manifestpictogram dat Chrome gebruikt.

Pictogrammen in het manifestvenster

Chroomnummer 985402

Beweeg de muis over CSS- content om waarden zonder escapecodes te zien

Beweeg de muis over de waarde van een content om de versie zonder escapecodes van de waarde te zien.

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

De ontsnapte string

Wanneer u over de content beweegt, ziet u de waarde zonder escapecodes:

De onontkoombare waarde

Meer gedetailleerde bronkaartfouten in de console

De console biedt nu meer details over waarom een ​​bronkaart niet kon worden geladen of geparseerd. Voorheen gaf het alleen een foutmelding zonder uit te leggen wat er mis ging.

Een fout bij het laden van de bronkaart in de console

Instelling voor het uitschakelen van scrollen voorbij het einde van een bestand

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

Hier is een GIF van de functie .

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 .