Wat is er nieuw in DevTools (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

Nieuwe sectie voor aangepaste eigenschappen in Elementen > Stijlen

Het paneel Elementen ondersteunt nu de CSS-at-regel `@property` . Hiermee kunt u expliciet aangepaste CSS-eigenschappen definiëren en deze in een stylesheet registreren zonder JavaScript uit te voeren.

Om uw geregistreerde aangepaste eigenschappen te bekijken, gaat u naar Elementen > Stijlen . Beweeg de muis over de eigenschapsnaam om de beschrijvingen ervan in een tooltip te zien. Klik in de tooltip op de link om de geregistreerde eigenschap te bekijken in het uitklapbare gedeelte @property .

Chromium-problemen: 1471102 , 1471103 , 1471105 .

Verbeteringen aan lokale overschrijvingen

In navolging van de verbeteringen in de vorige versie , doen lokale overschrijvingen nu het volgende:

  • In Sources > Page , wanneer u met de rechtermuisknop op een source-mapped bestand klikt en 'Override content' selecteert, toont DevTools een dialoogvenster dat u naar de oorspronkelijke bron leidt. De inhoud van source-mapped bestanden kan niet worden overschreven.

    Het dialoogvenster dat je naar de originele code brengt in plaats van naar het broncodebestand.

  • Het paneel Netwerk krijgt een nieuwe kolom 'Heeft overschrijvingen' en een bijbehorend filter ' has-overrides:[content|headers|yes|no] . Om de kolom 'Heeft overschrijvingen' te zien, klikt u met de rechtermuisknop op de tabelkop en selecteert u deze.

    Filteren op de waarde 'has-overrides:yes' in de kolom 'Heeft overrides'.

  • In Bronnen > Overrides is de menuoptie ' Alle overrides verwijderen' vervangen door de optie 'Verwijderen' met nauwkeuriger gedrag.

    Voor en na het vervangen van 'Alle overschrijvingen verwijderen' door 'Verwijderen'.

De vorige optie 'Alle overschrijvingen verwijderen' was verwarrend, omdat deze alleen de overschrijvingen verwijderde die actief waren in de huidige sessie, gemarkeerd met een vinkje. Opgeslagen. Paars stipje-icoon.

De nieuwe optie 'Verwijderen' toont eerst een waarschuwingsbericht en vraagt ​​om bevestiging, waarna de aangeklikte map met alle inhoud wordt verwijderd.

Om de vorige optie terug te halen, vinkt u het volgende aan: Selectievakje. Schakel "Alle overschrijvingen tijdelijk verwijderen" in in Instellingen. Instellingen > Experimenten .

Chromium-problemen: 1472952 , 1416338 , 1472580 , 1473681 , 1475668 .

Zoekresultaten tonen nu een item voor elke overeenkomst die in een regel code is gevonden. Voorheen werd alleen de eerste overeenkomst per regel code weergegeven. Deze nieuwe functionaliteit is vooral handig bij het zoeken in geminificeerde bestanden. Wanneer je op een zoekresultaat klikt, wordt het bestand in de editor geopend en wordt de overeenkomst nu niet alleen verticaal, maar ook horizontaal in beeld gescrolld.

De afbeeldingen voor en na het uitvoeren van de zoekopdracht tonen alle overeenkomsten per regel.

Bovendien is de zoekfunctie sneller geworden. Bekijk de vergelijking voor (links) en na (rechts) in de volgende video.

Tot slot ondersteunt de zoekfunctie nu het negeren van bestanden en worden er geen resultaten meer weergegeven voor bestanden die zijn genegeerd.

Chromium-problemen: 1468875 , 1472019 .

Verbeterd bronnenpaneel

Gestroomlijnde werkruimte in het paneel Bronnen

De werkruimtefunctie in het paneel Bronnen is vernieuwd en gestroomlijnd:

  • Consistente naamgeving . Met name het paneel Bronnen > Bestandssysteem is hernoemd naar Werkruimte . Diverse UI-teksten in dit paneel zijn nu duidelijker en bevatten geen overbodige informatie meer.
  • Verbeterde configuratie . Zie duidelijkere aanwijzingen voor het slepen en neerzetten van mappen of klik op een link om een ​​map te selecteren.

Via Sources > Workspace kunt u wijzigingen die u in DevTools aanbrengt, rechtstreeks synchroniseren met uw bronbestanden.

Bekijk de nieuwe configuratie en workflow in actie:

Chromium-problemen: 1473771 , 1473880 , 1473963 , 1474686 , 1474687 .

Vensters in Bronnen opnieuw rangschikken

Je kunt de vensters aan de linkerkant van het paneel Bronnen nu opnieuw rangschikken door ze te slepen, net zoals je dat met andere panelen, tabbladen en vensters kunt doen .

Chromium-problemen: 1473758 .

Syntaxmarkering en mooie opmaak voor meer scripttypen

Het paneel Bronnen kan nu:

  • Zorg voor een mooie opmaak van inline JavaScript binnen de volgende scripttypen: module , importmap , speculationrules .
  • Markeer de syntaxis van de scripttypen importmap en speculationrules , die beide JSON-gegevens bevatten.

Voor en na het opmaken en markeren van de syntaxis van het scripttype voor speculatieregels.

Voor meer informatie over speculatieregels, zie Pagina's vooraf renderen in Chrome voor directe paginanavigatie .

Chromium-probleem: 1473875 .

Emulate prefers-reduced-transparency media feature

Chrome 118 ondersteunt nu de functie prefers-reduced-transparency voor media . Met deze functie kunnen ontwikkelaars webcontent aanpassen aan de door de gebruiker ingestelde voorkeur voor verminderde transparantie in het besturingssysteem, zoals de instelling 'Transparantie verminderen' op macOS.

Om deze mediafunctie na te bootsen, opent u het tabblad 'Rendering' en scrolt u naar beneden.

Chromium-probleem: 1424879 .

Vuurtoren 11

Het Lighthouse- paneel draait nu op Lighthouse 11. Deze versie verwijdert met name de oude navigatie, voegt nieuwe toegankelijkheidsaudits toe en wijzigt de manier waarop de toegankelijkheidscategorie wordt beoordeeld.

Zie ook de volledige lijst met wijzigingen . Voor meer informatie over het gebruik van het Lighthouse- paneel in DevTools, zie Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Toegankelijkheidsverbeteringen

DevTools ondersteunt nu meer navigatietoetsen:

  • CSS-overzicht : Gebruik de pijltoetsen omhoog en omlaag om door de secties in de linkerzijbalk te navigeren.
  • Geheugen : Selecteer in de linkerzijbalk de knop 'Opslaan' naast 'Momentopnamen' met de Tab-toets en druk op Enter om de map te selecteren.

Daarnaast zijn diverse problemen met aankondigingen van schermlezers opgelost.

Chromium-problemen: 1470401 , 1471301 , 1474108 , 1468631 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Netwerk : Nieuwe pictogrammen voor populaire resourcetypen: media , wasm , websocket , manifest , fetch/xhr , json ( 1466298 ).
  • De kleuren van veel UI-elementen zijn bijgewerkt naar Material 3-kleuren, met name in de panelen Elementen en Prestaties ( 1456690 , 1472243 ).
  • Problemen zorgen er nu voor dat cookies behouden blijven tijdens navigaties ( 1466601 ).
  • Diverse toepassingen > Verbeteringen in het vooraf laden , met name sorteerbare tabellen en herziene details van de regelset ( 1410709 ).
  • Diverse verbeteringen aan de opdrachteditor in Protocol Monitor , met name waarschuwingen bij onjuiste invoer, het bewerken van een verzonden opdracht, een editor voor objectparameters zonder vooraf gedefinieerde sleutels, ondersteuning voor enumeraties die niet door referenties zijn gedefinieerd, objecten zonder typereferentie, het filteren van opdrachten op basis van overeenkomsten met subtekenreeksen, en meer ( 1448050 ).
  • De prestatievlamgrafiek krijgt een rand rond het totaalvak in de cirkeldiagram ( 1470147 ).
  • Sources behandelt streepjes nu niet meer als woordtekens in CSS ( 1471354 ).
  • De automatische aanvulling sorteert CSS-gerelateerde zoekwoorden nu altijd aan het einde.
  • RegEx-filters ondersteunen nu spaties ( 1346936 ).
  • Elementen vaste mediaquery-functiedetectie ( 1472693 ).

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