Wat is er nieuw in DevTools (Chrome 76)

Kayce Basken

Hallo! Dit is wat er nieuw is in Chrome DevTools in Chrome 76.

Automatisch aanvullen met CSS-waarden

Bij het toevoegen van stijldeclaraties aan een DOM-knooppunt is de declaratiewaarde soms makkelijker te onthouden dan de declaratienaam. Als u bijvoorbeeld een <p> -knooppunt vetgedrukt maakt, kan de waarde bold gemakkelijker te onthouden zijn dan de naam font-weight . De automatische aanvullingsinterface van het stijlvenster ondersteunt nu CSS-waarden. Als u weet welke zoekwoordwaarde u zoekt, maar de naam van de eigenschap niet meer weet, kunt u proberen de waarde te typen. Automatisch aanvullen zou u moeten helpen de naam te vinden waarnaar u op zoek bent.

Nadat u 'bold' hebt getypt, wordt het deelvenster Stijlen automatisch aangevuld naar 'font-weight: bold'.

Figuur 1. Nadat u bold heeft getypt, wordt het deelvenster Stijlen automatisch aangevuld naar font-weight: bold .

Stuur feedback over deze nieuwe functie naar Chromium-nummer 931145 .

Een nieuwe gebruikersinterface voor netwerkinstellingen

Het netwerkpaneel had voorheen een bruikbaarheidsprobleem waarbij opties zoals het beperkingsmenu onbereikbaar waren als het DevTools-venster smal was. Om dit probleem op te lossen en het netwerkpaneel overzichtelijker te maken, zijn een paar minder gebruikte opties verplaatst naar de nieuwe netwerkinstellingen De knop Netwerkinstellingen venster.

Netwerkinstellingen

Figuur 2. Netwerkinstellingen.

De volgende opties zijn verplaatst naar Netwerkinstellingen : Grote aanvraagrijen gebruiken , Groeperen op frame , Overzicht weergeven , Schermafbeeldingen maken . Figuur 3 brengt de oude locaties in kaart met de nieuwe.

Het in kaart brengen van de oude locaties naar de nieuwe.

Figuur 3. De oude locaties in kaart brengen naar de nieuwe.

Stuur feedback over deze wijziging in de gebruikersinterface naar Chromium-probleem #892969 .

WebSocket-berichten in HAR-exports

Wanneer u een HAR-bestand vanuit het netwerkpaneel exporteert om netwerklogboeken met uw collega's te delen, bevat uw HAR-bestand nu WebSocket-berichten. De eigenschap _webSocketMessages begint met een onderstrepingsteken om aan te geven dat het een aangepast veld is.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Stuur feedback over deze nieuwe functie naar Chromium-nummer 496006 .

HAR import- en exportknoppen

Deel netwerklogboeken eenvoudiger met collega's met de nieuwe Alles exporteren als HAR met inhoud Exporteren en importeer een HAR-bestand Importeren knoppen. HAR-import en -export bestaan ​​al een tijdje in DevTools. De beter vindbare knoppen zijn de nieuwe verandering.

De nieuwe HAR-knoppen.

Figuur 4. De nieuwe HAR-knoppen.

Stuur feedback over deze wijziging in de gebruikersinterface naar Chromium-probleem #904585 .

Realtime totaal geheugengebruik

Het paneel Geheugen toont nu het totale geheugengebruik in realtime.

Realtime totaal geheugengebruik.

Figuur 5. De onderkant van het paneel Geheugen laat zien dat de pagina in totaal 43,4 MB geheugen gebruikt. 209 KB/s geeft aan dat het totale geheugengebruik met 209 KB per seconde toeneemt.

Zie ook de Prestatiemeter om het geheugengebruik in realtime bij te houden.

Stuur feedback over deze nieuwe functie naar Chromium-nummer 958177 .

Registratiepoortnummers van servicemedewerkers

Het deelvenster Servicewerkers bevat nu poortnummers in de titels, zodat u gemakkelijker kunt bijhouden welke servicemedewerker u aan het debuggen bent.

Poorten voor servicemedewerkers.

Figuur 6. Poorten voor servicemedewerkers.

Stuur feedback over deze wijziging in de gebruikersinterface naar Chromium-probleem #601286 .

Inspecteer gebeurtenissen op het gebied van ophalen op de achtergrond en achtergrondsynchronisatie

Gebruik de nieuwe sectie Achtergrondservices van het paneel Toepassingen om gebeurtenissen op het gebied van achtergrondophalen en achtergrondsynchronisatie te controleren. Gezien het feit dat Background Fetch- en Background Sync-gebeurtenissen plaatsvinden op de... nou ja... achtergrond, zou het niet erg nuttig zijn als DevTools alleen Background Fetch- en Background Sync-gebeurtenissen registreerde terwijl DevTools open was. Dus zodra u begint met opnemen, blijven de gebeurtenissen op de achtergrond ophalen en achtergrondsynchronisatie opgenomen, zelfs nadat u het tabblad heeft gesloten en zelfs nadat u Chrome heeft gesloten.

Ga naar het paneel Toepassingen , open het tabblad Achtergrond ophalen of Achtergrondsynchronisatie en klik vervolgens op Opnemen Dossier om het loggen van gebeurtenissen te starten. Klik op een evenement om meer informatie erover te bekijken.

Het deelvenster Achtergrond ophalen.

Figuur 7. Het deelvenster Achtergrond ophalen. Demo door Maxim Salnikov .

Het deelvenster Achtergrondsynchronisatie.

Figuur 8. Het paneel Achtergrondsynchronisatie.

Stuur feedback over deze nieuwe functies naar Chromium-nummer 927726 .

Poppenspeler voor Firefox

Puppeteer voor Firefox is een nieuw experimenteel project waarmee u Firefox kunt automatiseren met de Puppeteer API. Met andere woorden, u kunt nu Firefox en Chromium automatiseren met dezelfde Node API, zoals gedemonstreerd in de onderstaande video.

Na het uitvoeren van node example.js wordt Firefox geopend en wordt de page ingevoegd in het zoekvak op de documentatiesite van Puppeteer. Vervolgens wordt dezelfde taak herhaald in Chromium.

Bekijk de Puppeteer-lezing door Joel en Andrey van Google I/O 2019 voor meer informatie over Puppeteer en Puppeteer voor Firefox. De Firefox-aankondiging vindt plaats rond 4:05 uur.

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 .