Wat is er nieuw in DevTools (Chrome 77)

Kayce Basken
Kayce Basques
X GitHub

Kopieer de stijlen van het element

Klik met de rechtermuisknop op een knooppunt in de DOM-structuur om de CSS van dat DOM-knooppunt naar uw klembord te kopiëren.

Stijlen kopiëren.

Afbeelding 1. Stijlen van elementen kopiëren.

Dank aan Adam Argyle en VisBug voor de inspiratie .

Visualiseer lay-outverschuivingen

Stel je voor dat je een nieuwsartikel leest op je favoriete website. Tijdens het lezen raak je steeds de draad kwijt omdat de inhoud verspringt. Dit probleem heet lay-outverschuiving. Het gebeurt meestal wanneer afbeeldingen en advertenties geladen zijn. De pagina heeft geen ruimte gereserveerd voor de afbeeldingen en advertenties, dus moet de browser alle andere inhoud naar beneden verschuiven om er ruimte voor te maken. De oplossing is het gebruik van placeholders .

Met DevTools kunt u nu lay-outverschuivingen detecteren:

  1. Open het opdrachtmenu .
  2. Begin met het typen Rendering .
  3. Voer de opdracht 'Show Rendering' uit.
  4. Schakel het selectievakje 'Layoutverschuivingsgebieden' in. Wanneer u een pagina gebruikt, worden lay-outverschuivingen blauw gemarkeerd.

Een wijziging in de lay-out.

Afbeelding 2. Een verschuiving in de lay-out.

Chromium-probleem #961846

Lighthouse 5.1 in het paneel Audits

Het auditpanel draait nu op Lighthouse 5.1 . Nieuwe audits omvatten:

  • Geeft een geldig apple-touch-icon . Controleert of een PWA aan een iOS-startscherm kan worden toegevoegd.
  • Houd het aantal verzoeken en de bestandsgroottes laag . Rapporteert het totale aantal netwerkverzoeken en de bestandsgroottes voor verschillende categorieën, zoals documenten, scripts, stylesheets, afbeeldingen, enzovoort.
  • Maximale potentiële eerste invoervertraging . Deze meting meet de maximale potentiële tijd tussen de eerste pagina-interactie van een gebruiker en de reactie van de browser op die interactie. Houd er rekening mee dat deze metriek de geschatte invoerlatentie vervangt. De maximale potentiële eerste invoervertraging telt niet mee voor uw score in de prestatiecategorie.

De nieuwe gebruikersinterface van het auditpaneel.

Afbeelding 3. De nieuwe gebruikersinterface van het paneel Audits.

De Node- en CLI-versies van Lighthouse 5.1 bevatten 3 belangrijke nieuwe functies die de moeite waard zijn om te bekijken:

  • Prestatiebudgetten . Voorkom dat uw website na verloop van tijd minder goed presteert door het aantal verzoeken en de maximale bestandsgrootte voor pagina's te specificeren.
  • Plugins . Breid Lighthouse uit met uw eigen aangepaste audits.
  • Stack Packs . Voeg audits toe die zijn afgestemd op specifieke technologiestacks. Het WordPress Stack Pack is als eerste uitgebracht. React- en AMP-Stack Packs zijn in ontwikkeling.

OS-thema synchronisatie

Als je het donkere thema van je besturingssysteem gebruikt, schakelt DevTools nu automatisch over naar het eigen donkere thema .

Sneltoets voor het openen van de Breakpoint Editor

Druk op Control + Alt + B of Command + Option + B (Mac) wanneer u zich in de editor van het deelvenster Bronnen bevindt om de Breakpoint Editor te openen. Gebruik de Breakpoint Editor om logpoints en voorwaardelijke breakpoints te maken.

De breakpoint-editor.

Afbeelding 4. De breakpoint-editor .

Prefetch-cache in het netwerkpaneel

In de kolom 'Grootte' van het paneel 'Netwerk' staat nu (prefetch cache) wanneer een bron vanuit de prefetch cache is geladen. Prefetch is een relatief nieuwe functie van webplatformen om het laden van volgende pagina's te versnellen. Volgens gegevens van Can I use... wordt deze functie in juli 2019 door 83,33% van de wereldwijde browsers ondersteund.

De kolom 'Grootte' geeft aan dat de resources afkomstig zijn uit de prefetch-cache.

Figuur 5. De kolom 'Grootte' laat zien dat prefetch2.html en prefetch2.css afkomstig zijn van (prefetch cache) .

Bekijk de Prefetch-demo om het uit te proberen.

Chromium-probleem #935267

Privé-eigenschappen bij het bekijken van objecten

De console toont nu privé-klassevelden in de objectvoorbeelden.

Bij het inspecteren van een object toont de console nu privévelden zoals '#color'.

Afbeelding 6. De oude versie van Chrome aan de linkerkant toont het veld #color niet bij het inspecteren van het object, terwijl de nieuwe versie aan de rechterkant dat wel doet.

Meldingen en pushberichten in het toepassingspaneel

Het gedeelte Achtergrondservices in het toepassingspaneel ondersteunt nu pushberichten en meldingen. Pushberichten worden verzonden wanneer een server informatie naar een service worker stuurt. Meldingen worden verzonden wanneer een service worker of paginascript informatie aan de gebruiker toont.

Net als bij de functies Achtergrond ophalen en Achtergrond synchroniseren uit Chrome 76 , worden pushberichten en meldingen op deze pagina, zodra de opname start, gedurende 3 dagen geregistreerd, zelfs wanneer de pagina gesloten is en zelfs wanneer Chrome gesloten is.

De nieuwe vensters voor meldingen en pushberichten.

Afbeelding 7. De nieuwe vensters voor pushberichten en meldingen in het toepassingspaneel.

Chromium-probleem #927726

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.

Wat is er nieuw in DevTools?

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