Wat is er nieuw in DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova

Gestroomlijnde filterbalk in het netwerkpaneel

De filterbalk is opnieuw ontworpen zodat u verzoeken gemakkelijker kunt filteren en het netwerkpaneel overzichtelijker wordt.

Het bijbehorende experiment was in deze versie standaard ingeschakeld, maar zal worden teruggezet. U kunt de voortgang volgen op crbug.com/1523150 .

De nieuwe filterbalk heeft twee keuzemenu's: één voor het selecteren van verzoektypen en een ander voor het verbergen van gegevens en extensie-URL's, of voor het alleen weergeven van geblokkeerde cookies en verzoeken, en verzoeken van derden. Beide menu's ondersteunen meervoudige selectie.

Om de oude filterbalk direct terug te krijgen, schakelt u Instellingen > Experimenten > Herontwerp van de filterbalk in het Netwerkpaneel uit.

De voor- en na-weergave van het stroomlijnen van de filterbalk in het netwerkpaneel.

U kunt uw feedback over de functie achterlaten op crbug.com/1500573 .

Chromium-probleem: 1486431 .

Elementverbeteringen

@font-palette-values ​​ondersteuning

Het paneel Elementen ondersteunt nu de CSS-at-regel @font-palette-values . Hiermee kunt u de standaardwaarden van de eigenschap font-palette aanpassen.

Klik in Stijlen op de waarde van de eigenschap font-palette . DevTools brengt u vervolgens naar het speciale gedeelte @font-palette-values waar u uw aangepaste waarden kunt bewerken.

De sectie @font-palette-values ​​in Stijlen.

Chromium-probleem: 1501781 .

Ondersteund geval: Aangepaste eigenschap als terugvaloptie voor een andere aangepaste eigenschap.

Elementen > Stijlen lost nu een aangepaste eigenschap op die als terugvaloptie dient voor een andere aangepaste eigenschap .

Het verschil vóór en na het instellen van een aangepaste eigenschap als terugvaloptie voor een andere aangepaste eigenschap.

Chromium-probleem: 1499265 .

Verbeterde ondersteuning voor bronkaarten

De Instellingen > Experimenten > Variabelnamen in expressies oplossen met behulp van bronkaarten is standaard ingeschakeld.

DevTools gebruikt source maps om je originele code in Sources en Scope te debuggen, zelfs nadat je deze hebt gecombineerd, geminificeerd of gecompileerd. Met dit experiment kun je je originele variabelnamen consistent evalueren in DevTools, inclusief maar niet beperkt tot:

Voor meer details, zie de bijbehorende RFC .

Chromium-probleem: 1444349 .

Prestatieverbeteringen

Verbeterde interacties-track

De track Prestaties > Interacties toont markeringen die vertragingen in invoer en presentatie aangeven bij de verwerkingsgrenzen.

Het verschil voor en na het toevoegen van snorhaartjes aan het interactiespoor.

Bovendien verschijnt er een handige tooltip met tijdsinformatie wanneer u de muis over een interactie beweegt.

Chromium-probleem: 1495751 .

Geavanceerde filtermogelijkheden in de tabbladen Bottom-Up, Call Tree en Event Log.

De tabbladen Bottom-Up , Call Tree en Event Log in het Performance- paneel hebben drie nieuwe knoppen gekregen voor geavanceerde filtering:

  • Komt overeen met hoofdlettergevoeligheid .
  • Reguliere uitdrukking .
  • Zoek het hele woord .

De drie nieuwe knoppen voor geavanceerde filtering.

Om het overzicht te behouden, worden nu in het tabblad 'Onder naar boven' alleen items op het hoogste niveau aan het filter gekoppeld. Voorheen werd elk knooppunt aan het filter gekoppeld.

Chromium-probleem: 1496355 .

Inspringingsmarkeringen in het paneel Bronnen

De editor in het paneel Bronnen markeert ingesprongen codeblokken nu met verticale lijnen voor uw gemak.

De voor- en na-markering van ingesprongen codeblokken met verticale lijnen.

Chromium-probleem: 1479986 .

Handige tooltips voor overschreven headers en inhoud in het netwerkpaneel

