Wat is er nieuw in DevTools (Chrome 120)

Sofia Emelianova

Uitfasering van cookies van derden

Uw site maakt mogelijk gebruik van cookies van derden. Het is tijd om actie te ondernemen nu we de beëindiging ervan naderen. Zie Voorbereiding op het einde van cookies van derden voor meer informatie over wat u kunt doen met de betreffende cookies.

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

Chromium-probleem: 1466310 .

Analyseer de cookies van uw website met de Privacy Sandbox Analysis Tool

De Privacy Sandbox Analysis Tool- extensie voor DevTools is in actieve ontwikkeling met de nieuwste pre- releaseversie 0.3.2 . De tool geeft inzicht in hoe uw website cookies gebruikt en biedt richtlijnen voor de nieuwe privacybeschermende 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 Privacy Sandbox- paneel. Dit paneel is mogelijk verborgen achter de 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) kunt u het volgende raadplegen:

• PSAT's Hoe Doe Je Dat ?
• Om te voorspellen wat er waarschijnlijk zal gebeuren als de veroudering van kracht wordt, kunt u een evaluatieomgeving instellen.
• Zie Algemene analyseacties voor informatie over de aspecten die beïnvloed moeten worden.
• Bekijk de demovoorbeelden in Analysescenario's voor meer informatie over het analyseren van veelvoorkomende scenario's, waaronder analyses, e-commerce, SSO-services, ingesloten inhoud en meer.

Zie ook de richtlijnen voor het melden van problemen .

Verbeterde negeerlijst

Standaard uitsluitingspatroon voor node_modules

Deze versie schakelt de standaard reguliere expressie in als een aangepaste uitsluitingsregel 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 moment uitschakelen via de instellingen.

Chromium-probleem: 1496301 .

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

Wanneer u code debugt met Als u 'Pauzeren bij gedetecteerde uitzonderingen' hebt aangevinkt, stopt de Debugger nu de uitvoering bij de volgende gedetecteerde uitzonderingen, zowel synchroon als asynchroon:

• Uitzonderingen die worden opgevangen in niet-genegeerde frames in de aanroepstack.
• Uitzonderingen gedetecteerd die niet-genegeerde frames in de call stack passeren. 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 aan Pauzeer bij gevonden uitzonderingen .
2. Klik op de pagina, onder de lijst met scenario's 'Gevangen', op de verschillende knoppen en bekijk of de uitvoering in de genoemde gevallen is gepauzeerd.

Om de uitvoering van gedetecteerde en/of niet-gevangen uitzonderingen (indien aangevinkt) in asynchrone aanroepen te pauzeren, zoekt de debugger naar afwijzingshandlers in promises. Vanaf deze versie voorspelt de debugger niet langer dat Promise.finally() een uitzondering zal detecteren, net zoals het try...finally blok er geen detecteert.

Chromium-problemen: 1489312 , 1291064 .

x_google_ignoreList hernoemd naar ignoreList in bronkaarten

De specificatie van bronkaarten gebruikt het veld ignoreList in plaats van x_google_ignoreList en DevTools ondersteunt nu de nieuwe naam met een terugval naar de oude. Frameworks en bundlers kunnen nu de nieuwe veldnaam gebruiken.

Met bronkaarten kunt u de code die u zelf hebt geschreven, debuggen in plaats van de geminimaliseerde code die door uw website wordt aangeboden.

Voor meer informatie over bronkaarten, zie:

• Wat zijn bronkaarten?
• Debug uw originele code in plaats van deze te implementeren met bronkaarten

Nieuwe invoermodus-schakelaar tijdens foutopsporing op afstand

U kunt nu schakelen tussen aanraak- en muisinvoer wanneer u op afstand een Chrome-tabblad debugt. Bijvoorbeeld wanneer u een Chrome-exemplaar uitvoert 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 de invoermodus in actie komt.

Chromium-probleem: 1410433 .

Het Elementenpaneel toont nu URL's voor #document

Om u te helpen bij het debuggen van iframes, wordt in het Elementenpaneel nu documentURL weergegeven naast #document .

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. Om de details te bekijken, gaat u naar Applicatie > Frames , selecteert u een frame en scrolt u omlaag naar het gedeelte Content Security Policy (CSP) .

Chromium-probleem: 1424714 .

Verbeterde animatiefoutopsporing

Op het tabblad Animaties kunt u nu:

• Klik ergens op de tijdlijn om de afspeelkop in te stellen. De animatie speelt verder als deze al bezig was en stopt anders. Voorheen moest je de animatie slepen.
• Wijzig de grootte van de naamkolom om de volledige animatienamen te zien.

