Wat is er nieuw in DevTools (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

Recorder-updates

Ondersteuning voor Replay-extensies

De Recorder introduceert ondersteuning voor aangepaste herhalingsopties die u met een extensie in DevTools kunt integreren.

Probeer de voorbeeldextensie uit. Selecteer de nieuwe optie voor aangepaste herhaling om de gebruikersinterface voor aangepaste herhalingen te openen.

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

Chromium-probleem: 1400243 .

Opnemen met pierce selectors

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

Start een nieuwe opname op een pagina met schaduw-DOM en controleer Doorboor de selectortypen om op te nemen . Neem uw interactie met elementen in de schaduw-DOM op en inspecteer de bijbehorende stap.

Chromium-probleem: 1411188 .

Exporteren als een Puppeteer-script met Lighthouse-analyse

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

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

Verlengingen verkrijgen

Ontdek opties om uw recorderervaring te personaliseren, bijvoorbeeld met aangepaste exportopties. Ontvang extensies voor de recorder door op de knop te klikken. Exporteren > Extensies in een opname ophalen .

Voeg gerust uw eigen extensie toe aan de lijst met Recorder-extensies . We kijken ernaar uit om die van u in de lijst te zien!

Chromium-problemen: 1417104 , 1413168 .

Elementen > Stijlen updates

CSS-documentatie

Hoe vaak per dag raadpleegt u de documentatie over CSS-eigenschappen? Het deelvenster Elementen > Stijlen toont nu een korte beschrijving wanneer u met de muis over een eigenschap beweegt.

De tooltips bevatten ook een link 'Meer informatie ' waarmee u naar een MDN CSS-referentie over deze eigenschap wordt geleid.

Als je CSS goed beheerst, vind je de tooltips misschien vervelend. Om ze allemaal uit te schakelen, vink je het vakje aan. Niet tonen .

Om ze weer in te schakelen, controleer Instellingen > Voorkeuren > Elementen > Toon CSS-documentatietooltips .

Chromium-probleem: 1401107 .

Ondersteuning voor CSS-nesting

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

Chromium-probleem: 1172985 .

Logpunten en voorwaardelijke breekpunten markeren in de console

De verbeterde breekpunt-UX wordt verder verbeterd door de console die nu berichten markeert die door breekpunten worden geactiveerd:

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

De console geeft u nu echte 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 koppeling naast het breekpuntbericht om direct naar de breekpunteditor te gaan.

Chromium-probleem: 1027458 .

Negeer irrelevante scripts tijdens het debuggen

Om u te helpen concentreren op de belangrijkste onderdelen 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 de lijst toe te voegen of eruit te verwijderen. De Debugger negeert scripts die aan de lijst zijn toegevoegd en laat ze weg in de aanroepstack.

Alle scripts en mappen die op de negeerlijst staan, zijn grijs weergegeven in de bestandsstructuur.

Als u een genegeerd script selecteert, brengt de knop Configureren u naar Instellingen > Negeerlijst . U kunt ook genegeerde bronnen verbergen in de bestandsstructuur met > Verberg bronnen die niet op de negeerlijst staan .

Chromium-probleem: 883325 .

JavaScript Profiler-deprecation 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 de CPU-prestaties van JavaScript.

Deze DevTools-versie (112) start de vierfasen-deprecation van JavaScript Profiler . Het JavaScript Profiler- paneel toont nu de bijbehorende waarschuwingsbanner.

Gebruik in plaats van de Profiler het Prestatiepaneel om het CPU-profiel te bepalen.

Meer informatie en feedback kunt u vinden in de bijbehorende RFC en crbug.com/1354548 .

Chromium-probleem: 1417647 .

Verminderd contrast emuleren

Het tabblad Rendering voegt een nieuwe optie toe aan de lijst 'Zichtproblemen emuleren': Verminderd contrast . Met deze optie kunt u zien hoe uw website eruitziet voor mensen met een verminderde contrastgevoeligheid.

Houd er rekening mee dat de lijstopties zijn bijgewerkt zodat u nu kunt zien welke kleurongevoeligheid de opties vertegenwoordigen.

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

Chromium-problemen: 1412719 , 1412721 .

Vuurtoren 10

Het Lighthouse- paneel draait nu Lighthouse 10.0.1 . Zie Nieuw in Lighthouse 10.0.1 voor meer informatie.

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Vuurtoren > > Oude navigatie is nu standaard uitgeschakeld. Deze optie gebruikt de oude Lighthouse-configuratie in de navigatiemodus.

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

Chromium-probleem: 772558 .

Een consolewaarschuwing om uw no-op service worker fetch handler te verwijderen

Chrome 112 slaat no-op (geen bewerking) service worker fetch handlers over omdat ze de navigatie kunnen vertragen, maar geen doel dienen. Dergelijke handlers zijn niet langer vereist om uw website te kwalificeren als een Progressive Web App .

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

Chromium-probleem: 1347319 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

• In het deelvenster Bronnen > Breekpunten worden nu onderscheidende bestandspaden weergegeven naast dubbelzinnige bestandsnamen ( 1403924 ).
• In het hoofdgedeelte van het vlamdiagram van het paneel Prestaties wordt CpuProfiler::StartProfiling nu aangeduid als Profiler Overhead ( 1358602 ).
• Verbeterde automatische aanvulling door DevTools:
  • Bronnen : Consistente aanvullingen van elk woord ( 1320204 ).
  • Console : Arrow down selecteert de eerste suggestie en suggesties krijgen Tab hints ( 1276960 ).
• DevTools heeft een gebeurtenisluisteraar-breekpunt toegevoegd, zodat u kunt pauzeren wanneer u een Picture-in-Picture-venster van een document opent ( 1315352 ).
• DevTools heeft een tijdelijke oplossing ingesteld waarmee Vue2 webpack-artefacten correct worden weergegeven als JavaScript ( 1416562 ).
• Een Console- instelling krijgt een betere naam: Console.trace()-berichten automatisch uitvouwen. ( 1139616 ).

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles wat in de serie Wat is er nieuw in DevTools is behandeld.