Deze pagina is vertaald door de Cloud Translation API.

Wat is er nieuw in DevTools (Chrome 121)

Sofia Emelianova

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 instellingen uit Instellingen > Experimenten > check_box_outline_blank 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.

Het gedeelte @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 Instellingen > Experimenten > check_box 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:

Expressies in de console en suggesties voor automatisch aanvullen
Live-uitdrukkingen
Kijk naar uitdrukkingen
Voorwaardelijke breekpunten en logpunten

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:

match_case Overeenkomstgeval .
reguliere_expressie Reguliere expressie .
match_word 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 paneel Netwerk 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 .

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 inhoudsbeveiligingsbeleid in het toepassingspaneel.

Daarnaast rapporteert het Issues- panel CSP-schendingen.

Het inhoudsbeveiligingsbeleid 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 van uploads en het opslaan van downloads zijn toegevoegd aan de actiebalk ( 1275407 ).

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

Stuur ons een suggestie of feedback via crbug.com .
Rapporteer een DevTools-probleem met behulp van de opties Meer > Help > Rapporteer een DevTools-probleem in DevTools.
Tweet op @ChromeDevTools .
Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .