Nieuw in DevTools (Chrome 76)

Kayce Basques

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

Automatisch aanvullen met CSS-waarden

Als je stijldeclaraties toevoegt aan een DOM-node, is de declaratiewaarde soms makkelijker te onthouden dan de declaratienaam. Als je bijvoorbeeld een <p>-node vet maakt, is de waarde bold misschien makkelijker te onthouden dan de naam font-weight. De UI voor automatisch aanvullen van het deelvenster Stijl ondersteunt nu CSS-waarden. Als u weet welke zoekwoordwaarde u wilt, maar de naam van de property niet meer weet, typt u de waarde. Automatisch aanvullen helpt u dan de naam te vinden die u zoekt.

Figuur 1. Nadat je bold hebt getypt, wordt het deelvenster Stijlen automatisch aangevuld tot font-weight: bold.

Stuur feedback over deze nieuwe functie naar Chromium-probleem #931145.

Een nieuwe UI voor netwerkinstellingen

Het deelvenster Netwerk had eerder een probleem met het gebruiksgemak, waarbij opties zoals het menu voor beperking onbereikbaar waren als het DevTools-venster smal was. We hebben dit probleem opgelost en het deelvenster Netwerk opgeruimd door een paar minder gebruikte opties te verplaatsen naar het nieuwe deelvenster Netwerkinstellingen .

Afbeelding 2. Netwerkinstellingen.

De volgende opties zijn verplaatst naar Netwerkinstellingen: Grote verzoekrijen gebruiken, Groeperen op frame, Overzicht tonen, Screenshots maken. In afbeelding 3 worden de oude locaties toegewezen aan de nieuwe locaties.

Figuur 3. De oude locaties toewijzen aan de nieuwe.

Stuur feedback over deze UI-wijziging naar Chromium-probleem #892969.

WebSocket-berichten in HAR-exports

Als je een HAR-bestand exporteert vanuit het deelvenster Netwerk om netwerklogboeken met je collega's te delen, bevat je HAR-bestand nu WebSocket-berichten. De property _webSocketMessages begint met een underscore 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-probleem #496006.

Knoppen voor HAR-import en -export

Deel netwerklogboeken makkelijker met collega's met de nieuwe knoppen Alles exporteren als HAR met content en HAR-bestand importeren . HAR-import en -export bestaan al een tijdje in DevTools. De beter vindbare knoppen zijn de nieuwe wijziging.

Figuur 4. De nieuwe HAR-knoppen.

Stuur feedback over deze UI-wijziging naar Chromium-probleem #904585.

Realtime totaal geheugengebruik

Het deelvenster Geheugen toont nu het totale geheugengebruik in realtime.

Figuur 5. Onderaan het deelvenster Geheugen staat 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.

Ga ook naar de Prestatiecontrole om het geheugengebruik in realtime bij te houden.

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

Poortnummers voor registratie van serviceworkers

Het deelvenster Service Workers bevat nu poortnummers in de titels, zodat je makkelijker kunt bijhouden welke serviceworker je foutopsporing uitvoert.

Afbeelding 6. Service worker-poorten.

Stuur feedback over deze UI-wijziging naar Chromium-probleem #601286.

Gebeurtenissen voor ophalen op de achtergrond en synchroniseren op de achtergrond inspecteren

Gebruik het nieuwe gedeelte Achtergrondservices van het deelvenster App om gebeurtenissen voor Achtergrond ophalen en Achtergrondsynchronisatie te controleren. Omdat gebeurtenissen voor ophalen op de achtergrond en synchroniseren op de achtergrond plaatsvinden op de... nou ja... achtergrond, zou het niet erg handig zijn als DevTools alleen gebeurtenissen voor ophalen op de achtergrond en synchroniseren op de achtergrond zou registreren terwijl DevTools open is. Zodra je begint met opnemen, worden Background Fetch- en Background Sync-gebeurtenissen dus nog steeds opgenomen, zelfs nadat je het tabblad hebt gesloten en zelfs nadat je Chrome hebt gesloten.

Ga naar het deelvenster App, open het tabblad Ophalen op de achtergrond of Synchroniseren op de achtergrond en klik op Opnemen om gebeurtenissen te registreren. Klik op een gebeurtenis om er meer informatie over te bekijken.

Figuur 7. Het deelvenster Fetchen op de achtergrond. Demo door Maxim Salnikov.

Figuur 8. Het deelvenster Synchronisatie op de achtergrond.

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

Puppeteer voor Firefox

Puppeteer voor Firefox is een nieuw experimenteel project waarmee je Firefox kunt automatiseren met de Puppeteer API. Met andere woorden: je kunt Firefox en Chromium nu automatiseren met dezelfde Node API, zoals je in de video hieronder kunt zien.

Nadat je node example.js hebt uitgevoerd, wordt Firefox geopend en wordt de tekst page ingevoegd in het zoekvak op de documentatiesite van Puppeteer. Daarna wordt dezelfde taak herhaald in Chromium.

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

De voorbeeldkanalen downloaden

Overweeg Chrome Canary, Dev of Bèta te gebruiken als je standaardbrowser voor ontwikkeling. Deze previewkanalen geven je toegang tot de nieuwste DevTools-functies, laten je geavanceerde webplatform-API's testen en helpen je problemen op je site te vinden voordat je gebruikers dat doen.

Contact opnemen met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders over DevTools te bespreken.

• Stuur feedback en functieverzoeken naar ons via crbug.com.
• Meld een DevTools-probleem via more_vert Meer opties > Hulp > Een DevTools-probleem melden in DevTools.
• Tweet naar @ChromeDevTools.
• Laat reacties achter bij YouTube-video's over Wat is er nieuw in DevTools of YouTube-video's met DevTools-tips.

Nieuw in DevTools

Een lijst van alles wat is behandeld in de serie Wat is er nieuw in DevTools.