Wat is er nieuw in DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Gestroomlijnde filterbalk in het netwerkpaneel

De filterbalk is opnieuw ontworpen, zodat u verzoeken eenvoudiger kunt filteren en het paneel Netwerk overzichtelijker is.

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

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

Om de oude filterbalk direct terug te halen, schakelt u Instellingen > Experimenten > uit. Herontwerp van de filterbalk in het paneel Netwerk .

Voor en na het stroomlijnen van de filterbalk in het paneel Netwerk.

Laat gerust uw feedback over deze functie achter op crbug.com/1500573 .

Chromium-probleem: 1486431 .

Verbeteringen aan elementen

@font-palette-values ​​ondersteuning

Het Elementenpaneel ondersteunt nu de @font-palette-values ​​CSS at-rule. Hiermee kun je de standaardwaarden van de eigenschap font-palette aanpassen.

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

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

Chromium-probleem: 1501781 .

Ondersteunde case: Aangepaste eigenschap als terugvaloptie voor een andere aangepaste eigenschap

Elementen > Stijlen lossen nu een aangepaste eigenschap op die een terugval is van een andere aangepaste eigenschap .

De voor- en na-situatie waarin een aangepaste eigenschap is opgelost als terugvaloptie voor een andere aangepaste eigenschap.

Chromium-probleem: 1499265 .

Verbeterde bronkaartondersteuning

De Instellingen > Experimenten > Variabelenamen in expressies oplossen met behulp van bronkaarten zijn standaard ingeschakeld.

DevTools gebruikt bronkaarten om je originele code te debuggen in Bronnen en Scope , zelfs nadat je deze hebt gecombineerd, geminimaliseerd of gecompileerd. Met dit experiment kun je je originele variabelenamen consistent evalueren in alle DevTools, inclusief maar niet beperkt tot:

Zie de bijbehorende RFC voor meer informatie.

Chromium-probleem: 1444349 .

Verbeteringen aan het prestatiepaneel

Verbeterde interacties-track

Het spoor Prestaties > Interacties bevat signalen die invoer- en presentatievertragingen bij verwerkingstijdgrenzen aangeven.

Voor en na het toevoegen van snorharen aan het interactiespoor.

Wanneer u de muisaanwijzer op een interactie plaatst, ziet u bovendien een handige tooltip met gedetailleerde informatie over de timing.

Chromium-probleem: 1495751 .

Geavanceerd filteren op de tabbladen Bottom-Up, Call Tree en Event Log

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

  • Overeenkomende case .
  • Reguliere expressie .
  • Match het hele woord .

De drie nieuwe knoppen voor geavanceerd filteren.

Om u te helpen de context te behouden, komen nu alleen items op het hoogste niveau overeen met het filter op het tabblad Bottom-Up . Voorheen kwam het filter overeen met elk knooppunt.

Chromium-probleem: 1496355 .

Inspringmarkeringen in het paneel Bronnen

De Editor in het Bronnenpaneel markeert nu ingesprongen codeblokken met verticale lijnen voor uw gemak.

Het voor- en natekenen van ingesprongen codeblokken met verticale lijnen.

Chromium-probleem: 1479986 .

Handige tooltips voor overschreven headers en inhoud in het paneel Netwerk

Het paneel Netwerk toont nu tooltips wanneer u de muisaanwijzer op het paarse stippictogram naast de tabbladen Kopteksten en Reacties van een verzoek plaatst. De tooltips geven aan wat er door DevTools is overschreven.

De nieuwe tooltips naast het paarse stippictogram op de tabbladen Kopteksten en Reacties.

Chromium-probleem: 1469776 .

Nieuwe opdrachtmenuopties voor het toevoegen en verwijderen van verzoekblokkeringspatronen

U kunt nu opdrachten typen in het opdrachtmenu om patronen voor het blokkeren van netwerkaanvragen toe te voegen of te verwijderen.

Voor en na het toevoegen van nieuwe opdrachten om netwerkblokkeringspatronen toe te voegen of te verwijderen.

Met de opdracht Toevoegen gaat u naar het dialoogvenster waarin u het patroon kunt opgeven. Met de opdracht Verwijderen verwijdert u alle patronen zonder dat het paneel Netwerkaanvraagblokkering wordt geopend.

Het experiment met CSP-schendingen is verwijderd

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

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

Het inhoudsbeveiligingsbeleid in het paneel Toepassing.

Daarnaast worden in het paneel Problemen CSP-overtredingen gemeld.

Het inhoudsbeveiligingsbeleid in het paneel Toepassing.

Vuurtoren 11.3.0

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

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

Chromium-probleem: 772558 .

Toegankelijkheid

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

  • In Netwerk > Payload kunt u nu de weergavebron met de tab-knop activeren en URL-gecodeerde knoppen bekijken. Vervolgens kunt u op Enter of spatie drukken om de overeenkomstige actie te activeren.
  • Om verwarring te voorkomen, zijn in de Console de koppelingen naar scripts die niet langer beschikbaar zijn voor de Debugger , nu grijs weergegeven en kunnen niet worden aangeklikt.
  • In navigatiebomen, zoals de boom in Bronnen > Pagina , kunt u met de Enter- toets nu knooppunten met onderliggende knooppunten uit- en samenvouwen.

Chromium-problemen: 1338391 , 1500662 , 1420362 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestaties . Als een opname mislukt, hebt u nu de mogelijkheid om de onbewerkte trace-gebeurtenissen te downloaden en te proberen te achterhalen wat er mis is gegaan ( commit ).
  • Met de sneltoets Console weergeven ( Ctrl + ` voor Mac, Ctrl + + voor Windows en Linux) opent u nu niet alleen de console , maar sluit u deze ook wanneer u er nogmaals op drukt.
  • Hulpbronnen voor ontwikkelaars . Er is een bug opgelost waardoor CSS-bronnen en hun problemen niet konden worden gerapporteerd ( 1420362 ).
  • Elementen :
    • Er is een bug opgelost bij het inspecteren van elementen in iframes ( 1453375 ).
    • Berekend . Er is een bug opgelost waardoor standaardwaarden niet konden worden weergegeven ( 1499882 ).
    • Zoeken . Er is een bug opgelost waardoor het aantal overeenkomsten voor korte zoekopdrachten van één of twee tekens niet kon worden berekend ( 1416457 ).
  • Console . Parseert nu correct reguliere expressies die eindigen met een ontsnapt teken in het filtervak ​​( 1346936 ).
  • Instellingen > Werkruimte . Er is een bug opgelost waardoor het toevoegen van een uitgesloten map niet mogelijk was ( 1503580 ).
  • Netwerk > Voorbeeld . Geeft nu afbeeldingen met data: URI's ( 1381791 ).
  • Geheugen . Correcte laad- en opslagknoppen toegevoegd aan de actiebalk ( 1275407 ).

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.

Wat is er nieuw in DevTools

Een lijst met alles wat in de serie Wat is er nieuw in DevTools is behandeld.