Wat is er nieuw in DevTools (Chrome 62)

Kayce Basken
Kayce Basques
X GitHub

Nieuwe functies en wijzigingen in DevTools in Chrome 62:

Operators op het hoogste niveau wachten in de console.

De console ondersteunt nu top-level await -operators.

Het gebruik van await-operators op het hoogste niveau in de console.

Afbeelding 1. Het gebruik van await operators op het hoogste niveau in de console.

Nieuwe workflows voor screenshots

Je kunt nu een schermafbeelding maken van een gedeelte van het weergavegebied of van een specifiek HTML-element.

Screenshots van een gedeelte van de viewport

Om een ​​schermafbeelding te maken van een gedeelte van uw weergavegebied:

  1. Klik op Inspecteren Inspecteren Of druk op Command + Shift + C (Mac) of Control + Shift + C (Windows, Linux) om de inspectiemodus voor elementen te openen.
  2. Houd Command (Mac) of Control (Windows, Linux) ingedrukt en selecteer het gedeelte van het scherm waarvan u een schermafbeelding wilt maken.
  3. Laat de muis los. DevTools downloadt een schermafbeelding van het gedeelte dat u hebt geselecteerd.

Een screenshot maken van een gedeelte van de viewport

Afbeelding 2. Een schermafbeelding maken van een gedeelte van de viewport.

Screenshots van specifieke HTML-knooppunten

Om een ​​schermafbeelding te maken van een specifiek HTML-element:

  1. Selecteer een element in het paneel Elementen .

    Een voorbeeld van een knooppunt

    Afbeelding 3. In dit voorbeeld is het de bedoeling een schermafbeelding te maken van de blauwe koptekst met de tekst ' Tools . Merk op dat dit knooppunt al is geselecteerd in de DOM-structuur van het paneel 'Elementen '.

  2. Open het opdrachtmenu .

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

    Het resultaat van de opdracht 'Schermafbeelding van knooppunt maken'

    Afbeelding 4. Het resultaat van de Capture node screenshot

CSS Grid-markering

Om het CSS-raster te bekijken dat van invloed is op een element, beweeg je de muis over een element in de DOM-structuur van het paneel ' Elementen '. Er verschijnt een stippellijn rond elk element in het raster. Dit werkt alleen als het geselecteerde element, of het bovenliggende element van het geselecteerde element, de eigenschap display:grid heeft.

Een CSS-raster markeren

Afbeelding 5. Een CSS-raster markeren.

Bekijk de video hieronder 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 te retourneren van objecten die zijn gemaakt met de opgegeven constructor. Bijvoorbeeld:

  • queryObjects(Promise) . Retourneert alle Promises.
  • 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 filtervak ​​om alle consoleberichten <text> bevatten uit te filteren.

Een voorbeeld van 3 berichten die worden gefilterd.

Figuur 6. De eerste instructie logt one , two , three en four naar de console . two is verborgen omdat -two in het filtervak ​​is ingevoerd.

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

  • In de berichttekst.
  • In de bestandsnaam waaruit het bericht afkomstig is.
  • In de stack trace-tekst.

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

URL-filters

Typ url:<text> in het filtervak ​​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

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

HAR-importen in het netwerkpaneel

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

Een HAR-bestand importeren

Afbeelding 8. Een HAR-bestand importeren.

Voorbeeldweergave van cachebronnen in het toepassingspaneel

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

Een cachebron bekijken

Afbeelding 9. Voorbeeldweergave van een cachebron

Snellere cache-debugging

In Chrome 61 en eerdere versies is het debuggen van caches die met de Cache API zijn aangemaakt... lastig. Als een pagina bijvoorbeeld een nieuwe cache aanmaakt, moet je de pagina of de ontwikkelaarstools handmatig vernieuwen om de nieuwe cache te kunnen zien.

In Chrome 62 wordt het tabblad Cacheopslag nu in realtime bijgewerkt wanneer u een cache of een bron aanmaakt, bijwerkt of verwijdert. Bekijk de onderstaande video voor een voorbeeld.

Bekijk de Cache Storage Demo om het zelf uit te proberen.

Codedekking op blokniveau

In Chrome 61 en eerdere versies markeert het tabblad 'Coverage' alle code binnen een functie als gebruikt, zolang de functie maar wordt aangeroepen.

Een voorbeeld van het tabblad 'Coverage' in Chrome 61.

Afbeelding 10. Een voorbeeld van het tabblad 'Coverage' in Chrome 61. Regel 4 is gemarkeerd als 'gebruikt', hoewel deze nooit wordt uitgevoerd.

Vanaf Chrome 62 laat het tabblad 'Coverage' zien welke code binnen een functie wordt aangeroepen.

Een voorbeeld van het tabblad 'Coverage' in Chrome 62.

Afbeelding 11. Een voorbeeld van het tabblad 'Coverage' in Chrome 62. Regel 4 is gemarkeerd als ongebruikt.

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