Het netwerkpaneel toont nu tooltips wanneer u de muis over het paarse stipje naast de tabbladen Headers en Response van een verzoek beweegt. De tooltips geven aan wat er door DevTools is overschreven.

De nieuwe tooltips naast het paarse stipje in de tabbladen Kopteksten en Reacties.

Chromium-probleem: 1469776 .

Nieuwe opties in het opdrachtmenu voor het toevoegen en verwijderen van aanvraagblokkeringspatronen.

Je kunt nu opdrachten typen in het opdrachtmenu om blokkeringspatronen voor netwerkverzoeken toe te voegen of te verwijderen.

De situatie vóór en na het toevoegen van nieuwe opdrachten om netwerkblokkeringspatronen toe te voegen of te verwijderen.

Met de opdracht 'Toevoegen' opent u het dialoogvenster waarin u het patroon kunt specificeren, en met de opdracht ' Verwijderen ' worden alle patronen verwijderd zonder het paneel voor het blokkeren van netwerkverzoeken te openen.

Het experiment met CSP-schendingen is verwijderd.

Het experimentele tabblad 'CSP-schendingen' dat in versie 89 werd geïntroduceerd, is verwijderd omdat het overbodig is geworden.

Om in één oogopslag de CSP-details te bekijken, ga je naar Toepassing > Frames > Content Security Policy (CSP) .

Het inhoudsbeveiligingsbeleid in het toepassingspaneel.

Daarnaast rapporteert het Issues- panel over schendingen van de CSP-wetgeving.

Het inhoudsbeveiligingsbeleid in het toepassingspaneel.

Lighthouse 11.3.0

Het Lighthouse- paneel draait nu op Lighthouse 11.3.0. Bekijk de volledige lijst met wijzigingen . Een van de opvallende wijzigingen is de mogelijkheid om rapporten te genereren op 404-pagina's.

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

Chromium-probleem: 772558 .

Toegankelijkheid

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

  • In Netwerk > Payload kunt u nu met de tabtoets de broncode van de weergave selecteren en URL-gecodeerde knoppen bekijken . Druk vervolgens op Enter of de spatiebalk om de bijbehorende actie te activeren.
  • In de console zijn, om verwarring te voorkomen, de links naar scripts die niet langer beschikbaar zijn voor de debugger nu grijs weergegeven en niet aanklikbaar.
  • In navigatiestructuren, zoals de structuur in Bronnen > Pagina , kunt u met de Enter- toets nu knooppunten met subknooppunten uitvouwen en inklappen.

Chromium-problemen: 1338391 , 1500662 , 1420362 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Prestaties . Als een opname mislukt, heb je nu de mogelijkheid om onbewerkte traceergebeurtenissen te downloaden en te proberen te achterhalen wat er mis is gegaan ( commit ).
  • De sneltoets 'Toon console' ( Ctrl + ` voor Mac, Ctrl + + voor Windows en Linux) opent nu niet alleen de console , maar sluit deze ook weer wanneer je er een tweede keer op drukt.
  • Ontwikkelaarsbronnen . Er is een bug verholpen die het rapporteren van CSS-bronnen en de bijbehorende problemen verhinderde ( 1420362 ).
  • Elementen :
    • Een bug bij het inspecteren van elementen in iframes is verholpen ( 1453375 ).
    • Berekend . Een bug verholpen die ervoor zorgde dat standaardwaarden niet werden weergegeven ( 1499882 ).
    • Zoeken . Er is een bug verholpen die het berekenen van het aantal overeenkomsten voor korte zoekopdrachten van één of twee tekens verhinderde ( 1416457 ).
  • Console . Nu worden reguliere expressies die eindigen met een escape-teken in het filtervak ​​correct geparseerd ( 1346936 ).
  • Instellingen > Werkruimte . Er is een bug verholpen die het toevoegen van een uitgesloten map verhinderde ( 1503580 ).
  • Netwerk > Voorbeeldweergave . Geeft nu afbeeldingen weer met data: URI's ( 1381791 ).
  • Geheugen . Correcte knoppen laden en /opslaan toegevoegd aan de actiebalk ( 1275407 ).

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