Wat is er nieuw in DevTools, Chrome 141

Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools (MCP) voor uw AI-agent

Je kunt nu een preview bekijken van de nieuwe Chrome DevTools Model Context Protocol (MCP)-server. Deze brengt de kracht van Chrome DevTools naar AI-codeerassistenten.

Voorheen konden code-assistenten niet zien wat de code die ze genereerden daadwerkelijk deed wanneer deze in de browser werd uitgevoerd. De Chrome DevTools MCP-server brengt hier verandering in. AI-code-assistenten kunnen webpagina's rechtstreeks in Chrome debuggen en profiteren van de debugmogelijkheden en prestatie-inzichten van DevTools. Dit verbetert hun nauwkeurigheid bij het identificeren en oplossen van problemen.

Ontdek zelf hoe het werkt:

Voor meer informatie kunt u de Chrome DevTools (MCP) voor uw AI-agent raadplegen.

Debug de netwerkafhankelijkheidsstructuur met Gemini.

Het inzicht in de netwerkafhankelijkheidsstructuur onder Prestaties > Inzichten > Netwerkafhankelijkheidsstructuur heeft nu de knop ' Foutopsporing met AI' waarmee u naar het AI-assistentiepaneel wordt geleid, zodat u de betreffende structuur met behulp van Gemini kunt bespreken en debuggen.

De situatie vóór en na het toevoegen van de knop 'Debuggen met AI' aan het inzicht 'Netwerkafhankelijkheidsstructuur'.

Exporteer je chats met Gemini.

Je kunt nu je huidige chat met Gemini exporteren of het antwoord naar het klembord kopiëren door op de knop 'Gesprek exporteren' in de bovenste actiebalk te klikken of op 'Antwoord kopiëren' onder het bericht van Gemini in de chat.

De situatie vóór en na het toevoegen van de export- en kopieerknop aan AI-assistentie.

Opgeslagen trackconfiguratie in het paneel Prestaties

Wanneer je een opgenomen track configureert in het Performance- paneel, slaat DevTools je configuratie nu op en past deze toe wanneer je de track opnieuw importeert of een nieuwe track opneemt.

Filter IP-beveiligde netwerkverzoeken

In het netwerkpaneel kunt u nu verzoeken filteren die naar IP Protection-proxy's worden verzonden.

De situatie vóór en na het toevoegen van het filter 'IP-beveiligde verzoeken' aan het netwerkpaneel.

Elementen > tabblad Indeling voegt ondersteuning voor metselwerkindeling toe.

Je kunt de lay-out van het metselwerk nu bekijken via het tabblad Elementen > Stijlen .

Bij een lay-out met metselwerk als basis wordt een strakke rasterindeling gebruikt, meestal met kolommen, terwijl de andere as een metselwerkindeling volgt.

De situatie vóór en na het toevoegen van de ondersteuning voor metselwerklay-outs aan Elementen - Lay-out.

Vuurtoren 12.8.2

Het Lighthouse- paneel draait nu op Lighthouse 12.8.2.

Het meest opvallende in deze versie is dat Lighthouse gevonden problemen met aangepaste CSS-eigenschappen in aparte foutmeldingen weergeeft.

Zie ook de volledige lijst met wijzigingen .

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

Chromium-probleem: 40543651 .

Diverse hoogtepunten

Dit zijn slechts enkele van de vele belangrijke bugfixes en verbeteringen in deze release:

  • Prestaties : Callback-gebeurtenissen voor inactieve verzoeken bevatten nu de eigenschap timeout ( crbug.com/441679219 ).
  • Toegankelijkheid . Schermlezers lezen nu het volgende voor:
  • Netwerk : Door met de rechtermuisknop op een netwerklogitem te klikken, wordt het geselecteerd ( crbug.com/368510578 ).

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