Wat is er nieuw in DevTools (Chrome 120)

Sofia Emelianova

Uitfasering van cookies van derden

Uw website maakt mogelijk gebruik van cookies van derden en het is tijd om actie te ondernemen nu deze binnenkort niet meer worden gebruikt. Zie 'Voorbereiding op het einde van cookies van derden' voor meer informatie over wat u moet doen met betrekking tot de betreffende cookies.

De Het selectievakje 'Problemen met cookies van derden weergeven' is standaard ingeschakeld voor alle Chrome-gebruikers. Het tabblad 'Problemen' waarschuwt u nu voor cookies die worden beïnvloed door de aanstaande afschaffing en uitfasering van cookies van derden. U kunt het selectievakje op elk gewenst moment uitschakelen om deze meldingen niet meer te zien.

Chromium-probleem: 1466310 .

Analyseer de cookies van uw website met de Privacy Sandbox-analysetool.

De Privacy Sandbox Analysis Tool- extensie voor DevTools is in actieve ontwikkeling en de nieuwste pre- releaseversie is 0.3.2 . Met deze tool kunt u inzicht krijgen in hoe uw website cookies gebruikt en krijgt u uitleg over de nieuwe privacyvriendelijke Chrome API's.

Om uw cookies te analyseren:

1. Installeer de extensie in Chrome.
2. Open uw website in één tabblad voor de beste analyse.
3. Open DevTools en ga naar het paneel Privacy Sandbox . Dit paneel is mogelijk verborgen achter een menu. vervolgkeuzeknop bovenaan.
4. Open het gedeelte Cookies en klik op Dit tabblad analyseren . Als de tool geen cookies heeft gevonden, probeer dan de pagina opnieuw te laden.

Voor meer informatie over het gebruik van de Privacy Sandbox Analysis Tool (PSAT) , zie het volgende:

• Handleiding voor de PSAT .
• Om te voorspellen wat er waarschijnlijk zal gebeuren zodra de uitfasering van kracht wordt, kunt u een evaluatieomgeving opzetten.
• Om de te beïnvloeden aspecten te identificeren, raadpleegt u de algemene analyseacties .
• Om te leren hoe u veelvoorkomende scenario's kunt analyseren, waaronder analyses, e-commerce, SSO-services, ingesloten content en meer, bekijk dan de demo-voorbeelden in Analysescenario's .

Zie bovendien de richtlijnen voor het melden van problemen .

Verbeterde negeerlijst

Standaard uitsluitingspatroon voor node_modules

Deze versie maakt het mogelijk om de standaard reguliere expressie als aangepaste uitsluitingsregel te gebruiken in Instellingen > Negeerlijst . Om u te helpen zich alleen op uw code te concentreren, slaat de debugger nu standaard scripts uit /node_modules/ en /bower_components/ over. U kunt deze regel op elk gewenst moment uitschakelen in de instellingen.

Chromium-probleem: 1496301 .

Uitzonderingen stoppen nu de uitvoering als ze worden opgevangen of als ze door niet-genegeerde code worden doorgegeven.

Wanneer je code debugt met De optie 'Pauzeer bij opgevangen uitzonderingen' is aangevinkt. De debugger stopt nu de uitvoering bij de volgende opgevangen uitzonderingen, zowel synchroon als asynchroon:

• Uitzonderingen die zijn opgevangen in frames in de aanroepstack die niet genegeerd worden.
• Onderschepte uitzonderingen die door niet-genegeerde frames in de aanroepstack heen gaan. Zie bijvoorbeeld de schermafbeelding.

Om dit gedrag te testen, opent u deze demopagina :

1. Open DevTools > Bronnen , voeg de hidden map toe aan de negeerlijst en vink het vakje aan. Pauzeer bij opgevangen uitzonderingen .
2. Klik op de pagina, onder de lijst met scenario's "Gevangen", op de verschillende knoppen om te zien hoe de uitvoering in de genoemde gevallen wordt gepauzeerd.

Om de uitvoering te pauzeren bij opgevangen en/of niet-opgevangen uitzonderingen (indien gecontroleerd) in asynchrone aanroepen, zoekt de debugger naar afwijzingshandlers in de promises. Vanaf deze versie voorspelt de debugger niet langer dat Promise.finally() een uitzondering zal opvangen, net zoals het try...finally -blok dat ook niet doet.

Chromium-problemen: 1489312 , 1291064 .

x_google_ignoreList is in de bronmap hernoemd naar ignoreList

De specificatie voor source maps heeft het veld ignoreList overgenomen in plaats van x_google_ignoreList , en DevTools ondersteunt nu de nieuwe naam met een terugvaloptie voor de oude. Frameworks en bundlers kunnen nu de nieuwe veldnaam gebruiken.

Met source maps kun je de code die je zelf hebt geschreven debuggen, in plaats van de geminificeerde code die door je website wordt aangeboden.

Voor meer informatie over bronkaarten, zie:

• Wat zijn bronkaarten?
• Debug je originele code in plaats van de code die je met source maps hebt geïmplementeerd.

Nieuwe invoermodus inschakelen tijdens debuggen op afstand

Je kunt nu schakelen tussen aanraak- en muisinvoer bij het debuggen van een Chrome-tabblad op afstand. Bijvoorbeeld wanneer je een Chrome-instantie start met --remote-debugging-port=<port> en verbinding maakt met dit netwerkdoel via chrome://inspect/#devices .

Bekijk de video om te zien hoe het wisselen van invoermodus in de praktijk werkt.

Chromium-probleem: 1410433 .

Het paneel Elementen toont nu URL's voor #document -knooppunten.

Om het debuggen van iframes te vereenvoudigen, wordt in het paneel Elementen nu documentURL weergegeven naast #document -nodes.

Chromium-probleem: 1376976 .

Effectief inhoudsbeveiligingsbeleid in het toepassingspaneel

U kunt nu de details van het Content Security Policy (CSP) van een geïnspecteerd frame bekijken. Ga hiervoor naar Toepassing > Frames , selecteer een frame en scroll naar beneden naar het gedeelte Content Security Policy (CSP) .

Chromium-probleem: 1424714 .

Verbeterde foutopsporing van animaties

In het tabblad Animaties kunt u nu:

• Klik ergens op de koptekst van de tijdlijn om de afspeelpositie in te stellen. De animatie wordt voortgezet als deze al bezig was en stopt anders. Voorheen moest je de afspeelpositie verslepen.
• Vergroot de kolom met namen om alle animatienamen te kunnen zien.

Chromium-problemen: 1492460 , 1489721 .

'Vertrouw je deze code?' dialoogvenster in Broncode en self-XSS-waarschuwing in Console

De De optie 'Waarschuwing weergeven over Self-XSS bij het plakken van code' is standaard ingeschakeld. Self-XSS (self cross-site scripting) is een aanval waarbij je wordt verleid om kwaadwillende code in DevTools te plakken, waardoor een aanvaller de controle over je webaccounts en persoonlijke gegevens kan overnemen.

Als u een nieuwe DevTools-gebruiker bent en code probeert te plakken, toont het paneel Bronnen nu het dialoogvenster ' Vertrouwt u deze code?' en geeft de console een vergelijkbare waarschuwing weer. Plak alleen code die u begrijpt en zelf hebt gecontroleerd. Om te plakken, typt u allow pasting wanneer daarom wordt gevraagd. Nadat u het plakken eenmaal hebt toegestaan, wordt de waarschuwing niet meer weergegeven.

Chromium-probleem: 345205 .

Breakpoints voor gebeurtenislisteners in webworkers en worklets

Wanneer u een gebeurtenisbreakpoint instelt in Bronnen > Gebeurtenislistenerbreakpoints , pauzeert de debugger niet alleen bij deze gebeurtenis op uw website, maar ook wanneer de corresponderende gebeurtenis plaatsvindt in een webworker of worklet van welk type dan ook, inclusief de Shared Storage Worklet .

Chromium-probleem: 1445175 .

