Deze pagina is vertaald door de Cloud Translation API.

Wat is er nieuw in DevTools (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

Recorder-updates

Ondersteuning voor herhalingsextensies

De Recorder introduceert ondersteuning voor aangepaste afspeelopties die u met een extensie in DevTools kunt insluiten.

Probeer de voorbeeldextensie . Selecteer de nieuwe aangepaste herhalingsoptie om de aangepaste herhalingsinterface te openen.

Aangepaste herhalings-UI.

Om de Recorder aan uw behoeften aan te passen en te integreren met uw tools, kunt u overwegen uw eigen extensie te ontwikkelen: verken de chrome.devtools.recorder API en bekijk meer extensievoorbeelden .

Chroomuitgave: 1400243 .

Neem op met pierce-selectors

Naast aangepaste CSS-, ARIA-, tekst- en XPath-selectors kunt u nu opnemen met behulp van pierce-selectors . Deze selectors gedragen zich als CSS-selectors, maar kunnen ook door schaduwwortels heen dringen.

Start een nieuwe opname op een pagina met schaduw-DOM en vink aan Pierce in Selector-typen om op te nemen . Leg uw interactie met elementen in de schaduw-DOM vast en inspecteer de bijbehorende stap.

Instellen dat de recorder doorsteekkiezers gebruikt; Pierce-selector in actie.

Chroomuitgave: 1411188 .

Exporteer als een poppenspelerscript met Lighthouse-analyse

The Recorder introduceert een nieuwe exportoptie: Puppeteer (inclusief Lighthouse-analyse) . Met Puppeteer kunt u Chrome automatiseren en beheren. Met Lighthouse kunt u de prestaties van uw website vastleggen en verbeteren.

Open uw opname, klik Exporteer , selecteer de nieuwe optie en sla het .js bestand op.

Exporteer poppenspeler (inclusief Lighthouse-analyse).

Voer het Puppeteer-script uit om een Lighthouse-rapport op te halen in een flow.report.html -bestand.

Het Lighthouse-rapport wordt geopend in Chrome.

Verkrijg extensies

Ontdek opties om uw recorderervaring aan te passen, bijvoorbeeld met aangepaste exportopties. Verkrijg extensies voor de Recorder door op de knop te klikken Exporteren > Extensies ophalen in een opname.

De optie Extensies ophalen in het vervolgkeuzemenu Exporteren.

Voeg gerust uw eigen extensie toe aan de lijst met Recorderextensies . Wij zien jouw naam graag terug op de lijst!

Chroomafgiften: 1417104 , 1413168 .

Elementen > Stijlupdates

CSS-documentatie

Hoe vaak per dag zoekt u documentatie over CSS-eigenschappen op? Het deelvenster Elementen > Stijlen toont u nu een korte beschrijving wanneer u de muisaanwijzer op een eigenschap plaatst.

De tooltip met documentatie over een CSS-eigenschap.

De tooltip bevat ook een link Meer informatie die u naar een MDN CSS-referentie voor deze property brengt.

Als u CSS goed kent, vindt u de tooltips misschien hinderlijk. Als u ze allemaal wilt uitschakelen, vinkt u dit aan Niet laten zien .

Om ze weer in te schakelen, vinkt u aan Instellingen > Voorkeuren > Elementen > Tooltip voor CSS-documentatie weergeven .

Chroomuitgave: 1401107 .

Ondersteuning voor CSS-nesten

Het deelvenster Elementen > Stijlen herkent nu de syntaxis van CSS-nesten en past geneste stijlen toe op de juiste elementen.

Chroomuitgave: 1172985 .

Markering van logpunten en voorwaardelijke breekpunten in de console

Door de verbeterde breakpoint UX verder te verbeteren, markeert de console nu berichten die worden geactiveerd door breakpoints:

console.* roept voorwaardelijke breekpunten op met een oranje vraagteken ?
Logpoint -berichten met roze twee stippen ..

Wijzigingen in de manier waarop de console nu berichten weergeeft die worden geactiveerd door breekpunten: met pictogrammen en de juiste bronlink.

De console geeft u nu de juiste ankerkoppelingen naar breekpunten in bronbestanden in plaats van VM<number> -scripts die Chrome maakt om elk stukje Javascript op V8 uit te voeren.

Klik op de link naast het breekpuntbericht om rechtstreeks naar de breekpunteditor te gaan.

De ankerlink naast een logpoint-bericht waarmee de breakpoint-editor wordt geopend.

Chroomuitgave: 1027458 .

Negeer irrelevante scripts tijdens het debuggen

Om u te helpen zich te concentreren op de belangrijkste delen van uw code, kunt u nu irrelevante scripts toevoegen aan de negeerlijst, rechtstreeks vanuit de bestandsstructuur in het deelvenster Bronnen > Pagina .

Klik met de rechtermuisknop op een script of map en selecteer een van de negeeropties. Mogelijk ziet u opties om het script of de map aan en uit de lijst toe te voegen of te verwijderen. De Debugger negeert scripts die aan de lijst zijn toegevoegd en laat deze weg in de call-stack.

Contextmenu's van een map en script met negeergerelateerde opties.

Alle op de negeerlijst vermelde scripts en mappen worden grijs weergegeven in de bestandsstructuur.

Scripts en mappen die op de negeerlijst staan, worden grijs weergegeven. U kunt ze verbergen met een experimentele optie in het vervolgkeuzemenu Meer opties.

Als u een genegeerd script selecteert, brengt de knop Configureren u naar Instellingen > Negeerlijst . U kunt ook genegeerde bronnen uit de bestandsboom verbergen met > Verberg bronnen op de negeerlijst .

Chroomuitgave: 883325 .

Beëindiging van JavaScript Profiler is gestart

Al in Chrome 58 was het DevTools-team van plan om de JavaScript Profiler uiteindelijk af te schaffen en Node.js- en Deno-ontwikkelaars het prestatiepaneel te laten gebruiken voor het profileren van JavaScript-CPU-prestaties.

Deze DevTools-versie (112) start de afschaffing van JavaScript Profiler in vier fasen . Het JavaScript Profiler- paneel toont nu de bijbehorende waarschuwingsbanner.

Gebruik in plaats van de Profiler het paneel Prestaties om de CPU te profileren.

Lees meer en geef feedback in de bijbehorende RFC en crbug.com/1354548 .

Chroomuitgave: 1417647 .

Emuleer verminderd contrast

Het tabblad Rendering voegt een nieuwe optie toe aan de lijst Gebrek aan zicht emuleren: Verminderd contrast . Met deze optie kunt u ontdekken hoe uw website er uitziet voor mensen met een verminderde contrastgevoeligheid.

De optie voor verminderd contrast die is geselecteerd onder de functionaliteit 'Emuleer zichtgebreken'.

Houd er rekening mee dat de lijstopties zijn bijgewerkt om u te vertellen welke kleurongevoeligheid de opties vertegenwoordigen.

Met DevTools kunt u alle contrastproblemen in één keer vinden en oplossen. Zie Uw website beter leesbaar maken voor meer informatie.

Chroomuitgaves: 1412719 , 1412721 .

Vuurtoren 10

Het Lighthouse- paneel draait nu Lighthouse 10.0.1 . Zie Wat is er nieuw in Lighthouse 10.0.1 voor meer details.

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Vuurtoren > > Verouderde navigatie is nu standaard uitgeschakeld. Deze optie maakt gebruik van de oudere Lighthouse-configuratie in de navigatiemodus.

Oude navigatie uitgeschakeld.

Lighthouse 10 gebruikt nu Moto G Power als het standaard emulatieapparaat . DevTools heeft dit apparaat toegevoegd aan Instellingen > Apparaten .

Moto G Power in de lijst Apparaten.

Chroomuitgave: 772558 .

Een Console-waarschuwing om de ophaalhandler van uw no-op service worker te verwijderen

Chrome 112 slaat no-op (geen bewerking) ophaalhandlers van servicemedewerkers over omdat deze de navigatie kunnen vertragen, maar geen doel dienen. Dergelijke handlers zijn niet langer nodig om uw website te kwalificeren als Progressive Web App .

De console geeft nu een waarschuwing weer als er een no-op fetch-handler op uw website wordt aangetroffen. Overweeg om het te verwijderen.

Een no-op fetch-handler en de bijbehorende waarschuwing in de console.

Chroomuitgave: 1347319 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

In het deelvenster Bronnen > Breekpunten worden nu onderscheidende bestandspaden weergegeven naast dubbelzinnige bestandsnamen ( 1403924 ).
De hoofdsectie in het vlammendiagram van het prestatiepaneel geeft nu CpuProfiler::StartProfiling als Profiler Overhead ( 1358602 ).
DevTools verbeterde automatische aanvulling:
- Bronnen : consistente aanvullingen van elk woord ( 1320204 ).
- Console : Arrow down selecteert de eerste suggestie en suggesties krijgen Tab ( 1276960 ).
DevTools heeft een breekpunt voor de gebeurtenislistener toegevoegd, zodat u kunt pauzeren wanneer u een document Picture-in-Picture-venster opent ( 1315352 ).
DevTools heeft een oplossing bedacht die Vue2-webpack-artefacten correct weergeeft als JavaScript ( 1416562 ).
Een Console -instelling krijgt een betere naam: Console.trace()-berichten automatisch uitvouwen. ( 1139616 ).

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