Wat is er nieuw in DevTools (Chrome 76)

Kayce Basques

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-element is de waarde van de declaratie soms makkelijker te onthouden dan de naam van de declaratie. Bijvoorbeeld, wanneer je een <p> -element vetgedrukt wilt maken, is de waarde bold wellicht makkelijker te onthouden dan de naam font-weight . De automatische aanvulfunctie van het deelvenster Stijl ondersteunt nu CSS-waarden. Als je weet welke trefwoordwaarde je wilt gebruiken, maar de naam van de eigenschap niet meer weet, probeer dan de waarde in te typen. De automatische aanvulfunctie helpt je dan de naam te vinden waarnaar je op zoek bent.

Afbeelding 1. Na het typen van bold vult het deelvenster Stijlen automatisch aan met font-weight: bold .

Geef feedback over deze nieuwe functie via Chromium issue #931145 .

Een nieuwe gebruikersinterface voor netwerkinstellingen

Het netwerkpaneel had voorheen een gebruiksprobleem: opties zoals het menu voor bandbreedtebeperking waren niet bereikbaar wanneer het DevTools-venster smal was. Om dit probleem op te lossen en het netwerkpaneel overzichtelijker te maken, zijn enkele minder vaak gebruikte opties verplaatst naar de nieuwe netwerkinstellingen. paneel.

Afbeelding 2. Netwerkinstellingen.

De volgende opties zijn verplaatst naar Netwerkinstellingen : Grote aanvraagrijen gebruiken , Groeperen op frame , Overzicht weergeven , Schermafbeeldingen maken . Figuur 3 toont de oude locaties ten opzichte van de nieuwe.

Figuur 3. De oude locaties in kaart brengen ten opzichte van de nieuwe.

Geef feedback over deze UI-wijziging door aan Chromium issue #892969 .

WebSocket-berichten in HAR-exports

Wanneer u vanuit het netwerkpaneel een HAR-bestand exporteert om netwerklogboeken met uw collega's te delen, bevat uw HAR-bestand nu WebSocket-berichten. De eigenschap _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!"
  }
]
...

Geef feedback over deze nieuwe functie via Chromium issue #496006 .

HAR-import- en exportknoppen

Deel netwerklogboeken eenvoudiger met collega's dankzij de nieuwe functie 'Alles exporteren als HAR met inhoud'. en een HAR-bestand importeren knoppen. Het importeren en exporteren van HAR-bestanden bestaat al een tijdje in DevTools. De beter vindbare knoppen zijn de nieuwste verandering.

Afbeelding 4. De nieuwe HAR-knoppen.

Geef feedback over deze UI-wijziging door aan Chromium issue #904585 .

Realtime totaal geheugengebruik

Het geheugenpaneel toont nu het totale geheugengebruik in realtime.

Afbeelding 5. Onderaan het geheugenpaneel wordt weergegeven 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 Prestatiemonitor voor het realtime volgen van het geheugengebruik.

Geef feedback over deze nieuwe functie via Chromium issue #958177 .

Registratienummers van servicepersoneel

Het venster 'Service Workers' bevat nu poortnummers in de titels, zodat u gemakkelijker kunt bijhouden welke service worker u aan het debuggen bent.

Afbeelding 6. Poorten voor servicemedewerkers.

Geef feedback over deze UI-wijziging door aan Chromium issue #601286 .

Inspecteer de gebeurtenissen Achtergrond Fetch en Achtergrond Sync

Gebruik het nieuwe gedeelte Achtergrondservices in het toepassingspaneel om gebeurtenissen voor het ophalen en synchroniseren van gegevens op de achtergrond te bewaken. Aangezien deze gebeurtenissen op de achtergrond plaatsvinden, zou het niet erg nuttig zijn als DevTools ze alleen zou registreren wanneer DevTools open is. Daarom worden gebeurtenissen voor het ophalen en synchroniseren van gegevens op de achtergrond, zodra u begint met opnemen, ook geregistreerd nadat u het tabblad en Chrome hebt gesloten.

Ga naar het toepassingspaneel , open het tabblad Achtergrond ophalen of Achtergrond synchroniseren en klik vervolgens op Opnemen. Om te beginnen met het registreren van gebeurtenissen. Klik op een gebeurtenis om meer informatie erover te bekijken.

Afbeelding 7. Het paneel Achtergrond ophalen. Demonstratie door Maxim Salnikov .

Afbeelding 8. Het venster Achtergrondsynchronisatie.

Geef feedback over deze nieuwe functies via Chromium issue #927726 .

Puppeteer voor Firefox

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

Na het uitvoeren node example.js opent Firefox en wordt de page in het zoekveld van de Puppeteer-documentatiesite ingevoegd. Vervolgens 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 voor Firefox begint rond 4:05.

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.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

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