Wat is er nieuw in DevTools (Chrome 120)

Sofia Emelianova
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 Selectievakje. 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.

Een waarschuwing over de aanstaande uitfasering van cookies van derden in het tabblad 'Problemen'.

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

De Privacy Sandbox-analysetool.

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

Het verschil tussen voor en na het toevoegen van een reguliere expressie.

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

Pauzeer bij een opgevangen uitzondering die door niet-genegeerde code is doorgegeven.

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

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.

De afbeelding voor en na laat zien dat documentURL naast het #document-knooppunt staat.

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

Het gedeelte 'Content Security Policy' bevindt zich in het tabblad 'Application'.

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

Het dialoogvenster 'Vertrouwt u deze code?' verschijnt wanneer u code in Bronnen plakt.

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 .

De debugger is gepauzeerd toen een service worker de functie voor het instellen van de time-out aanriep.

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.

De nieuwe mediabadge voor audio- en videotags is ingeschakeld.

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.

De situatie vóór en na de hernoeming van 'preloading' naar 'speculatief laden'.

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.

De prestatieverbetering vóór en na.

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.

Wat is er nieuw in DevTools?

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