Wat is er nieuw in DevTools (Chrome 76)

Kayce Basques

Hallo! Dit is er nieuw 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. Bijvoorbeeld, wanneer u een <p> -knooppunt vetgedrukt maakt, is de waarde bold mogelijk makkelijker te onthouden dan de naam font-weight . De gebruikersinterface voor automatisch aanvullen van het Stijl-venster ondersteunt nu CSS-waarden. Als u zich de gewenste trefwoordwaarde herinnert, maar de eigenschapsnaam niet meer weet, typ dan de waarde in en automatisch aanvullen zou u moeten helpen de gewenste naam te vinden.

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

Stuur feedback over deze nieuwe functie naar Chromium issue #931145 .

Een nieuwe gebruikersinterface voor netwerkinstellingen

Het Netwerkpaneel had voorheen een probleem met de bruikbaarheid, waarbij opties zoals het menu voor het beperken van de bandbreedte onbereikbaar waren wanneer 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. ruit.

Figuur 2. Netwerkinstellingen.

De volgende opties zijn verplaatst naar Netwerkinstellingen : Grote aanvraagrijen gebruiken , Groeperen op frame , Overzicht weergeven , Schermafbeeldingen vastleggen . Figuur 3 koppelt de oude locaties aan de nieuwe.

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

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

WebSocket-berichten in HAR-exporten

Wanneer u een HAR-bestand exporteert vanuit het paneel Netwerk 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 issue #496006 .

HAR-import- en exportknoppen

Deel netwerklogs gemakkelijker met collega's met de nieuwe functie Alles exporteren als HAR met inhoud en HAR-bestand importeren Knoppen. HAR-import en -export bestaan al een tijdje in DevTools. De beter vindbare knoppen zijn de nieuwe verandering.

Figuur 4. De nieuwe HAR-knoppen.

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

Realtime totaal geheugengebruik

Het paneel Geheugen geeft nu het totale geheugengebruik in realtime weer.

Figuur 5. Onderaan het paneel 'Geheugen' ziet u 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 om het geheugengebruik in realtime te volgen.

Stuur feedback over deze nieuwe functie naar Chromium issue #958177 .

Registratiepoortnummers van servicemedewerkers

In de titels van het deelvenster Service Workers staan nu poortnummers vermeld. Zo kunt u gemakkelijker bijhouden welke service worker u aan het debuggen bent.

Figuur 6. Service worker-poorten.

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

Inspecteer gebeurtenissen voor het ophalen van de achtergrond en synchronisatie van de achtergrond

Gebruik de nieuwe sectie Achtergrondservices van het toepassingspaneel om gebeurtenissen voor het ophalen van de achtergrond en synchronisatie van de achtergrond te monitoren. Aangezien gebeurtenissen voor het ophalen van de achtergrond en synchronisatie van de achtergrond plaatsvinden op de... nou ja... achtergrond, zou het niet erg nuttig zijn als DevTools alleen gebeurtenissen voor het ophalen van de achtergrond en synchronisatie van de achtergrond registreerde terwijl DevTools geopend was. Dus zodra u begint met registreren, worden gebeurtenissen voor het ophalen van de achtergrond en synchronisatie van de achtergrond geregistreerd, zelfs nadat u het tabblad en Chrome hebt gesloten.

Ga naar het paneel Toepassing , open het tabblad Achtergrond ophalen of Achtergrond synchroniseren en klik vervolgens op Opnemen om gebeurtenissen te loggen. Klik op een gebeurtenis om meer informatie erover te bekijken.

Figuur 7. Het paneel 'Achtergrond ophalen'. Demo door Maxim Salnikov .

Figuur 8. Het deelvenster Achtergrondsynchronisatie.

Stuur feedback over deze nieuwe functies naar Chromium issue #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 node example.js opent Firefox en wordt de page ingevoegd in het zoekvak op de documentatiesite van Puppeteer. Vervolgens wordt dezelfde taak herhaald in Chromium.

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

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.