Wat is er nieuw in DevTools (Chrome 73)

Kayce Basques

Dit is er nieuw in DevTools in Chrome 73.

Videoversie van deze release-opmerkingen

Logpunten

Gebruik Logpoints om berichten naar de Console te loggen zonder uw code te vervuilen met console.log() -aanroepen.

Om een logpunt toe te voegen:

1. Klik met de rechtermuisknop op het regelnummer waaraan u het Logpoint wilt toevoegen.

   

   Figuur 1. Een logpunt toevoegen

2. Selecteer Logpoint toevoegen . De Breakpoint Editor verschijnt.

   

   Figuur 2. De Breakpoint Editor

3. Voer in de Breakpoint Editor de expressie in die u in de console wilt vastleggen.

   

   Figuur 3. Het typen van de Logpoint-expressie

   Tip! Wanneer u een variabele (bijv. TodoApp ) uitlogt, wikkelt u deze variabele in een object (bijv. {TodoApp} ) om de naam en waarde ervan in de console uit te loggen. Zie Objecten altijd loggen en Afkorting van objecteigenschapswaarden voor meer informatie over deze syntaxis.

4. Druk op Enter of klik buiten de Breakpoint Editor om op te slaan. De oranje badge boven het regelnummer geeft het Logpoint aan.

   

   Figuur 4. Een oranje Logpoint-badge op regel 174

De volgende keer dat de regel wordt uitgevoerd, registreert DevTools het resultaat van de Logpoint-expressie in de console.

Figuur 5. Het resultaat van de Logpoint-expressie in de console

Zie Chromium-probleem #700519 om bugs te melden of verbeteringen voor te stellen.

Gedetailleerde tooltips in de inspectiemodus

Bij het inspecteren van een knooppunt toont DevTools nu een uitgebreide tooltip met veelgebruikte belangrijke informatie, zoals lettergrootte, letterkleur, contrastverhouding en afmetingen van het boxmodel.

Figuur 6. Een knooppunt inspecteren

Om een knooppunt te inspecteren:

1. Klik op Inspecteren .

   Tip! Beweeg de muis over 'Inspecteren' om de sneltoets te zien.

2. Beweeg de muis over het knooppunt in uw viewport.

Exporteer codedekkingsgegevens

Codedekkingsgegevens kunnen nu worden geëxporteerd als een JSON-bestand. De JSON ziet er als volgt uit:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url is de URL van het CSS- of JavaScript-bestand dat DevTools heeft geanalyseerd. ranges beschrijft de delen van de code die zijn gebruikt. start is de startoffset voor een bereik dat is gebruikt. end is de eindoffset. text is de volledige tekst van het bestand.

In het bovenstaande voorbeeld komt het bereik 0 tot en met 21 overeen met body { margin: 1em; } en het bereik 45 tot en met 67 met h1 { color: #317EFB; } . Met andere woorden: de eerste en de laatste regelset zijn gebruikt en de middelste niet.

Om te analyseren hoeveel code er wordt gebruikt bij het laden van de pagina en om de gegevens te exporteren:

1. Druk op Control + Shift + P of Command + Shift + P (Mac) om het opdrachtmenu te openen.

   

   Figuur 7. Het opdrachtmenu

2. Begin met het typen van coverage , selecteer Show Coverage en druk op Enter .

   

   Figuur 8. Dekking weergeven

   Het tabblad Dekking wordt geopend.

   

   Figuur 9. Het tabblad Dekking

3. Klik op Opnieuw laden DevTools herlaadt de pagina en registreert hoeveel code er wordt gebruikt in vergelijking met hoeveel er wordt verzonden.

4. Klik op Exporteren om de gegevens te exporteren als een JSON-bestand.

Codedekking is ook beschikbaar in Puppeteer, een browserautomatiseringstool die wordt beheerd door het DevTools-team. Zie Dekking .

Zie Chromium-probleem #717195 om bugs te melden of verbeteringen voor te stellen.

Navigeer door de console met het toetsenbord

Je kunt nu het toetsenbord gebruiken om door de console te navigeren. Hier is een voorbeeld.

Door op Shift + Tab te drukken, wordt de focus op het laatste bericht (of resultaat van een geëvalueerde expressie) geplaatst. Als het bericht links bevat, wordt de laatste link eerst gemarkeerd. Door op Enter te drukken, wordt de link in een nieuw tabblad geopend. Door op de linkerpijltoets te drukken, wordt het hele bericht gemarkeerd (zie Afbeelding 13 ).

Figuur 11. Een link focussen

Wanneer u op de pijl- omhoog -toets drukt, wordt de focus op de volgende link gelegd.

Figuur 12. Een andere link focussen

Wanneer u nogmaals op de pijl- omhoogtoets drukt, wordt de focus op het hele bericht gelegd.

Figuur 13. Een heel bericht focussen

Wanneer u op de rechterpijltoets drukt, wordt een samengevouwen stack trace (of object, array, enzovoort) uitgevouwen.

Figuur 14. Een samengevouwen stack trace uitvouwen

Wanneer u op de linkerpijltjestoets drukt, wordt een uitgevouwen bericht of resultaat samengevouwen.

Zie Chromium-probleem #865674 om bugs te melden of verbeteringen voor te stellen.

AAA-contrastverhoudingslijn in de kleurenkiezer

De kleurenkiezer toont nu een tweede regel om aan te geven welke kleuren voldoen aan de AAA-contrastverhouding . De AA-regel is er al sinds Chrome 65.

Figuur 15. De AA-lijn (boven) en AAA-lijn (onder)

Kleuren tussen de twee lijnen vertegenwoordigen kleuren die voldoen aan de AA-aanbeveling, maar niet aan de AAA-aanbeveling. Wanneer een kleur voldoet aan de AAA-aanbeveling, voldoet alles aan dezelfde kant van die kleur ook aan de aanbeveling. In figuur 15 bijvoorbeeld, is alles onder de onderste lijn AAA, en voldoet alles boven de bovenste lijn niet eens aan de AA-aanbeveling.

Tip! Over het algemeen kunt u de leesbaarheid van uw pagina's verbeteren door de hoeveelheid tekst die voldoet aan de AAA-aanbeveling te vergroten. Als het om de een of andere reden niet mogelijk is om aan de AAA-aanbeveling te voldoen, probeer dan in ieder geval aan de AA-aanbeveling te voldoen.

Zie Contrastverhouding in de Kleurenkiezer voor meer informatie over hoe u deze functie kunt gebruiken.

Zie Chromium-probleem #879856 om bugs te melden of verbeteringen voor te stellen.

Aangepaste geolocatie-overschrijvingen opslaan

Via het tabblad Sensoren kunt u nu aangepaste geolocatie-overschrijvingen opslaan.

1. Druk op Control + Shift + P of Command + Shift + P (Mac) om het opdrachtmenu te openen.

   

   Figuur 16. Het opdrachtmenu

2. Typ sensors , selecteer Sensoren weergeven en druk op Enter . Het tabblad Sensoren wordt geopend.

   

   Figuur 17. Het tabblad Sensoren

3. Klik in het gedeelte Geolocatie op Beheren . Instellingen > Geolocaties wordt geopend.

   

   Figuur 18. Het tabblad Geolocaties in Instellingen

4. Klik op Locatie toevoegen .

5. Voer een locatienaam, breedtegraad en lengtegraad in en klik op Toevoegen .

   

   Figuur 19. Een aangepaste geolocatie toevoegen

Zie Chromium-probleem #649657 om bugs te melden of verbeteringen voor te stellen.

Code vouwen

De panelen Bronnen en Netwerk ondersteunen nu codevouwing.

Figuur 20. Regels 54 tot en met 65 zijn gevouwen

Om codevouwen in te schakelen:

1. Druk op F1 om Instellingen te openen.
2. Schakel onder Instellingen > Voorkeuren > Bronnen de optie Code vouwen in .

Om een codeblok te vouwen:

1. Beweeg uw muis over het regelnummer waar het blok begint.
2. Klik op Vouwen .

Zie Chromium-probleem #328431 om bugs te melden of verbeteringen voor te stellen.

Tabblad Berichten

Het tabblad Frames is hernoemd naar het tabblad Berichten . Dit tabblad is alleen beschikbaar in het paneel Netwerk bij het inspecteren van een websocketverbinding.

Figuur 21. Het tabblad Berichten

Zie Chromium-probleem #802182 om bugs te melden of verbeteringen voor te stellen.

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.