Wat is er nieuw in DevTools (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

Nieuwe sectie voor aangepaste eigenschappen in Elementen > Stijlen

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

Om uw geregistreerde aangepaste eigenschappen te inspecteren, beweegt u in Elementen > Stijlen over de naam van de eigenschap en ziet u de beschrijvingen ervan in een knopinfo. Klik in de tooltip op de link om het geregistreerde onroerend goed te bekijken in de opvouwbare @property sectie.

Chroomuitgaves: 1471102 , 1471103 , 1471105 .

Meer lokale overschrijvingsverbeteringen

Voortbordurend op de stroom verbeteringen in de vorige versie , doen lokale overschrijvingen nu het volgende:

  • Wanneer u in Bronnen > Pagina met de rechtermuisknop op een aan de bron toegewezen bestand klikt en Inhoud overschrijven selecteert, toont DevTools een dialoogvenster dat u naar de oorspronkelijke bron brengt. De inhoud van aan de bron toegewezen bestanden kan niet worden overschreven.

    Het dialoogvenster dat u naar de originele code brengt in plaats van naar het brontoegewezen bestand.

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

    Filteren op de waarde 'heeft-overschrijvingen:ja' in de kolom 'Heeft overschrijvingen'.

  • In Bronnen > Overschrijvingen is de menuoptie Alle overschrijvingen verwijderen vervangen door de optie Verwijderen met nauwkeurig gedrag.

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

De vorige actie Alle overschrijvingen verwijderen was verwarrend omdat alleen de overschrijvingen werden verwijderd die actief waren in de huidige sessie, gemarkeerd door de Opgeslagen. paarse stip icoon.

De nieuwe optie Verwijderen toont eerst een waarschuwingsbericht en vraagt ​​om bevestiging, en verwijdert vervolgens de map waarop u hebt geklikt, met alle inhoud ervan.

Om de vorige optie terug te brengen, vinkt u aan Selectievakje. Schakel 'Alle overschrijvingen tijdelijk verwijderen' in Instellingen. Instellingen > Experimenten .

Chroomuitgaves: 1472952 , 1416338 , 1472580 , 1473681 1475668 .

Zoekresultaten tonen nu een vermelding voor alle gevonden overeenkomsten in een coderegel. Voorheen werd alleen de eerste overeenkomst per regel code weergegeven. Het nieuwe gedrag is vooral handig wanneer u in verkleinde bestanden zoekt. Wanneer u op een zoekresultaat klikt, wordt het bestand in de editor geopend en wordt de match nu niet alleen verticaal maar ook horizontaal in beeld gebracht.

De zoekopdracht voor en na het maken toont alle overeenkomsten per regel.

Bovendien kreeg Search een snelheidsboost. Bekijk de vergelijking vóór (links) en na (rechts) in de volgende video.

Ten slotte ondersteunt Search nu negeerlijsten en worden er geen resultaten van genegeerde bestanden weergegeven.

Chroomuitgaves: 1468875 , 1472019 .

Verbeterd bronnenpaneel

Gestroomlijnde werkruimte in het deelvenster Bronnen

De werkruimtefunctie in het paneel Bronnen is nieuw gestroomlijnd:

  • Consistente naamgeving . Het meest opvallende is dat het deelvenster Bronnen > Bestandssysteem is hernoemd naar Werkruimte . Verschillende UI-teksten in dit venster zijn nu duidelijker en vrij van redundantie.
  • Verbeterde opstelling . Bekijk betere aanwijzingen voor het slepen en neerzetten van mappen of klik op een koppeling om een ​​map te selecteren.

Met Bronnen > Werkruimte kunt u wijzigingen die u in DevTools aanbrengt, rechtstreeks met uw bronbestanden synchroniseren.

Bekijk de nieuwe installatie en workflow in actie:

Chroomuitgaves: 1473771 , 1473880 , 1473963 , 1474686 , 1474687 .

Deelvensters in Bronnen opnieuw rangschikken

U kunt de deelvensters aan de linkerkant van het Bronnenpaneel nu opnieuw ordenen door te slepen en neer te zetten, vergelijkbaar met hoe u andere deelvensters, tabbladen en deelvensters opnieuw kunt rangschikken.

Chroomafgiften: 1473758 .

Syntaxisaccentuering en mooie afdrukken voor meer scripttypen

Het Bronnenpaneel kan nu:

  • Pretty-print inline JavaScript binnen de volgende scripttypen: module , importmap , speculationrules .
  • Markeer de syntaxis van de scripttypen importmap en speculationrules , die beide JSON bevatten.

Voor en na mooi afdrukken en syntaxisaccentuering van het scripttype voor speculatieregels.

Zie Pagina's vooraf renderen in Chrome voor directe paginanavigatie voor meer informatie over speculatieregels.

Chroomuitgave: 1473875 .

Emuleer mediafunctie met voorkeur voor verminderde transparantie

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

Om deze mediafunctie te emuleren, opent u het tabblad Rendering en bladert u ernaartoe.

Chroomuitgave: 1424879 .

Vuurtoren 11

Het Lighthouse- paneel toont nu Lighthouse 11 . Met name verwijdert deze versie de verouderde navigatie, voegt nieuwe toegankelijkheidsaudits toe en verandert de manier waarop de toegankelijkheidscategorie wordt gescoord.

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

Chroomuitgave: 772558 .

Verbeteringen in toegankelijkheid

DevTools ondersteunt nu meer navigatietoetsaanslagen:

  • CSS-overzicht : Gebruik de pijlen omhoog en omlaag om door secties in de linkerzijbalk te navigeren.
  • Geheugen : focus in de linkerzijbalk op de knop Opslaan naast snapshots met Tab en druk op Enter om de map te selecteren.

Bovendien zijn verschillende problemen met aankondigingen van schermlezers opgelost.

Chroomuitgaves: 1470401 , 1471301 , 1474108 , 1468631 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Netwerk : nieuwe pictogrammen voor populaire bronnentypen: media , wasm , websocket , manifest , fetch/xhr , json ( 1466298 ).
  • Kleurupdates voor materiaal 3 kleuren in veel UI-elementen, met name in de panelen Elementen en Prestaties ( 1456690 , 1472243 ).
  • Problemen bewaart nu cookie-problemen in alle navigaties ( 1466601 ).
  • Diverse verbeteringen in Applicatie > Voorladen , met name sorteerbare rasters en herziene regelsetdetails ( 1410709 ).
  • Verschillende verbeteringen van de opdrachteditor in Protocolmonitor , met name waarschuwingen bij verkeerde invoer, het bewerken van een verzonden opdracht, editor voor objectparameters zonder vooraf gedefinieerde sleutels, ondersteuning voor opsommingen die niet zijn gedefinieerd door verwijzingen, objecten zonder typereferentie, filteropdrachten op subtekenreeksovereenkomsten en meer ( 1448050 ).
  • Het prestatievlamdiagram krijgt een rand rond het totale vak op het cirkeldiagram ( 1470147 ).
  • Bronnen behandelen streepjes nu niet meer als woordtekens in CSS ( 1471354 ).
  • Autocomplete sorteert nu altijd CSS-gewijze trefwoorden aan het einde.
  • RegEx-filters ondersteunen nu spaties ( 1346936 ).
  • Elementen voor detectie van vaste mediaquery's ( 1472693 ).

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 .