De nieuwe mediabadge voor <audio> en <video>

Je kunt nu de nieuwe mediabadge inschakelen voor <audio> en <video> -elementen in het paneel Elementen . Als je op de badge klikt, kom je in het paneel Media terecht, waar je deze elementen kunt debuggen.

Deze functie is in ontwikkeling en zal verder worden verbeterd. Het DevTools-team wil Junseo (Jeremy) Yoo bedanken voor zijn bijdrage aan deze verbetering.

Chromium-probleem: 1448214 .

Voorladen is hernoemd naar speculatief laden.

Om overmatig gebruik van de vorige term te voorkomen en het gedrag beter weer te geven, is 'Applicatie > Voorladen' hernoemd naar 'Speculatieve laadtijden '. Speculatieve laadtijden maken een bijna onmiddellijke paginalading mogelijk op basis van speculatieregels die u voor uw website kunt definiëren om de meest bezochte pagina's vooraf te renderen en op te halen.

Chromium-probleem: 1478888 .

Lighthouse 11.2.0

Het Lighthouse- paneel draait nu op Lighthouse 11.2.0. Bekijk de volledige lijst met wijzigingen .

Deze update omvat een grondige herziening van de prestatiecategorie. Prestatie-inzichten worden nu beoordeeld en geprioriteerd op basis van hun geschatte impact op de prestatiecijfers. Bovendien bevat de prestatie-scoremeter meer gedetailleerde informatie over hoe elke indicator de score beïnvloedt.

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

Chromium-problemen: 772558 .

Toegankelijkheidsverbeteringen

Deze versie bevat de volgende verbeteringen op het gebied van toegankelijkheid:

• Schermlezers zullen nu de status (aangevinkt of niet aangevinkt) van selectievakjes onder Bronnen > Breakpoints aankondigen.
• Je kunt het vervolgkeuzemenu ' Problemen zoals deze verbergen' nu openen met het toetsenbord.

Chromium-problemen: 1488645 , 1484918 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

• Prestatie : Het probleem met de soms ontbrekende LCP-indicator in de opname is opgelost ( 1487136 ).
• Speculatieve laadtijden: De volledige URL's voor doelen in het dropdownmenu in het netwerkpaneel zijn gecorrigeerd ( 1471020 ).
• Dekking :
  • Vaste regel-voor-regel dekking voor mooi opgemaakte code ( 1464974 ).
  • De dekkingsinformatie wordt nu bijgewerkt bij het opnieuw laden van de pagina ( 1494457 ).
• Console :
  • Opgeloste gedeeltelijke tekstselectie in berichten ( 1487449 ).
  • Het flikkeren van het autocomplete-dropdownmenu is verholpen ( 1487453 ).
  • Ondersteunde haakjes in stackpaden en URL's in stacktraces ( 1473926 ).
• Bronnen : Ondersteuning voor syntaxmarkering van TypeScript using het trefwoord ( 1490515 ).
• Het menu Snel openen toont nu privémethoden ( 1492957 ).
• Applicatie > Achtergrondservices : De bovenste actiebalk past zich nu aan de tekstomloop aan bij het wijzigen van de grootte ( 1487276 ).
• Elementen > Stijlen :
  • De resolutie van de overgeërfde CSS-variabelen voor ingesloten elementen is gecorrigeerd ( 1492162 ).
  • Bij het uitschakelen van een CSS-eigenschap worden de bijbehorende commentaren nu verwijderd om syntaxfouten te corrigeren ( 1101224 ).
• Netwerk : De kolom Prioriteit toont nu een tooltip met informatie over de initiële prioriteit (hetzelfde wordt weergegeven wanneer 'Grote aanvraagrijen' is aangevinkt) ( 1495735 ).
• Verouderingen:
  • De instelling voor het kleurformaat was in eerdere versies uitgeschakeld en is nu verwijderd.
  • De optie 'Alle overschrijvingen verwijderen' in Bronnen is nu verwijderd vanwege het geringe gebruik ervan na de stroomlijning van overschrijvingen ( 1473681 ).

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.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .