Wat is er nieuw in DevTools (Chrome 77)

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 applicatiepaneel 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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat is behandeld in de What's New In DevTools- serie.

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chroom 66

Chroom 65

Chroom 64

Chroom 63

Chroom 62

Chroom 61

Chroom 60

Chroom 59