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

,

Kayce Basques

Nieuwe functies en veranderingen komen naar Devtools in Chrome 62:

Op het hoogste niveau wachten operators in de console

De console ondersteunt nu op topniveau await operatoren.

Met behulp van op het hoogste niveau wachten op operators in de console

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

Nieuwe screenshot workflows

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

Screenshots van een deel van de viewport

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

  1. Klik op Inspecteren Inspecteren of druk op opdracht + shift + c (Mac) of besturing + shift + c (Windows, Linux) om de inspectie -elementmodus in te voeren.
  2. Hold Command (Mac) of Control (Windows, Linux) en selecteer het gedeelte van het viewport waar u een screenshot van wilt maken.
  3. Laat je muis los. DevTools downloadt een screenshot van het gedeelte dat u hebt geselecteerd.

Een screenshot van een deel van het viewport maken

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

Screenshots van specifieke HTML -knooppunten

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

  1. Selecteer een element in het elementenpaneel .

    Een voorbeeld van een knooppunt

    Figuur 3 . In dit voorbeeld is het doel om een ​​screenshot te maken van de blauwe koptekst die de Tools bevat. Merk op dat dit knooppunt al is geselecteerd in de DOM -boom van het elementenpaneel

  2. Open het Commandomenu .

  3. Begin met het typen van 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 Grid Markeering

Om het CSS -raster te bekijken dat een element beïnvloedt, zweeft u over een element in de DOM -boom van het elementenpaneel . Een stippellijn verschijnt rond elk van de roosterartikelen. Dit werkt alleen wanneer het geselecteerde item, of de ouder van het geselecteerde item, wordt display:grid toegepast.

Een CSS -raster markeren

Figuur 5 . Een CSS -raster markeren

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

Een nieuwe API voor het opvragen van heap -objecten

Call queryObjects(Constructor) van de console om een ​​reeks objecten te retourneren die zijn gemaakt met de opgegeven constructor. 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() .

De reikwijdte van queryObjects() is de momenteel geselecteerde uitvoeringscontext in de console . Zie Uitvoeringscontext selecteren .

Nieuwe consolefilters

De console ondersteunt nu negatieve en URL -filters.

Negatieve filters

Type -<text> In het filtervak ​​om elk consolebericht uit te filteren met <text> .

Een voorbeeld van 3 berichten die worden uitgefilterd

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

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

  • In de berichttekst.
  • In de bestandsnaam waaruit het bericht is ontstaan.
  • In de stapeltracetekst.

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

URL -filters

Type 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 verschijnt, 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 te zweven over de scriptnaam, kunt u zien dat de hostnaam deze tekst bevat

HAR -import in het netwerkpaneel

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

Een HAR -bestand importeren

Figuur 8 . Een HAR -bestand importeren

Vooruitste cachebronnen in het applicatiepaneel

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

Een voorbeeld van een cachebron

Figuur 9 . Een voorbeeld van een cachebron

Meer responsieve cache -foutopsporing

In Chrome 61 en eerder is foutopsporingscaches gemaakt met de cache API ... ruw. Wanneer een pagina bijvoorbeeld een nieuwe cache maakt, 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 een bron maakt, bijwerkt of verwijdert. Bekijk de onderstaande video voor een voorbeeld.

Zie de demo van de cache -opslag om het zelf uit te proberen.

Block-niveau codedekking

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

Een voorbeeld van het tabblad dekking in Chrome 61

Figuur 10 . Een voorbeeld van het tabblad dekking in Chrome 61. Lijn 4 wordt gemarkeerd gebruikt, ook al is het nooit uitgevoerd

Beginnend in 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. Lijn 4 is ongebruikt gemarkeerd

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 met betrekking tot Devtools te bespreken.

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .

,

Kayce Basques

New features and changes coming to DevTools in Chrome 62:

Top-level await operators in the Console

The Console now supports top-level await operators.

Using top-level await operators in the Console

Figure 1 . Using top-level await operators in the Console

New screenshot workflows

