Wat is er nieuw in DevTools (Chrome 77)

Kayce Basken

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.

Kopieer stijlen.

Figuur 1. Elementstijlen kopiëren.

Bedankt Adam Argyle en VisBug voor de inspiratie .

Visualiseer lay-outverschuivingen

Stel dat u een nieuwsartikel op uw favoriete website leest. Terwijl je de pagina leest, verlies je steeds je plaats omdat de inhoud rondspringt. Dit probleem wordt lay-outverschuiving genoemd. Dit gebeurt meestal wanneer afbeeldingen en advertenties zijn geladen. De pagina heeft geen ruimte gereserveerd voor de afbeeldingen en advertenties, dus de browser moet alle andere inhoud naar beneden verplaatsen om er ruimte voor te maken. De oplossing is om tijdelijke aanduidingen te gebruiken.

DevTools kan u nu helpen lay-outverschuivingen te detecteren:

  1. Open het Commandomenu .
  2. Begin met typen Rendering .
  3. Voer de opdracht Rendering weergeven uit.
  4. Schakel het selectievakje Layoutverschuivingsgebieden in. Terwijl u met een pagina communiceert, worden lay-outverschuivingen blauw gemarkeerd.

Een indelingswijziging.

Figuur 2. Een lay-outverschuiving.

Chroomnummer 961846

Lighthouse 5.1 in het paneel Audits

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

  • Biedt een geldig apple-touch-icon . Controleert of een PWA kan worden toegevoegd aan een iOS-startscherm.
  • Houd het aantal aanvragen en de bestandsgrootte 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. Houd er rekening mee dat deze statistiek de statistiek Geschatte invoerlatentie vervangt. De maximale potentiële vertraging bij de eerste invoer telt niet mee voor de score van uw prestatiecategorie.

De nieuwe gebruikersinterface van het paneel Audits.

Figuur 3. De nieuwe gebruikersinterface van het paneel Audits.

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

  • Prestatiebudgetten . Voorkom dat uw site in de loop van de tijd achteruitgaat door het aantal verzoeken en de bestandsgrootte op te geven die pagina's niet mogen overschrijden.
  • Plug-ins . Breid Lighthouse uit met uw eigen aangepaste audits.
  • Stapelpakketten . Voeg audits toe die zijn afgestemd op specifieke technologieën. Het WordPress Stack Pack werd als eerste verzonden. React en AMP Stack Packs zijn in ontwikkeling.

Synchronisatie van besturingssysteemthema's

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

Sneltoets voor het openen van de Breakpoint Editor

Druk op Control + Alt + B of Command + Option + B (Mac) wanneer de focus is gevestigd in de Editor van het deelvenster Bronnen om de Breakpoint Editor te openen. Gebruik de Breakpoint Editor om Logpoints en Conditional Breakpoints te maken.

De Breakpoint-editor.

Figuur 4. De Breakpoint-editor .

Cache vooraf ophalen in netwerkpaneel

In de kolom Grootte van het netwerkpaneel staat nu (prefetch cache) wanneer een bron uit de prefetch-cache is geladen. Prefetch is een nieuwe webplatformfunctie om het later laden van pagina's te versnellen. Kan ik gebruiken... meldt dat het sinds juli 2019 wordt ondersteund in 83,33% van de wereldwijde browsers.

De kolom Grootte laat zien dat 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) .

Zie Prefetch-demo om het uit te proberen.

Chroomnummer 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'.

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

Meldingen en pushberichten in het Applicatiepaneel

Het gedeelte Achtergrondservices van het toepassingspaneel ondersteunt nu pushberichten en meldingen. Pushberichten komen voor wanneer een server informatie naar een servicemedewerker verzendt. Meldingen vinden plaats wanneer een servicemedewerker of paginascript informatie aan de gebruiker toont.

Net als bij de functies Background Fetch en Background Sync van Chrome 76 worden pushberichten en meldingen op deze pagina, zodra u begint met opnemen, gedurende 3 dagen opgenomen, zelfs als de pagina gesloten is, en zelfs als Chrome gesloten is.

De nieuwe deelvensters Meldingen en Pushberichten.

Figuur 7. De nieuwe Push-berichten en Notificaties-panelen in het Applicatiepaneel.

Chroomnummer 927726

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .