Deze pagina is vertaald door de Cloud Translation API.

Wat is er nieuw in DevTools (Chrome 62)

Kayce Basques

Nieuwe functies en wijzigingen voor DevTools in Chrome 62:

Ondersteuning voor await op het hoogste niveau in de console .
Schermafbeeldingen van een deel van de viewport en schermafbeeldingen van specifieke HTML-knooppunten .
CSS-rasteraccentuering .
Een nieuwe console- API voor het opvragen van objecten .
Uitsluitingsfilters en URL-filters in de console .
HAR importeert in het Netwerkpaneel .
Previewbare cachebronnen .
Meer voorspelbare cache-foutopsporing .
Codedekking op blokniveau .

Opmerking: u kunt controleren welke versie van Chrome u gebruikt op chrome://version . Chrome wordt ongeveer elke zes weken automatisch bijgewerkt naar een nieuwe hoofdversie.

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:

Klik op Inspecteren of druk op Command + Shift + C (Mac) of Control + Shift + C (Windows, Linux) om de Inspect Element-modus te openen.
Houd Command (Mac) of Control (Windows, Linux) ingedrukt en selecteer het gedeelte van de viewport waarvan u een screenshot wilt maken.
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:

Selecteer een element in het paneel Elementen .
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
Open het Commandomenu .
Begin met het typen van node en selecteer Capture node screenshot . DevTools downloadt een screenshot van het geselecteerde knooppunt.
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) 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 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 Meer > 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 .