Wat is er nieuw in DevTools (Chrome 107)

Jecelyn Yeen

Pas sneltoetsen aan in DevTools

U kunt nu sneltoetsen voor uw favoriete opdrachten in DevTools aanpassen.

Ga naar Instellingen > Snelkoppelingen , plaats de muisaanwijzer op een opdracht en klik op de knop Bewerken (penpictogram) om de sneltoets aan te passen. Je kunt ook akkoorden maken (ook wel sneltoetsen voor meerdere toetsen genoemd).

Pas sneltoetsen aan in DevTools.

Chroomuitgaves: 1335274 , 174309

Schakel tussen lichte en donkere thema's met een sneltoets

Configureer een sneltoets om gemakkelijk tussen lichte en donkere thema's te schakelen. Standaard wordt de actie niet toegewezen aan een sneltoets.

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

Chroomuitgaves: 1280398 , 1226363

Markeer C/C++-objecten in de Memory Inspector

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

Het herkennen van de bytes van een object in het omringende WebAssembly-geheugen was een pijnpunt. U moet de grootte van het object kennen en het aantal bytes vanaf het begin van het object kennen.

Met deze functie kunt u ze onderscheiden van het omringende geheugen. Zie De geheugeninspecteur uitbreiden voor foutopsporing in C/C++ voor meer informatie over de wijzigingen.

Markeer C/C++-objecten in de Memory Inspector.

Chroomuitgave: 1336568

Ondersteuning van volledige initiatorinformatie voor HAR-import

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

De initiatorinformatie helpt ontwikkelaars de oorsprong van een netwerkverzoek te traceren en netwerkgerelateerde problemen te identificeren.

Ondersteuning van volledige initiatorinformatie voor HAR-import.

Chroomuitgave: 1343185

Start DOM-zoekopdracht nadat u op Enter hebt gedrukt

U kunt nu de instelling Zoeken terwijl u typt uitschakelen, zodat de DOM-zoekopdracht altijd wordt gestart nadat u op Enter hebt gedrukt.

In het Elementenpaneel schakelt u de zoekbalk in of uit met Control of Command + F . Terwijl u een zoekopdracht in het zoektekstvak typt, springt de DOM-structuur naar het eerste overeenkomende element en markeert dit standaard.

Voor gebruikers, vooral voor testers die altijd met lange zoekopdrachten werken, is dit gedrag niet ideaal. De DOM-structuur kan meerdere keren verspringen terwijl u een lange zoekopdracht typt (bijvoorbeeld //div[@id="example"] ). Dit gedrag zorgt voor onnodige beweging.

DOM-zoekopdracht.

Ga naar Instellingen > Voorkeuren en schakel Zoeken uit terwijl u typt . Met deze wijziging wordt het zoeken pas gestart nadat u op Enter hebt gedrukt.

Zoeken terwijl u typt.

Chroomuitgave: 1344526

Geef start en end weer voor CSS-flexbox-eigenschappen voor align-content

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

align-content flexbox-eigenschappen.

Chroomuitgave: 1139945

Diverse hoogtepunten

  • Geef het juiste aantal berichten weer in de zijbalk van de console . Voorheen werden de tellingen niet vernieuwd bij het wissen van consoleberichten. ( 1343311 )

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.

Wat is er nieuw in DevTools

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