Wat is er nieuw in DevTools (Chrome 73)

Kayce Basques

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

Videoversie van deze release notes

Logpunten

Gebruik logpoints om berichten naar de console te loggen zonder je code te vervuilen met console.log() -aanroepen.

Om een ​​logpunt toe te voegen:

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

   

   Afbeelding 1. Een logpunt toevoegen

2. Selecteer 'Logpunt toevoegen' . De breakpoint-editor verschijnt.

   

   Afbeelding 2. De Breakpoint Editor

3. Voer in de breakpoint-editor de expressie in die u in de console wilt loggen.

   

   Figuur 3. Het invoeren van de Logpoint-uitdrukking

   Tip! Wanneer je een variabele (bijv. TodoApp ) wilt loggen, plaats de variabele dan in een object (bijv. {TodoApp} ) om de naam en waarde ervan in de console weer te geven. Zie Altijd objecten loggen en Verkorte notatie voor objecteigenschapswaarden voor meer informatie over deze syntax.

4. Druk op Enter of klik buiten de Breakpoint Editor om op te slaan. Het oranje icoontje boven het regelnummer geeft het logpunt aan.

   

   Afbeelding 4. Een oranje Logpoint-badge op lijn 174.

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

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

Zie Chromium-issue #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 veelvoorkomende 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 bijbehorende sneltoets te zien.

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

Code-dekkingsgegevens exporteren

Code coverage- gegevens kunnen nu als JSON-bestand worden geëxporteerd. 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 door DevTools is geanalyseerd. ranges beschrijft de gedeelten van de code die zijn gebruikt. start is de beginoffset van een gebruikt bereik. 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 met h1 { color: #317EFB; } . Met andere woorden, de eerste en laatste regelsets werden gebruikt en de middelste niet.

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

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

   

   Afbeelding 7. Het opdrachtmenu

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

   

   Figuur 8. Dekking weergeven

   Het tabblad 'Dekking' wordt geopend.

   

   Afbeelding 9. Het tabblad Dekking

3. Klik op Vernieuwen DevTools vernieuwt de pagina en registreert hoeveel code er wordt gebruikt in vergelijking met hoeveel er wordt uitgebracht.

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

Code coverage is ook beschikbaar in Puppeteer, een tool voor browserautomatisering die wordt onderhouden door het DevTools-team. Zie Coverage .

Zie Chromium-issue #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 Shift + Tab in te drukken, wordt het laatste bericht (of het resultaat van een geëvalueerde expressie) geselecteerd. Als het bericht links bevat, wordt de laatste link als eerste geselecteerd. Door op Enter te drukken, wordt de link in een nieuw tabblad geopend. Door op de pijltoets naar links te drukken, wordt het hele bericht geselecteerd (zie afbeelding 13 ).

Afbeelding 11. Een link scherpstellen

Door op de pijltoets omhoog te drukken, wordt de volgende link geselecteerd.

Afbeelding 12. Een andere link scherpstellen.

Als je nogmaals op de pijltoets omhoog drukt, wordt het hele bericht scherp in beeld gebracht.

Figuur 13. Een volledige boodschap focussen.

Door op de rechterpijltoets te drukken, wordt een samengevouwen stacktrace (of object, array, enzovoort) uitgevouwen.

Figuur 14. Het uitvouwen van een samengevouwen stapelspoor.

Door op de linkerpijltoets te drukken, wordt een uitgevouwen bericht of resultaat ingeklapt.

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

De lijn voor de AAA-contrastverhouding in de kleurenkiezer.

De kleurenkiezer toont nu een tweede lijn om aan te geven welke kleuren voldoen aan de AAA-contrastverhoudingsaanbeveling . De AA-lijn was er al sinds Chrome 65.

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

De kleuren tussen de twee lijnen geven kleuren aan 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 die aanbeveling. In figuur 15 is bijvoorbeeld alles onder de onderste lijn AAA, en alles boven de bovenste lijn voldoet zelfs niet aan de AA-aanbeveling.

Tip! Over het algemeen kun je de leesbaarheid van je pagina's verbeteren door de hoeveelheid tekst die voldoet aan de AAA-aanbeveling te vergroten. Als het om welke 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 kleurenkiezer om te leren hoe u deze functie kunt gebruiken.

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

Sla aangepaste geolocatie-overrides op.

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

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

   

   Afbeelding 16. Het commandomenu

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

   

   Afbeelding 17. Het tabblad Sensoren

3. Klik in het gedeelte Geolocation op Beheren . Instellingen > Geolocations wordt geopend.

   

   Afbeelding 18. Het tabblad Geolocations in Instellingen

4. Klik op Locatie toevoegen .

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

   

   Afbeelding 19. Een aangepaste geolocatie toevoegen.

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

Code vouwen

De panelen 'Bronnen' en 'Netwerk' ondersteunen nu code folding.

Figuur 20. Regels 54 tot en met 65 zijn omgevouwen.

Om codefolding in te schakelen:

1. Druk op F1 om de instellingen te openen.
2. Ga naar Instellingen > Voorkeuren > Bronnen en schakel Code folding in.

Om een ​​codeblok in te klappen:

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

Zie Chromium-issue #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' wanneer u een websocketverbinding inspecteert.

Afbeelding 21. Het tabblad Berichten

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

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

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

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .