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

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

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

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

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 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 links bevat, wordt de laatste link 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. 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 .

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

Dit is wat nieuw is in Devtools in Chrome 73.

Video -versie van deze release -opmerkingen

Logpunten

Gebruik LogPoints om berichten in de console te loggen zonder uw code op te richten met console.log() -oproepen.

Om een ​​logpoint toe te voegen:

1. Klik met de rechtermuisknop op het regelnummer waar u het logpoint wilt toevoegen.

   

   Figuur 1 . Een logpoint toevoegen

2. Selecteer LogPoint toevoegen . De breakpoint -editor duikt op.

   

   Figuur 2 . De breekpunteditor

3. Voer in de breekpunteditor de uitdrukking in die u wilt aanmelden bij de console.

   

   Figuur 3 . Het typen van de logpoint -expressie

   Tip! Wanneer u een variabele uitlogt (bijv. TodoApp ), wikkelt u de variabele in een object (bijv. {TodoApp} ) om de naam en waarde in de console uit te melden. Zie altijd logobjecten en objecteigenschapswaarde steno om meer te weten te komen over deze syntaxis.

4. Druk op Enter of klik buiten de Breakpoint -editor om op te slaan. De oranje badge bovenop het lijnnummer vertegenwoordigt het logpoint.

   

   Figuur 4 . Een oranje logpoint -badge op lijn 174

De volgende keer dat de regel uitvoert, registreert Devtools het resultaat van de LogPoint -expressie op de console.

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

Zie Chromium Issue #700519 om bugs te rapporteren of verbeteringen voor te stellen.

Gedetailleerde tooltips in de inspectiemodus

Bij het inspecteren van een knooppunt toont DevTools nu een uitgebreide tooltip die algemeen belangrijke informatie bevat, zoals lettergrootte, lettertypekleur, contrastverhouding en dimensies van het doosmodel.

Figuur 6 . Een knooppunt inspecteren

Om een ​​knooppunt te inspecteren:

1. Klik op Inspecteren .

   Tip! Hover over inspecteren om zijn sneltoets te zien.

2. Hover in uw viewport over het knooppunt.

Codedekkingsgegevens exporteren

Gegevens van de codedekking kunnen nu worden geëxporteerd als een JSON -bestand. De JSON ziet er zo 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 gebruikte code. 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 laatste regelsets werden gebruikt en de middelste was dat niet.

Om te analyseren hoeveel code wordt gebruikt op pagina laden en exporteren de gegevens:

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

   

   Figuur 7 . Het opdrachtmenu

2. Begin met het typen van coverage , selecteer de dekking weergeven en druk vervolgens op ENTER .

   

   Figuur 8 . Toon dekking

   Het tabblad dekking wordt geopend.

   

   Figuur 9 . Het tabblad dekking

3. Klik op Herlaad . DevTools laadt de pagina opnieuw en neemt vast hoeveel code wordt gebruikt in vergelijking met hoeveel wordt verzonden.

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

Codedekking is ook beschikbaar in Puppeteer, een browserautomatiseringstool dat wordt onderhouden door het DevTools -team. Zie dekking .

Zie Chromium Issue #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.

Druk op Shift + Tab focust het laatste bericht (of resultaat van een geëvalueerde uitdrukking). Als het bericht links bevat, wordt de laatste link eerst gemarkeerd. Druk op Enter Opent de link op een nieuw tabblad. Druk op de linker pijltoets markeert het hele bericht (zie figuur 13 ).

Figuur 11 . Een link concentreren

Als u op de pijl omhoog gaat, wordt de volgende link gericht.

Figuur 12 . Een andere link concentreren

Als u op de pijltoets op u drukt, wordt opnieuw het hele bericht gericht.

Figuur 13 . Een heel boodschap concentreren

Als u op de pijl naar rechts drukt, breidt u een ingeklapte stapeltraceer uit (of object, array, enzovoort).

Figuur 14 . Een ingeklapte stapeltrace uitbreiden

Als u op de linker pijltoets drukt, wordt een uitgebreid bericht of resultaat samengevoegd.

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

AAA-contrastverhoudingslijn in de Kleurkiezer

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

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

Kleuren tussen de 2 lijnen vertegenwoordigen kleuren die voldoen aan de AA -aanbeveling, maar niet voldoen aan de AAA -aanbeveling. Wanneer een kleur aan de AAA -aanbeveling voldoet, voldoet alles aan dezelfde kant van die kleur ook aan de aanbeveling. In figuur 15 is bijvoorbeeld alles onder de onderste lijn AAA en alles boven de bovenste regel 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 voldoen aan de AAA -aanbeveling om een ​​of andere reden niet mogelijk is, probeer dan op zijn minst aan de AA -aanbeveling te voldoen.

Zie de contrastverhouding in de kleurenkiezer om te leren hoe u toegang kunt krijgen tot deze functie.

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

Sla aangepaste geolocatie-overschrijvingen op

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

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

   

   Figuur 16 . Het opdrachtmenu

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

   

   Figuur 17 . Het tabblad Sensoren

3. Klik in de sectie Geolocatie op Beheer . Instellingen > Geolocaties opent zich.

   

   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 Issue #649657 om bugs te melden of verbeteringen voor te stellen.

Code vouwen

De bronnen en netwerkpanelen ondersteunen nu code vouwen.

Figuur 20 . Lijnen 54 tot 65 zijn gevouwen

Om code vouwen in te schakelen:

1. Druk op F1 om instellingen te openen.
2. Onder instellingen > Voorkeuren > Bronnen schakelen code vouwen in .

Om een ​​code blok te vouwen:

1. Beweeg uw muis over het lijnnummer waar het blok begint.
2. Klik op vouwen .

Zie Chromium Issue #328431 om bugs te rapporteren of verbeteringen voor te stellen.

Berichten tabblad

Het tabblad Frames is omgedoopt tot het tabblad Berichten . Dit tabblad is alleen beschikbaar in het netwerkpaneel bij het inspecteren van een websocketverbinding.

Figuur 21 . Het tabblad Berichten

Zie Chromium Issue #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. 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 .

Wat is er nieuw in DevTools

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