Wat is er nieuw in DevTools (Chrome 73)

Kayce Basques

Dit is wat er nieuw is in DevTools in Chrome 73.

Videoversie van deze releaseopmerkingen

Logpunten

Gebruik Logpoints om berichten in 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 Logpunt toevoegen . De Breakpoint-editor verschijnt.

   

   Figuur 2 . De Breakpoint-editor

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

   

   Figuur 3 . De Logpoint-expressie typen

   Tip! Wanneer u een variabele uitlogt (bijvoorbeeld TodoApp ), plaatst u de variabele in een object (bijvoorbeeld {TodoApp} ) om de naam en waarde ervan in de console uit te loggen. Zie Objecten altijd loggen en Objecteigenschapswaarde steno voor meer informatie over deze syntaxis.

4. Druk op Enter of klik buiten de Breakpoint Editor om op te slaan. De oranje badge bovenaan het lijnnummer vertegenwoordigt het Logpoint.

   

   Figuur 4 . Een oranje Logpoint-badge op lijn 174

De volgende keer dat de regel wordt uitgevoerd, registreert DevTools het resultaat van de Logpoint-expressie naar 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 algemeen belangrijke informatie zoals lettergrootte, letterkleur, contrastverhouding en afmetingen van het doosmodel.

Figuur 6 . Een knooppunt inspecteren

Een knooppunt inspecteren:

1. Klik op Inspecteren .

   Tip! Beweeg over Inspecteren om de sneltoets te zien.

2. Beweeg in uw viewport over het knooppunt.

Codedekkingsgegevens exporteren

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 werd gebruikt. end is de eindoffset. text is de volledige tekst van het bestand.

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

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

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

   

   Figuur 7 . Het Commandomenu

2. Begin met het typen van coverage , selecteer Dekking weergeven en druk vervolgens op Enter .

   

   Figuur 8 . Toon dekking

   Het tabblad Dekking wordt geopend.

   

   Figuur 9 . Het tabblad Dekking

3. Klik op Opnieuw laden . DevTools laadt de pagina opnieuw en registreert hoeveel code er wordt gebruikt in vergelijking met de hoeveelheid die 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 onderhouden door het DevTools-team. Zie Dekking .

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

Navigeer door de console met het toetsenbord

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

Als u op Shift + Tab drukt, wordt het laatste bericht (of het resultaat van een geëvalueerde uitdrukking) scherpgesteld. Als het bericht koppelingen bevat, wordt de laatste koppeling als eerste gemarkeerd. Als u op Enter drukt, wordt de link in een nieuw tabblad geopend. Als u op de pijl -links drukt, wordt het hele bericht gemarkeerd (zie Figuur 13 ).

Figuur 11 . Een link focussen

Als u op de pijl- omhoogtoets drukt, wordt de volgende link scherpgesteld.

Figuur 12 . Een andere link focussen

Als u nogmaals op de pijl- omhoogtoets drukt, wordt het hele bericht scherpgesteld.

Figuur 13 . Een hele boodschap onder de aandacht brengen

Als u op de pijl -rechts drukt, wordt een samengevouwen stapeltracering (of object, array, enzovoort) uitgevouwen.

Figuur 14 . Een samengevouwen stapeltracering uitbreiden

Als u op de pijl -links 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 Kleurkiezer

De Kleurkiezer toont nu een tweede regel om aan te geven welke kleuren voldoen aan de AAA-contrastverhoudingsaanbeveling . De AA-lijn bestaat 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 is alles onder de onderste lijn bijvoorbeeld AAA, en alles boven de bovenste lijn voldoet niet eens aan de AA-aanbeveling.

Tip! Over het algemeen kunt u de leesbaarheid van uw pagina's verbeteren door de hoeveelheid tekst te vergroten die voldoet aan de AAA-aanbeveling. Als het om wat voor reden dan ook 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 Kleurkiezer om te zien hoe u deze functie kunt gebruiken.

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

Sla aangepaste geolocatie-overschrijvingen op

Op het tabblad Sensoren kunt u nu aangepaste geolocatieoverschrijvingen opslaan.

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

   

   Figuur 16 . Het Commandomenu

2. Typ sensors , selecteer Sensoren tonen 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 vervolgens 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 het vouwen van code.

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 Code vouwen in.

Een blok code 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 Netwerkpaneel 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 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.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .