Wat is er nieuw in DevTools, Chrome 139

Sofia Emelianova
Sofia Emelianova
GitHub

Een betrouwbaardere en productievere versie van Chrome DevTools

In deze versie heeft Chrome DevTools prioriteit gegeven aan productkwaliteit. Dit hield in dat een breed scala aan bekende problemen werd aangepakt, van hardnekkige visuele fouten, gebruiksproblemen en inconsistenties in het ontwerp tot prestatie- en functionele problemen. Al met al hebben we het aantal openstaande problemen met 27% verminderd.

We hebben eindelijk een aantal problemen aangepakt die al jaren speelden, maar we hebben ook verbeteringen aangebracht in nieuwere functies, bijvoorbeeld in het prestatiepaneel en de AI-ondersteuning . Het resultaat is een aanzienlijk verbeterde ontwikkelaarservaring in alle opzichten.

Achter de schermen hebben we enorm veel moeite gedaan om onze testdekking te verbeteren, complexe testfouten te onderzoeken, tests naar robuustere omgevingen te migreren en bugs op te lossen die we gaandeweg ontdekten. We zijn erin geslaagd het aantal testgerelateerde problemen met 54% te verminderen.

We hopen dat u deze talrijke subtiele verbeteringen en verfijningen in diverse panelen zult ervaren, waardoor uw dagelijkse debug- en ontwikkelprocessen soepeler, betrouwbaarder en productiever verlopen.

Upload afbeeldingen met behulp van AI voor styling.

Om je prompts visueel te verduidelijken, kun je nu niet alleen automatisch schermafbeeldingen maken , maar ook willekeurige afbeeldingen uploaden naar je chats met Gemini via het AI-assistentiepaneel .

Start uw gesprek vanuit het paneel Elementen door een DOM-element te selecteren en te klikken. Vraag het aan de AI , zodat het element als gesprekscontext wordt gespecificeerd. Klik vervolgens op Voeg de afbeelding toe in het invoerveld.

De situatie vóór en na de implementatie ondersteunt het uploaden van willekeurige afbeeldingen.

Voeg aanvraagheaders toe aan de tabel in het netwerk.

In het paneel Netwerk kunt u nu met de rechtermuisknop op een kolomnaam in de tabel met aanvragen klikken en meerdere aanvraagheaders selecteren om deze als kolommen toe te voegen.

De situatie vóór en na het toevoegen van de optie 'verzoekheaders' aan het menu.

Chromium-probleem: 397481040 .

Bekijk de hoogtepunten van Google I/O 2025.

Als je dat nog niet hebt gedaan, probeer dan de nieuwe belangrijke functies van Chrome DevTools die tijdens Google I/O 2025 zijn gepresenteerd, waaronder (maar niet beperkt tot):

Bekijk ook de nieuwe prestatie-inzichten : Dubbele JavaScript-code en Verouderde JavaScript-code .

Diverse hoogtepunten

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

  • Toepassing : Er is nu een bevestigingsdialoogvenster om IndexedDB-objectopslag te wissen, omdat dit een onomkeerbare actie is ( crbug.com/326987147 ).
  • Bronnen : Logpunten en voorwaardelijke breakpoint-badges naast coderegels tonen nu een tooltip bij het hoveren met het bijbehorende logbericht of de bijbehorende voorwaarde ( crbug.com/40266230 ).

  • Prestatie :

    • Het inzicht in de oorzaken van de lay-outverschuiving toont nu links naar afbeeldingen zonder de juiste afmetingen ( crbug.com/416449602 ).
    • De inzichten in de LCP-aanvraagdetectie tonen nu de vertraging bij het laden van afbeeldingen na het vroegste startpunt.
    • Beperking van bandbreedte : Het verouderde formaat van de instellingen voor bandbreedtebeperking die sommige gebruikers lokaal hadden opgeslagen, is gecorrigeerd.
    • Gebeurtenislogboek : Het filteren is sneller geworden ( crbug.com/40783421 ).

  • Animaties : Voorbeeldschermafbeeldingen zijn afgeschaft omdat het bekijken van een voorbeeld van een animatiegroep door erop te klikken een vergelijkbare en betere ervaring biedt ( crbug.com/330179643 ).

  • Toegankelijkheid :

    • Er zijn aria-labels toegevoegd aan de zijbalk 'Bronnen > DOM-breekpunten' , indien aanwezig.
    • De toetsenbordnavigatie met Shift + Tab binnen het tekstveld voor live-expressies in de console is gecorrigeerd ( crbug.com/408398435 , crbug.com/420344137 ).
    • In de instellingen is nu de sneltoets voor in- en uitzoomen/resetten beschikbaar: Cmd/Ctrl + +/-/0 ( crbug.com/41484555 ).
    • Elementen > Stijlen : CSS-hint- en waarschuwingspictogrammen ( crbug.com/40706851 ) en de Angle-klok kunnen nu met het toetsenbord worden gefocust ( crbug.com/401212624 , crbug.com/401213524 ).

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