Wat is er nieuw in DevTools (Chrome 112)

Sofia Emelianova
Sofia Emelianova

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 herhalingen om de gebruikersinterface voor aangepaste herhalingen te openen.

Aangepaste herhalingsgebruikersinterface.

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

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 Selectievakje. Doorboor selectortypen om op te nemen . Neem uw interactie met elementen in de schaduw-DOM op en inspecteer de bijbehorende stap.

De recorder instellen voor het gebruik van pierce-selectoren; Pierce-selector in actie.

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 Exporteren. Exporteer , selecteer de nieuwe optie en sla het .js bestand op.

Exporteer Puppeteer (inclusief Lighthouse-analyse).

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

Het Lighthouse-rapport is geopend in Chrome.

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. Exporteren > Extensies in een opname ophalen .

De optie Extensies ophalen in het vervolgkeuzemenu Exporteren.

Voeg gerust uw eigen extensie toe aan de lijst met Recorder Extensions . 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 tooltip met documentatie over een CSS-eigenschap.

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

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

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

Chromium-probleem: 1401107 .

Ondersteuning voor CSS-nesting

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

Chromium-probleem: 1172985 .

Logpunten en voorwaardelijke breekpunten markeren in de console

De console verbetert de UX voor breekpunten verder door berichten te markeren die door breekpunten worden geactiveerd:

Wijzigingen in de manier waarop de console nu berichten weergeeft die zijn geactiveerd door breekpunten: met pictogrammen en een juiste bronkoppeling.

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.

De ankerkoppeling naast een logpointbericht waarmee de breekpunteditor wordt geopend.

Chromium-probleem: 1027458 .

Negeer irrelevante scripts tijdens het debuggen

U kunt nu irrelevante scripts rechtstreeks vanuit de bestandsstructuur in het deelvenster Bronnen > Pagina aan de negeerlijst toevoegen, zodat u zich beter kunt concentreren op de belangrijkste onderdelen van uw code.

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.

Contextmenu's van een map en script met negeeropties.

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

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

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

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.

Verouderingsbanner bovenaan de Profiler.

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.

De optie voor verminderd contrast die is geselecteerd onder de functionaliteit 'Visuele tekortkomingen nabootsen'.

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 opsporen 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 > Instellingen. > Leeg selectievakje. Oude navigatie is nu standaard uitgeschakeld. Deze optie gebruikt de oude Lighthouse-configuratie in de navigatiemodus.

Oude navigatie uitgeschakeld.

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

Moto G Power in de lijst 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 als er een no-op fetch-handler op uw website wordt aangetroffen. Overweeg deze te verwijderen.

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

Chromium-probleem: 1347319 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

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.

Wat is er nieuw in DevTools

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