Wat is er nieuw in DevTools (Chrome 107)

Jecelyn Yeen

Toetsenbord sneltoetsen aanpassen in DevTools

Je kunt nu in DevTools sneltoetsen voor je favoriete commando's aanpassen.

Ga naar Instellingen > Sneltoetsen , beweeg de muis over een opdracht en klik op de knop Bewerken (penpictogram) om de sneltoets aan te passen. Je kunt ook combinaties van toetsen maken (ook wel sneltoetsen met meerdere toetsaanslagen genoemd).

Toetsenbord sneltoetsen aanpassen in DevTools.

Chromium-problemen: 1335274 , 174309

Schakel tussen lichte en donkere thema's met een sneltoets.

Configureer een sneltoets om gemakkelijk te schakelen tussen het lichte en donkere thema . Standaard is er geen sneltoets voor deze functie beschikbaar.

Schakel tussen lichte en donkere thema's met een sneltoets.

Chromium-problemen: 1280398 , 1226363

Markeer C/C++-objecten in de geheugeninspecteur.

De geheugeninspecteur markeert alle bytes van een C/C++-geheugenobject.

Het herkennen van de bytes van een object binnen het omringende WebAssembly-geheugen was een lastig punt. Je moet de grootte van het object weten en de bytes vanaf het begin van het object tellen.

Met deze functie kunt u ze onderscheiden van het omliggende geheugen. Zie ' De geheugeninspecteur uitbreiden voor C/C++-debugging' voor meer informatie over de wijzigingen.

Markeer C/C++-objecten in de geheugeninspecteur.

Chromium-probleem: 1336568

Ondersteuning voor volledige initiatorinformatie voor HAR-import

Volledige initiatorinformatie is nu beschikbaar voor HAR-import . Voorheen toonde het netwerkpaneel tijdens het importeren slechts gedeeltelijke initiatorinformatie.

De informatie over de initiatiefnemer helpt ontwikkelaars de oorsprong van een netwerkverzoek te achterhalen en netwerkgerelateerde problemen te identificeren.

Ondersteuning voor volledige initiatorinformatie bij HAR-import.

Chromium-probleem: 1343185

Start de DOM-zoekopdracht na het indrukken Enter

Je kunt nu de instelling 'Zoeken tijdens het typen' uitschakelen, zodat er altijd een DOM-zoekopdracht wordt gestart na het indrukken van Enter .

In het paneel Elementen kunt u de zoekbalk in- of uitschakelen met Control of Command + F. Terwijl u een zoekterm typt in het zoekveld, springt de DOM-structuur naar het eerste overeenkomende element en wordt dit standaard gemarkeerd.

Voor gebruikers, met name testers die vaak met lange zoekopdrachten werken, is dit gedrag niet ideaal. De DOM-structuur kan meerdere keren verspringen tijdens het typen van een lange zoekopdracht (bijv. //div[@id="example"] ). Dit gedrag zorgt voor onnodige beweging.

DOM-zoekopdracht.

Ga naar Instellingen > Voorkeuren en schakel 'Zoeken tijdens het typen' uit. Hierdoor start de zoekfunctie pas nadat je op Enter drukt.

Zoeken tijdens het typen - instelling.

Chromium-probleem: 1344526

Toon start en end voor CSS flexbox-eigenschappen met de eigenschap align-content

Bewerk in het deelvenster Stijlen de eigenschappen align-content in een CSS-klasse met display: flex of display: inline-flex . Het start en end worden in het vervolgkeuzemenu voor automatisch aanvullen weergegeven met pictogrammen.

align-content flexbox-eigenschappen.

Chromium-probleem: 1139945

Diverse hoogtepunten

  • De juiste aantallen berichten worden nu weergegeven in de zijbalk van de console . Voorheen werden de aantallen niet bijgewerkt wanneer consoleberichten werden gewist. ( 1343311 )

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.

Wat is er nieuw in DevTools?

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