Wat is er nieuw in DevTools (Chrome 62)

Kayce Basken

Nieuwe functies en wijzigingen voor DevTools in Chrome 62:

Operators op het hoogste niveau wachten in de console

De console ondersteunt nu await op het hoogste niveau.

Met behulp van wachtoperatoren op het hoogste niveau in de console

Figuur 1 . Met behulp van await op het hoogste niveau in de console

Nieuwe screenshot-workflows

U kunt nu een screenshot maken van een deel van de viewport of van een specifiek HTML-knooppunt.

Schermafbeeldingen van een deel van de viewport

Een screenshot maken van een deel van uw viewport:

  1. Klik op Inspecteren Inspecteren of druk op Command + Shift + C (Mac) of Control + Shift + C (Windows, Linux) om de Inspect Element-modus te openen.
  2. Houd Command (Mac) of Control (Windows, Linux) ingedrukt en selecteer het gedeelte van de viewport waarvan u een screenshot wilt maken.
  3. Laat uw muis los. DevTools downloadt een screenshot van het gedeelte dat u hebt geselecteerd.

Een screenshot maken van een deel van de viewport

Figuur 2 . Een screenshot maken van een deel van de viewport

Schermafbeeldingen van specifieke HTML-knooppunten

Een screenshot maken van een specifiek HTML-knooppunt:

  1. Selecteer een element in het paneel Elementen .

    Een voorbeeld van een knooppunt

    Figuur 3 . In dit voorbeeld is het de bedoeling om een ​​screenshot te maken van de blauwe kop die de tekst Tools bevat. Merk op dat dit knooppunt al is geselecteerd in de DOM-structuur van het paneel Elementen

  2. Open het Commandomenu .

  3. Begin met het typen node en selecteer Capture node screenshot . DevTools downloadt een screenshot van het geselecteerde knooppunt.

    Het resultaat van de opdracht 'Capture node screenshot'

    Figuur 4 . Het resultaat van de opdracht Capture node screenshot

CSS-rastermarkering

Om het CSS-raster te bekijken dat van invloed is op een element, beweegt u de muis over een element in de DOM-structuur van het paneel Elementen . Er verschijnt een stippellijn rond elk van de rasteritems. Dit werkt alleen als op het geselecteerde item, of op het bovenliggende item, display:grid is toegepast.

Een CSS-raster markeren

Figuur 5 . Een CSS-raster markeren

Bekijk de onderstaande video om in minder dan 2 minuten de basisprincipes van CSS Grid te leren.

Een nieuwe API voor het opvragen van heap-objecten

Roep queryObjects(Constructor) aan vanuit de console om een ​​array met objecten te retourneren die met de opgegeven constructor zijn gemaakt. Bijvoorbeeld:

  • queryObjects(Promise) . Geeft alle beloften terug.
  • queryObjects(HTMLElement) . Retourneert alle HTML-elementen.
  • queryObjects(foo) , waarbij foo een functienaam is. Retourneert alle objecten die zijn geïnstantieerd via new foo() .

Het bereik van queryObjects() is de momenteel geselecteerde uitvoeringscontext in de Console . Zie Uitvoeringscontext selecteren .

Nieuwe consolefilters

De console ondersteunt nu negatieve filters en URL-filters.

Negatieve filters

Typ -<text> in het vak Filter om consoleberichten uit te filteren die <text> bevatten.

Een voorbeeld van 3 berichten die eruit worden gefilterd

Figuur 6 . De eerste instructie registreert one , two , three en four in de console . two is verborgen omdat -two is ingevoerd in het vak Filter

DevTools filtert een bericht eruit als <text> wordt gevonden:

  • In de berichttekst.
  • In de bestandsnaam waarvan het bericht afkomstig is.
  • In de stacktrace-tekst.

Het negatieve filter werkt ook met reguliere expressies zoals -/[4-5]*ms/ .

URL-filters

Typ url:<text> in het vak Filter om alleen berichten weer te geven die afkomstig zijn van een script waarvan de URL <text> bevat.

Het filter maakt gebruik van fuzzy matching. Als <text> ergens in de URL voorkomt, toont DevTools het bericht.

Een voorbeeld van URL-filtering

Figuur 7 . URL-filtering gebruiken om alleen berichten weer te geven die afkomstig zijn van scripts waarvan de URL hymn bevat. Door over de scriptnaam te bewegen, kunt u zien dat de hostnaam deze tekst bevat

HAR importeert in het netwerkpaneel

Sleep een HAR-bestand naar het netwerkpaneel om het te importeren.

Een HAR-bestand importeren

Figuur 8 . Een HAR-bestand importeren

Previewbare cachebronnen in het toepassingspaneel

Klik op een rij in een cacheopslagtabel om een ​​voorbeeld van die bron onder de tabel te zien.

Een voorbeeld van een cachebron bekijken

Figuur 9 . Een voorbeeld van een cachebron bekijken

Responsievere cache-foutopsporing

In Chrome 61 en eerder is het debuggen van caches die zijn gemaakt met de Cache API ... lastig. Wanneer een pagina bijvoorbeeld een nieuwe cache aanmaakt, moet u de pagina of DevTools handmatig vernieuwen om de nieuwe cache te zien.

In Chrome 62 wordt het tabblad Cache-opslag nu in realtime bijgewerkt wanneer u een cache of bron maakt, bijwerkt of verwijdert. Bekijk onderstaande video voor een voorbeeld.

Bekijk de Cache Storage-demo om het zelf uit te proberen.

Codedekking op blokniveau

In Chrome 61 en eerder markeert het tabblad Dekking alle code binnen een functie zoals gebruikt, zolang de functie maar wordt aangeroepen.

Een voorbeeld van het tabblad Dekking in Chrome 61

Figuur 10 . Een voorbeeld van het tabblad Dekking in Chrome 61. Regel 4 is gemarkeerd als gebruikt, ook al wordt deze nooit uitgevoerd

Vanaf Chrome 62 vertelt het tabblad Dekking nu welke code binnen een functie wordt aangeroepen.

Een voorbeeld van het tabblad Dekking in Chrome 62

Figuur 11 . Een voorbeeld van het tabblad Dekking in Chrome 62. Regel 4 is gemarkeerd als ongebruikt

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 .