Chromium-problemen: 1492460 , 1489721 .

Dialoogvenster 'Vertrouwt u deze code?' in Bronnen en zelf-XSS-waarschuwing in Console

De Het experiment ' Toon waarschuwing over Self-XSS bij het plakken van code' is standaard ingeschakeld. Self-XSS (self cross-site scripting) is een aanval die u ertoe verleidt schadelijke code in DevTools te plakken en een aanvaller controle geeft over uw webaccounts en persoonlijke gegevens.

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

Chromium-probleem: 345205 .

Gebeurtenislistener-breekpunten in webworkers en worklets

Wanneer u een gebeurtenisbreekpunt instelt in Bronnen > Gebeurtenislistenerbreekpunten , pauzeert de Debugger niet alleen bij deze gebeurtenis op uw website, maar ook wanneer de overeenkomstige gebeurtenis plaatsvindt in een webworker of worklet van elk type, 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 . Wanneer je op de badge klikt, ga je naar het paneel Media , zodat je deze elementen kunt debuggen.

Deze functie is in ontwikkeling en zal verder worden verbeterd. Het DevTools-team wil graag Junseo (Jeremy) Yoo bedanken voor het realiseren van deze verbetering.

Chromium-probleem: 1448214 .

Preloading hernoemd naar Speculatief laden

Om te voorkomen dat de vorige term te veel wordt gebruikt en om het gedrag beter weer te geven, is 'Toepassing > Preloading' hernoemd naar 'Speculatief laden' . Speculatief laden maakt het mogelijk om een ​​pagina vrijwel direct te laden 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 .

Vuurtoren 11.2.0

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

Deze update omvat een revisie van de prestatiecategorie. Prestatie-inzichten worden nu beoordeeld en geprioriteerd op basis van hun geschatte impact op de prestatiestatistieken. Daarnaast bevat de prestatiescoremeter meer gedetailleerde informatie over hoe elke statistiek de score beïnvloedt.

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

Chromium-problemen: 772558 .

Verbeteringen in toegankelijkheid

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

• Schermlezers geven nu de status (aangevinkt of niet) van selectievakjes onder Bronnen > Breekpunten aan.
• U kunt nu met het toetsenbord toegang krijgen tot het vervolgkeuzemenu Problemen zoals deze verbergen .

Chromium-problemen: 1488645 , 1484918 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

• Prestaties : De soms ontbrekende LCP-indicator in de opname is opgelost ( 1487136 ).
• Speculatieve ladingen: de volledige URL's voor doelen in het vervolgkeuzemenu in het paneel Netwerk zijn hersteld ( 1471020 ).
• Dekking :
  • Vaste regel-voor-regel dekking voor mooi afgedrukte code ( 1464974 ).
  • De dekkingsinformatie wordt nu bijgewerkt bij het opnieuw laden van de pagina ( 1494457 ).
• Bedieningspaneel :
  • Gedeeltelijke tekstselectie in berichten opgelost ( 1487449 ).
  • Het knipperen van de vervolgkeuzelijst voor automatisch aanvullen is opgelost ( 1487453 ).
  • Ondersteunde haakjes in stapelpaden en URL's in stapeltraceringen ( 1473926 ).
• Bronnen : Ondersteuning voor syntaxisaccentuering van TypeScript using trefwoord ( 1490515 ).
• Het menu Snel openen toont nu privémethoden ( 1492957 ).
• Toepassing > Achtergrondservices : De bovenste actiebalk laat nu tekst omlopen bij het wijzigen van de grootte ( 1487276 ).
• Elementen > Stijlen :
  • De resolutie van de geërfde CSS-variabelen voor slot-elementen is aangepast ( 1492162 ).
  • Bij het uitschakelen van een CSS-eigenschap worden de bijbehorende opmerkingen nu verwijderd om syntaxisfouten te herstellen ( 1101224 ).
• Netwerk : De kolom Prioriteit toont nu een tooltip met informatie over de initiële prioriteit (dezelfde informatie wordt weergegeven wanneer Grote aanvraagrijen is aangevinkt) ( 1495735 ).
• Afkeuringen:
  • De instelling Kleuropmaak was in eerdere versies uitgeschakeld en is nu verwijderd.
  • De optie Alle overschrijvingen verwijderen in Bronnen is nu verwijderd vanwege het lage gebruik na het stroomlijnen van overschrijvingen ( 1473681 ).

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.