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 netwerkpaneel overzichtelijker kunt maken.

Het bijbehorende experiment was in deze versie standaard ingeschakeld, maar wordt 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 ander voor het verbergen van gegevens en extensie-URL's of het tonen van alleen geblokkeerde cookies en verzoeken, en verzoeken van derden. Beide menu's ondersteunen multi-select.

Om de oude filterbalk onmiddellijk terug te brengen, schakelt u uit Instellingen > Experimenten > Herontwerp van de filterbalk in het netwerkpaneel .

Het voor en na het stroomlijnen van de filterbalk in het Netwerkpaneel.

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

Chroomuitgave: 1486431 .

Elementenverbeteringen

Ondersteuning voor @font-palette-values

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

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

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

Chroomuitgave: 1501781 .

Ondersteund geval: aangepaste eigenschap als terugval op een andere aangepaste eigenschap

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

Het voor en na het oplossen van een aangepaste eigenschap als een terugval van een andere aangepaste eigenschap.

Chroomuitgave: 1499265 .

Verbeterde ondersteuning voor bronkaarten

De Instellingen > Experimenten > Variabelenamen in expressies oplossen met behulp van brontoewijzingen is standaard ingeschakeld.

DevTools gebruikt brontoewijzingen zodat u fouten in uw originele code in Sources en Scope kunt opsporen, zelfs nadat u deze hebt gecombineerd, verkleind of gecompileerd. Met dit experiment kunt u uw oorspronkelijke variabelenamen consistent evalueren in DevTools, inclusief maar niet beperkt tot:

Zie de bijbehorende RFC voor meer details.

Chroomuitgave: 1444349 .

Verbeteringen in het prestatiepaneel

Verbeterde interactietrack

Het spoor Prestaties > Interacties krijgt snorharen die vertragingen in de invoer en presentatie aangeven bij de grenzen van de verwerkingstijd.

Het voor en na het toevoegen van snorharen aan het interactiespoor.

Als u de muisaanwijzer op een interactie plaatst, ziet u bovendien handige tooltip met details over de timing.

Chroomuitgave: 1495751 .

Geavanceerde filtering op de tabbladen Bottom-Up, Oproepboom en Gebeurtenislogboek

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

  • Overeenkomstgeval .
  • Reguliere expressie .
  • Zoek 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.

Chroomuitgave: 1496355 .

Inspringmarkeringen in het deelvenster Bronnen

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

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

Chroomuitgave: 1479986 .

Handige tooltips voor overschreven kopteksten en inhoud in het paneel Netwerk

Het netwerkpaneel toont nu tooltips wanneer u de muisaanwijzer op het paarse stippictogram naast de tabbladen Kopteksten en Antwoord van een verzoek plaatst. De tooltips vertellen u wat door DevTools is overschreven.

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

Chroomuitgave: 1469776 .

Nieuwe Command Menu-opties voor het toevoegen en verwijderen van verzoekblokkeringspatronen

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

De 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, en met de opdracht Verwijderen verwijdert u alle patronen 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.

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

Het inhoudbeveiligingsbeleid in het toepassingspaneel.

Daarnaast rapporteert het Issues- panel CSP-schendingen.

Het inhoudbeveiligingsbeleid in het toepassingspaneel.

Vuurtoren 11.3.0

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

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

Chroomuitgave: 772558 .

Toegankelijkheid

Deze versie heeft de volgende toegankelijkheidsverbeteringen:

  • In Netwerk > Payload kunt u nu de weergavebron in de tabfocus zetten en URL-gecodeerde knoppen bekijken en op Enter of Spatie drukken om de bijbehorende actie te activeren.
  • Om verwarring te verminderen zijn in Console de links die leiden naar scripts die niet langer beschikbaar zijn voor de Debugger nu grijs weergegeven en kunnen er niet op worden geklikt.
  • In navigatiebomen, zoals de boom in Bronnen > Pagina , vouwt de Enter- toets nu knooppunten met onderliggende knooppunten uit en samen.

Chroomuitgaves: 1338391 , 1500662 , 1420362 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestatie . Als een opname mislukt, hebt u nu de mogelijkheid om onbewerkte traceergebeurtenissen te downloaden en te proberen uit te zoeken wat er mis is gegaan ( commit ).
  • De sneltoets Show Console ( Ctrl + ` voor Mac, Ctrl + + voor Windows en Linux) opent nu niet alleen de console , maar sluit ook wanneer deze voor de tweede keer wordt ingedrukt.
  • Bronnen voor ontwikkelaars . Een bug opgelost die het rapporteren van CSS-bronnen en hun problemen verhinderde ( 1420362 ).
  • Elementen :
    • Een bug opgelost bij het inspecteren van elementen in iframes ( 1453375 ).
    • Berekend . Een bug opgelost die verhinderde dat standaardwaarden werden weergegeven ( 1499882 ).
    • Zoekopdracht . Een bug opgelost die het berekenen van het aantal overeenkomsten voor korte zoekopdrachten van één of twee tekens verhinderde ( 1416457 ).
  • Console . Parseert nu correct reguliere expressies die eindigen met een escape-teken in het filtervak ​​( 1346936 ).
  • Instellingen > Werkruimte . Een bug opgelost die het toevoegen van een uitgesloten map verhinderde ( 1503580 ).
  • Netwerk > Voorbeeld . Geeft nu afbeeldingen weer met data: URI's ( 1381791 ).
  • Geheugen . De juiste knoppen voor het laden en het opslaan zijn toegevoegd aan de actiebalk ( 1275407 ).

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 .