Wat is er nieuw in DevTools (Chrome 120)

Sofia Emelianova
Sofia Emelianova
GitHub

Uitfasering van cookies van derden

Uw site maakt mogelijk gebruik van cookies van derden en het is tijd om actie te ondernemen nu de beëindiging ervan nadert. Zie Voorbereiden op het einde van cookies van derden voor meer informatie over wat u kunt doen met de getroffen cookies.

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

Een waarschuwing over de aanstaande beëindiging van cookies van derden op het tabblad Problemen.

Chroomuitgave: 1466310 .

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

De Privacy Sandbox Analysis Tool- extensie voor DevTools wordt actief ontwikkeld met de nieuwste pre- releaseversie van 0.3.2 . Met de tool krijgt u inzicht in hoe uw website cookies gebruikt en krijgt u advies over de nieuwe privacybehoudende 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 navigeer naar het Privacy Sandbox- paneel. Dit paneel is mogelijk verborgen achter de 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.

Zie het volgende voor meer informatie over het gebruik van de Privacy Sandbox Analysis Tool (PSAT) :

  • PSAT's how-to .
  • Om te voorspellen wat er waarschijnlijk zal gebeuren zodra de beëindiging van kracht wordt, kunt u een Evaluatieomgeving opzetten.
  • Zie Algemene analyseacties om de aspecten te identificeren waarop dit van invloed is.
  • 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 bovendien de richtlijnen voor rapportagekwesties .

Verbeterde negeerlijst

Standaarduitsluitingspatroon voor node_modules

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

De voor en na het toevoegen van een reguliere expressie.

Chroomuitgave: 1496301 .

Uitzonderingen stoppen nu met de uitvoering als ze worden opgemerkt of door niet-genegeerde code gaan

Wanneer u code debugt met Selectievakje. Pauzeren bij gevangen uitzonderingen aangevinkt, de Debugger stopt nu de uitvoering van de volgende gevangen uitzonderingen, zowel synchroon als asynchroon:

  • Uitzonderingen die worden opgevangen in niet-genegeerde frames in de call-stack.
  • Gevangen uitzonderingen die door niet-genegeerde frames in de call-stack gaan. Zie bijvoorbeeld de schermafbeelding.

Pauzeer bij een onderschepte uitzondering die door niet-genegeerde code is gegaan.

Om dit gedrag te testen, opent u deze demopagina :

  1. Open DevTools > Bronnen , voeg de hidden map toe aan de negeerlijst en vink aan Selectievakje. Pauzeer bij gevangen uitzonderingen .
  2. Op de pagina, onder de lijst met scenario's "Gevangen", klikt u op de verschillende knoppen en ziet u dat de uitvoering in de genoemde gevallen is onderbroken.

Om de uitvoering van gevangen en/of niet-afgevangen uitzonderingen (indien aangevinkt) in asynchrone oproepen te pauzeren, zoekt de Debugger naar afwijzingshandlers in beloften. Vanaf deze versie voorspelt de Debugger niet langer dat Promise.finally() een uitzondering zal opvangen, vergelijkbaar met hoe het try...finally blok er geen opvangt.

Chroomafgiften: 1489312 , 1291064 .

x_google_ignoreList hernoemd naar ignoreList in bronkaarten

De specificatie van de bronkaarten heeft het veld ignoreList overgenomen in plaats van x_google_ignoreList en DevTools ondersteunt nu de nieuwe naam met een terugval op de oude. Frameworks en bundelaars kunnen nu de nieuwe veldnaam gebruiken.

Met bronkaarten kunt u fouten opsporen in de code die u heeft geschreven, in plaats van met verkleinde code die door uw website wordt aangeboden.

Voor meer informatie over bronkaarten, zie:

Nieuwe invoermodusschakelaar tijdens foutopsporing op afstand

U kunt nu schakelen tussen aanraak- en muisinvoer wanneer u op afstand fouten op een Chrome-tabblad opspoort. Wanneer u bijvoorbeeld een Chrome-instantie uitvoert met --remote-debugging-port=<port> en verbinding maakt met dit netwerkdoel via chrome://inspect/#devices .

Bekijk de video om het wisselen van de invoermodus in actie te zien.

Chroomuitgave: 1410433 .

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

Om het debuggen van iframes eenvoudiger te maken, wordt in het paneel Elementen nu documentURL weergegeven naast #document knooppunten.

De voor en na tonen documentURL naast #document knooppunt.

Chroomuitgave: 1376976 .

Effectief inhoudbeveiligingsbeleid in het toepassingspaneel

U kunt nu de Content Security Policy (CSP) -details van een geïnspecteerd frame bekijken. Om de details te bekijken, navigeert u naar Toepassing > Frames , selecteert u een frame en bladert u omlaag naar de sectie Content Security Policy (CSP) .

De sectie Inhoudsbeveiligingsbeleid op het tabblad Toepassing.

Chroomuitgave: 1424714 .

Verbeterde foutopsporing in animaties

Op het tabblad Animaties kunt u nu:

  • Klik ergens op de tijdlijnkop om de afspeelkop in te stellen. De animatie blijft spelen als deze al aan het spelen was en stopt anders. Vroeger moest je het slepen.
  • Pas het formaat van de naamkolom aan om de volledige animatienamen te zien.

Chroomuitgaves: 1492460 , 1489721 .

'Vertrouw je deze code?' dialoogvenster in Bronnen en zelf-XSS-waarschuwing in Console

De Selectievakje. Waarschuwing weergeven over Self-XSS wanneer het plakken van code- experiment standaard is ingeschakeld. Self-XSS (self cross-site scripting) is een aanval die u ertoe verleidt kwaadaardige code in DevTools te plakken en een aanvaller controle geeft over uw webaccounts en persoonlijke gegevens.

Als u een nieuwe DevTools-gebruiker bent en code probeert te plakken, toont het Bronnenpaneel nu het bericht Vertrouwt u deze code? dialoogvenster en de console geeft nu een soortgelijke waarschuwing weer. Plak alleen de code die u begrijpt en die u zelf hebt beoordeeld. Om te plakken typt allow pasting ​​wanneer daarom wordt gevraagd. Zodra plakken eenmaal is toegestaan, wordt de waarschuwing nooit meer getoond.

Het venster 'Vertrouwt u deze code?' dialoogvenster bij het plakken van code in Bronnen.

Chroomuitgave: 345205 .

Breekpunten voor gebeurtenislisteners in webwerkers en worklets

Wanneer u een gebeurtenisbreekpunt instelt in Bronnen > Event Listener Breakpoints , pauzeert de Debugger nu niet alleen bij deze gebeurtenis op uw website, maar ook wanneer de overeenkomstige gebeurtenis plaatsvindt in een webwerker of werklet van welk type dan ook, inclusief de Shared Storage Worklet .

Debugger is gepauzeerd wanneer een servicemedewerker de ingestelde time-outfunctie aanroept.

Chroomuitgave: 1445175 .

De nieuwe mediabadge voor <audio> en <video>

U kunt nu de nieuwe mediabadge inschakelen voor <audio> en <video> -elementen in het paneel Elementen . Wanneer u op de badge klikt, gaat u naar het paneel Media , waar u fouten in deze elementen kunt opsporen.

De nieuwe mediabadge voor audio- en videotags ingeschakeld.

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

Chroomuitgave: 1448214 .

Voorladen hernoemd naar Speculatief laden

Om overmatig gebruik van de vorige term te voorkomen en het gedrag beter weer te geven, is de naam Toepassing > Voorladen gewijzigd in Speculatieve belastingen . Met speculatief laden kan de pagina vrijwel onmiddellijk worden geladen op basis van speculatieregels die u kunt definiëren zodat uw website de meest bezochte pagina's vooraf kan weergeven en vooraf ophalen.

Het voor en na hernoemen van preloaden naar speculatief laden.

Chroomuitgave: 1478888 .

Vuurtoren 11.2.0

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

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

De prestatierevisie voor en na.

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgaves: 772558 .

Verbeteringen in toegankelijkheid

Deze versie heeft de volgende toegankelijkheidsverbeteringen:

  • Schermlezers zullen nu de status (aangevinkt of niet-aangevinkt) van selectievakjes onder Bronnen > Breekpunten aankondigen.
  • U kunt nu via het toetsenbord toegang krijgen tot de problemen verbergen, zoals dit vervolgkeuzemenu.

Chroomuitgaves: 1488645 , 1484918 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestaties : De soms ontbrekende LCP-indicator in de opname opgelost ( 1487136 ).
  • Speculatieve ladingen: de volledige URL's voor doelen in het vervolgkeuzemenu in het netwerkpaneel opgelost ( 1471020 ).
  • dekking :
    • Vaste regel-voor-regel dekking voor mooi gedrukte code ( 1464974 ).
    • De dekkingsinformatie wordt nu bijgewerkt bij het opnieuw laden van de pagina ( 1494457 ).
  • Console :
    • Vaste gedeeltelijke tekstselectie in berichten ( 1487449 ).
    • Het flikkeren van de vervolgkeuzelijst voor automatisch aanvullen is opgelost ( 1487453 ).
    • Ondersteunde haakjes in stapelpaden en URL's in stapeltraceringen ( 1473926 ).
  • Bronnen : Ondersteunde de syntaxisaccentuering van TypeScript using trefwoord ( 1490515 ).
  • Het menu Snel openen toont nu privémethoden ( 1492957 ).
  • Toepassing > Achtergrondservices : de bovenste actiebalk laat nu tekst doorlopen bij het wijzigen van de grootte ( 1487276 ).
  • Elementen > Stijlen :
    • De resolutie van de overgenomen CSS-variabelen voor gesleufde elementen is opgelost ( 1492162 ).
    • Wanneer u een CSS-eigenschap uitschakelt, worden de opmerkingen ervan nu verwijderd om syntaxisonderbrekingen te corrigeren ( 1101224 ).
  • Netwerk : de kolom Prioriteit toont nu tooltip met informatie over de initiële prioriteit (hetzelfde wordt weergegeven wanneer rijen met grote verzoeken zijn aangevinkt) ( 1495735 ).
  • Beëindigingen:
    • De instelling Kleurformaat is in eerdere versies uitgeschakeld en is nu verwijderd.
    • De optie Alle overschrijvingen verwijderen in Bronnen is nu verwijderd vanwege laag gebruik na het stroomlijnen van overschrijvingen ( 1473681 ).

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .