Wat is er nieuw in DevTools (Chrome 112)

Sofia Emelianova
Sofia Emelianova

Recorder-updates

Ondersteuning voor replay-extensies

De Recorder biedt nu ondersteuning voor aangepaste afspeelopties 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 replay-interface.

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 voorbeelden van extensies .

Chromium-probleem: 1400243 .

Opnemen met pierce selectors

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

Start een nieuwe opname op een pagina met shadow DOM en controleer het resultaat. Selectievakje. Pierce in Selector types to record . Record your interaction with elements in the shadow DOM and inspect the corresponding step.

De recorder instellen om doorsteekselectoren te gebruiken; Doorsteekselector in actie.

Chromium-probleem: 1411188 .

Exporteer 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 je 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 te genereren in een flow.report.html -bestand.

Het Lighthouse-rapport werd geopend in Chrome.

Verkrijg extensies

Ontdek de mogelijkheden om je opname-ervaring aan te passen, bijvoorbeeld met aangepaste exportopties. Download extensies voor de Recorder door te klikken op de Exporteren. Exporteren > Extensies ophalen uit een opname.

De optie 'Extensies ophalen' in het vervolgkeuzemenu 'Exporteren'.

Voeg gerust je eigen extensie toe aan de lijst met Recorder-extensies . We kijken ernaar uit om die van jou op de lijst te zien!

Chromium-problemen: 1417104 , 1413168 .

Elementen > Stijlupdates

CSS-documentatie

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

De tooltip met documentatie over een CSS-eigenschap.

De tooltip bevat ook een link 'Meer informatie ' die je doorverwijst naar een MDN CSS-referentie over deze eigenschap.

Als je goed bekend bent met CSS, vind je de tooltips misschien storend. Om ze allemaal uit te schakelen, ga naar de betreffende instellingen. Selectievakje. Niet weergeven .

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

Chromium-probleem: 1401107 .

Ondersteuning voor geneste CSS-elementen

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

Chromium-probleem: 1172985 .

Het markeren van logpunten en voorwaardelijke breekpunten in de console.

De verbeterde breakpoint-UX wordt verder geoptimaliseerd doordat de console nu berichten markeert die door breakpoints worden geactiveerd:

De manier waarop de console berichten weergeeft die door breakpoints worden geactiveerd, is gewijzigd: nu met pictogrammen en een correcte bronlink.

De console biedt nu correcte ankerlinks naar breakpoints in bronbestanden in plaats van VM<number> -scripts die Chrome aanmaakt om elk stukje JavaScript op V8 uit te voeren.

Klik op de link naast het breakpointbericht om direct naar de breakpointeditor te gaan.

De ankerlink naast een logpointbericht die de breakpoint-editor opent.

Chromium-probleem: 1027458 .

Negeer irrelevante scripts tijdens het debuggen.

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

Klik met de rechtermuisknop op een script of map en selecteer een van de opties om bepaalde items te negeren. 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 opties die betrekking hebben op negeren.

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

Scripts en mappen die op de negeerlijst staan, worden grijs weergegeven. Je 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. Instellingen > Negeerlijst . Je kunt genegeerde bronnen ook verbergen in de bestandsstructuur met Menu met drie puntjes. > Verberg bronnen die op de negeerlijst staan Experimenteel. .

Chromium-probleem: 883325 .

De uitfasering van JavaScript Profiler is begonnen.

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

Deze DevTools-versie (112) markeert het begin van de vierfasige uitfasering van de JavaScript Profiler . Het JavaScript Profiler- paneel toont nu de bijbehorende waarschuwingsbanner.

Banner met melding dat de Profiler verouderd is.

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

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

Chromium-probleem: 1417647 .

Simuleer een verminderd contrast

Het tabblad 'Rendering' voegt een nieuwe optie toe aan de lijst 'Emuleer visuele beperkingen ' : 'Verlaagd contrast' . Met deze optie kunt u ontdekken hoe uw website eruitziet voor mensen met een verminderde contrastgevoeligheid.

De optie 'verlaagd contrast' is geselecteerd onder de functie 'Visuele beperkingen simuleren'.

Let op: de lijst met opties is bijgewerkt om aan te geven welke kleurongevoeligheid de opties vertegenwoordigen.

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

Chromium-problemen: 1412719 , 1412721 .

Vuurtoren 10

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

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Vuurtoren > Instellingen. > Leeg selectievakje. De oude navigatiemodus is nu standaard uitgeschakeld. Deze optie gebruikt de oude Lighthouse-configuratie in de navigatiemodus.

Verouderde navigatie is uitgeschakeld.

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

Moto G Power in de lijst met apparaten.

Chromium-probleem: 772558 .

Een consolewaarschuwing om uw nutteloze service worker fetch handler te verwijderen.

Chrome 112 slaat fetch-handlers voor service workers die geen actie uitvoeren over, omdat deze de navigatie kunnen vertragen maar geen nut hebben. Dergelijke handlers zijn niet langer vereist om uw website te laten voldoen aan de eisen van een Progressive Web App .

De console geeft nu een waarschuwing weer als er een fetch-handler op uw website wordt gevonden die niets doet. Overweeg deze te verwijderen.

Een fetch-handler die niets doet en de bijbehorende waarschuwing in de console.

Chromium-probleem: 1347319 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

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