Wat is er nieuw in DevTools (Chrome 77)

Kayce Basken

Stijlen van elementen kopiëren

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

Stijlen kopiëren.

Figuur 1. Elementstijlen kopiëren.

Bedankt 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 van de pagina verlies je steeds je plaats omdat de content heen en weer springt. Dit probleem heet layout shifting. Het gebeurt meestal wanneer afbeeldingen en advertenties klaar zijn met laden. De pagina heeft geen ruimte gereserveerd voor de afbeeldingen en advertenties, dus de browser moet alle andere content naar beneden verschuiven om ruimte te maken. De oplossing is om tijdelijke aanduidingen te gebruiken.

DevTools kan u nu helpen bij het detecteren van lay-outverschuivingen:

  1. Open het opdrachtmenu .
  2. Begin met het typen Rendering .
  3. Voer de opdracht Rendering weergeven uit.
  4. Schakel het selectievakje Lay-outverschuivingsregio's in. Tijdens interactie met een pagina worden lay-outverschuivingen blauw gemarkeerd.

Een verandering van lay-out.

Figuur 2. Een lay-outverschuiving.

Chromium-probleem #961846

Lighthouse 5.1 in het Audits-paneel

Het Audits-paneel draait nu Lighthouse 5.1 . Nieuwe audits zijn onder andere:

  • Biedt een geldig apple-touch-icon . Controleert of een PWA kan worden toegevoegd aan een iOS-startscherm.
  • Houd het aantal verzoeken en de bestandsgroottes laag . Rapporteert het totale aantal netwerkverzoeken en bestandsgroottes voor verschillende categorieën, zoals documenten, scripts, stylesheets, afbeeldingen, enzovoort.
  • Maximale potentiële vertraging bij eerste invoer . Meet de maximale potentiële tijd tussen de eerste pagina-interactie van een gebruiker en de reactie van de browser op die interactie. Deze statistiek vervangt de statistiek 'Geschatte invoerlatentie'. Maximale potentiële vertraging bij eerste invoer speelt geen rol in uw score voor de categorie Prestatie.

De nieuwe gebruikersinterface van het Audits-paneel.

Figuur 3. De nieuwe gebruikersinterface van het Audits-paneel.

De Node- en CLI-versies van Lighthouse 5.1 hebben 3 nieuwe belangrijke functies die het bekijken waard zijn:

  • Prestatiebudgetten . Voorkom dat uw site na verloop van tijd achteruitgaat door het aantal verzoeken en de bestandsgroottes te specificeren die pagina's niet mogen overschrijden.
  • Plugins . Breid Lighthouse uit met uw eigen audits.
  • Stack Packs . Voeg audits toe die zijn afgestemd op specifieke technologiestacks. Het WordPress Stack Pack is als eerste beschikbaar. React en AMP Stack Packs zijn in ontwikkeling.

OS-thema synchronisatie

Als u het donkere thema van uw 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) terwijl u zich in de editor van het Bronnenpaneel bevindt om de Breakpoint Editor te openen. Gebruik de Breakpoint Editor om logpoints en voorwaardelijke breakpoints te maken.

De Breakpoint-editor.

Figuur 4. De Breakpoint-editor .

Prefetch cache in het netwerkpaneel

De kolom Grootte van het paneel Netwerk geeft nu (prefetch cache) aan wanneer een resource vanuit de prefetch-cache is geladen. Prefetch is een vrij nieuwe functie op webplatforms waarmee pagina's sneller kunnen worden geladen. Kan ik... meldt dat het in juli 2019 in 83,33% van de wereldwijde browsers werd ondersteund.

De kolom Grootte geeft aan dat de bronnen 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 objectvoorvertoningen.

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

Figuur 6. In de oude versie van Chrome aan de linkerkant wordt het veld #color niet weergegeven bij het inspecteren van het object, terwijl dat in de nieuwe versie aan de rechterkant wel het geval is.

Meldingen en pushberichten in het applicatiepaneel

De sectie Achtergrondservices van het applicatiepaneel ondersteunt nu pushberichten en meldingen. Pushberichten worden gegenereerd wanneer een server informatie naar een service worker stuurt. Meldingen worden gegenereerd wanneer een service worker of paginascript informatie aan de gebruiker toont.

Net als bij de functies Achtergrond ophalen en Achtergrondsynchronisatie van Chrome 76 worden pushberichten en meldingen op deze pagina, zodra u begint met opnemen, 3 dagen lang opgenomen, zelfs wanneer de pagina en Chrome gesloten zijn.

De nieuwe deelvensters Meldingen en Pushberichten.

Figuur 7. De nieuwe deelvensters Pushberichten en Meldingen in het toepassingspaneel.

Chromium-probleem #927726

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.

Wat is er nieuw in DevTools

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