You can now take a screenshot of a portion of the viewport, or of a specific HTML node.

Screenshots of a portion of the viewport

To take a screenshot of a portion of your viewport:

  1. Click Inspect Inspecteren or press Command + Shift + C (Mac) or Control + Shift + C (Windows, Linux) to enter Inspect Element Mode.
  2. Hold Command (Mac) or Control (Windows, Linux) and select the portion of the viewport that you want to take a screenshot of.
  3. Release your mouse. DevTools downloads a screenshot of the portion that you selected.

Taking a screenshot of a portion of the viewport

Figure 2 . Taking a screenshot of a portion of the viewport

Screenshots of specific HTML nodes

To take a screenshot of a specific HTML node:

  1. Select an element in the Elements panel.

    An example of a node

    Figure 3 . In this example, the goal is to take a screenshot of the blue header that contains the text Tools . Note that this node is already selected in the DOM Tree of the Elements panel

  2. Open het Commandomenu .

  3. Start typing node and select Capture node screenshot . DevTools downloads a screenshot of the selected node.

    The result of the 'Capture node screenshot' command

    Figure 4 . The result of the Capture node screenshot command

CSS Grid highlighting

To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. A dashed border appears around each of the grid items. This only works when the selected item, or the parent of the selected item, has display:grid applied to it.

Highlighting a CSS Grid

Figure 5 . Highlighting a CSS Grid

Check out the video below to learn the basics of CSS Grid in less than 2 minutes.

A new API for querying heap objects

Call queryObjects(Constructor) from the Console to return an array of objects that were created with the specified constructor. Bijvoorbeeld:

  • queryObjects(Promise) . Returns all Promises.
  • queryObjects(HTMLElement) . Retourneert alle HTML-elementen.
  • queryObjects(foo) , where foo is a function name. Retourneert alle objecten die zijn geïnstantieerd via new foo() .

The scope of queryObjects() is the currently-selected execution context in the Console . See Selecting execution context .

New Console filters

The Console now supports negative and URL filters.

Negative filters

Type -<text> in the Filter box to filter out any Console message that includes <text> .

An example of 3 messages that will be filtered out

Figure 6 . The first statement logs one , two , three , and four to the Console . two is hidden because -two is entered in the Filter box

DevTools filters out a message if <text> is found:

  • In the message text.
  • In the filename from which the message originated.
  • In the stack trace text.

The negative filter also works with regular expressions such as -/[4-5]*ms/ .

URL filters

Type url:<text> in the Filter box to only show messages that originated from a script whose URL includes <text> .

The filter uses fuzzy matching. If <text> appears anywhere in the URL, then DevTools shows the message.

An example of URL filtering

Figure 7 . Using URL filtering to only display messages that originate from scripts whose URL includes hymn . By hovering over the script name, you can see that the host name includes this text

HAR imports in the Network panel

Drag and drop a HAR file into the Network panel to import it.

Importing a HAR file

Figure 8 . Importing a HAR file

Previewable cache resources in the Application panel

Click a row in a Cache Storage table to see a preview of that resource below the table.

Previewing a cache resource

Figure 9 . Previewing a cache resource

More responsive cache debugging

In Chrome 61 and earlier, debugging caches created with the Cache API is... rough. For example, when a page creates a new cache, you have to manually refresh the page or DevTools in order to see the new cache.

In Chrome 62, the Cache Storage tab now updates in real-time whenever you create, update, or delete a cache or a resource. Watch the video below for an example.

See the Cache Storage Demo to try it out yourself.

Block-level code coverage

In Chrome 61 and earlier, the Coverage tab marks all of the code within a function as used, so long as the function is called.

An example of the Coverage tab in Chrome 61

Figure 10 . An example of the Coverage tab in Chrome 61. Line 4 is marked used, even though it never executes

Starting in Chrome 62, the Coverage tab now tells you which code within a function is called.

An example of the Coverage tab in Chrome 62

Figure 11 . An example of the Coverage tab in Chrome 62. Line 4 is marked unused

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

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.