Wat is er nieuw in DevTools (Chrome 62)

Kayce Basques

Nieuwe functies en wijzigingen voor DevTools in Chrome 62:

• Ondersteuning voor await operators op het hoogste niveau in de Console .
• Schermafbeeldingen van een gedeelte van de viewport en schermafbeeldingen van specifieke HTML-knooppunten .
• CSS-rastermarkering .
• Een nieuwe Console API voor het opvragen van objecten .
• Negatieve filters en URL-filters in de Console .
• HAR-import in het paneel Netwerk .
• Voorbeeldige cachebronnen .
• Voorspelbaardere cache-foutopsporing .
• Codedekking op blokniveau .

Operators op het hoogste niveau wachten in de console

De console ondersteunt nu await operators op het hoogste niveau.

Figuur 1. Het gebruik van top-level await -operators in de console

Nieuwe screenshot-workflows

U kunt nu een schermafbeelding maken van een gedeelte van het venster of van een specifiek HTML-knooppunt.

Schermafbeeldingen van een deel van het venster

Om een ​​screenshot te maken van een gedeelte van uw viewport:

1. Klik op Inspecteren of druk op Command + Shift + C (Mac) of Control + Shift + C (Windows, Linux) om de Element-inspectiemodus te openen.
2. Houd Command (Mac) of Control (Windows, Linux) ingedrukt en selecteer het gedeelte van het venster waarvan u een schermafbeelding wilt maken.
3. Laat de muisknop los. DevTools downloadt een screenshot van het geselecteerde gedeelte.

Figuur 2. Een screenshot maken van een deel van het venster

Schermafbeeldingen van specifieke HTML-knooppunten

Om een ​​screenshot te maken van een specifiek HTML-knooppunt:

1. Selecteer een element in het deelvenster Elementen .

   

   Figuur 3. In dit voorbeeld is het de bedoeling om een ​​screenshot te maken van de blauwe header met de tekst Tools . Merk op dat dit knooppunt al is geselecteerd in de DOM-boom van het Elementenpaneel .

2. Open het opdrachtmenu .

3. 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 Capture node screenshot opdracht

CSS-rastermarkering

Om het CSS-raster te bekijken dat een element beïnvloedt, beweegt u de muisaanwijzer over een element in de DOM-structuur van het Elementenpaneel . Er verschijnt een stippellijn rond elk van de rasteritems. Dit werkt alleen wanneer op het geselecteerde item, of het bovenliggende item van het geselecteerde item, display:grid is toegepast.

Figuur 5. Een CSS-raster markeren

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

Een nieuwe API voor het bevragen 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() .

De scope 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 alle consoleberichten die <text> bevatten, te filteren.

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

DevTools filtert een bericht 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 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.

Figuur 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

Versleep een HAR-bestand naar het paneel Netwerk om het te importeren.

Figuur 8. Een HAR-bestand importeren

Voorbeeldige cachebronnen in het toepassingspaneel

Klik op een rij in een Cache Storage- tabel om een ​​voorbeeld van de betreffende resource onder de tabel te bekijken.

Figuur 9. Een voorbeeld van een cachebron bekijken

Responsievere cache-foutopsporing

In Chrome 61 en ouder is het debuggen van caches die met de Cache API zijn gemaakt... 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 Cacheopslag nu in realtime bijgewerkt wanneer u een cache of resource 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 eerder markeert het tabblad Dekking alle code binnen een functie als gebruikt, zolang de functie wordt aangeroepen.

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 kunt u op het tabblad Dekking zien welke code binnen een functie wordt aangeroepen.

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

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om nieuwe functies, updates of iets anders met betrekking tot DevTools te bespreken.

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.