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 kun je aangepaste CSS-eigenschappen expliciet definiëren en registreren in een stylesheet zonder JavaScript uit te voeren.

Om uw geregistreerde aangepaste eigenschappen te bekijken, gaat u naar Elementen > Stijlen en beweegt u de muisaanwijzer over de eigenschapsnaam. De beschrijvingen worden in een tooltip weergegeven. Klik in de tooltip op de link om de geregistreerde eigenschap te bekijken in de uitvouwbare sectie @property .

Chromium-problemen: 1471102 , 1471103 , 1471105 .

Meer lokale overschrijvingsverbeteringen

De verbeteringen in de vorige versie zijn voortgezet: lokale overschrijvingen doen nu het volgende:

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

    Het dialoogvenster dat u naar de originele code brengt in plaats van naar het toegewezen bronbestand.

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

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

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

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

De vorige optie Alles verwijderen was verwarrend omdat alleen de overschrijvingen werden verwijderd die actief waren in de huidige sessie, gemarkeerd door de Opgeslagen. paars stip-pictogram.

De nieuwe optie Verwijderen toont eerst een waarschuwingsbericht en vraagt ​​om bevestiging. Vervolgens verwijdert u de map die u hebt aangeklikt, inclusief alle inhoud.

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

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

Zoekresultaten tonen nu een resultaat per gevonden overeenkomst in een regel code. Voorheen werd alleen de eerste overeenkomst per regel code weergegeven. Deze nieuwe functie is vooral handig wanneer u in geminimaliseerde bestanden zoekt. Wanneer u op een zoekresultaat klikt, wordt het bestand in de editor geopend en wordt de overeenkomst nu niet alleen verticaal, maar ook horizontaal weergegeven.

De zoekopdracht voor en na toont alle overeenkomsten per regel.

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

Ten slotte ondersteunt Zoeken nu de negeerfunctie en worden er geen resultaten meer weergegeven van genegeerde bestanden.

Chromium-problemen: 1468875 , 1472019 .

Verbeterd bronnenpaneel

Gestroomlijnde werkruimte in het Bronnenpaneel

De werkruimtefunctie in het Bronnenpaneel is opnieuw gestroomlijnd:

  • Consistente naamgeving . Met name het deelvenster Bronnen > Bestandssysteem is hernoemd naar Werkruimte . Diverse gebruikersinterfaceteksten in dit deelvenster zijn nu duidelijker en vrij van redundantie.
  • Verbeterde instellingen . Zie betere aanwijzingen voor het slepen en neerzetten van mappen of klik op een link om een ​​map te selecteren.

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

Bekijk de nieuwe opstelling en workflow in actie:

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

Deelvensters in Bronnen opnieuw ordenen

U kunt nu de volgorde van deelvensters aan de linkerkant van het paneel Bronnen wijzigen door ze te slepen en neer te zetten. Dit is vergelijkbaar met de manier waarop u andere deelvensters, tabbladen en deelvensters kunt wijzigen .

Chromium-problemen: 1473758 .

Syntaxisaccentuering en mooi afdrukken voor meer scripttypen

Het paneel Bronnen kan nu:

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

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

Zie Prerenderpagina's in Chrome voor directe paginanavigatie voor meer informatie over speculatieregels.

Chromium-probleem: 1473875 .

Emuleren geeft de voorkeur aan media met verminderde transparantie

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

Om deze mediafunctie na te bootsen, opent u het tabblad Rendering en scrolt u er naartoe.

Chromium-probleem: 1424879 .

Vuurtoren 11

Het Lighthouse -paneel draait nu op Lighthouse 11. Het belangrijkste is dat in deze versie de verouderde navigatie is verwijderd, nieuwe toegankelijkheidscontroles zijn toegevoegd en de manier waarop de toegankelijkheidscategorie wordt beoordeeld, is gewijzigd.

Zie ook de volledige lijst met wijzigingen . Zie Lighthouse: Optimaliseer de websitesnelheid voor de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools.

Chromium-probleem: 772558 .

Verbeteringen in toegankelijkheid

DevTools ondersteunt nu meer navigatietoetsaanslagen:

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

Daarnaast zijn diverse problemen met schermlezeraankondigingen opgelost.

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

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Netwerk : Nieuwe iconen voor populaire resourcetypen: media , wasm , websocket , manifest , fetch/xhr , json ( 1466298 ).
  • Kleurupdates naar 3 materiaalkleuren in veel UI-elementen, met name in de panelen Elementen en Prestaties ( 1456690 , 1472243 ).
  • Problemen behouden nu cookieproblemen tijdens navigatie ( 1466601 ).
  • Diverse verbeteringen in de toepassing > Vooraf laden , met name sorteerbare rasters en herziene regelsetdetails ( 1410709 ).
  • Verschillende verbeteringen van de opdracht-editor in Protocol monitor , met name waarschuwingen bij verkeerde invoer, het bewerken van een verzonden opdracht, een editor voor objectparameters zonder vooraf gedefinieerde sleutels, ondersteuning voor enums die niet gedefinieerd zijn door verwijzingen, objecten zonder typeverwijzing, opdrachten filteren op basis van subtekenreeksovereenkomsten, en meer ( 1448050 ).
  • De prestatievlamgrafiek krijgt een rand rond het totale vak op het cirkeldiagram ( 1470147 ).
  • Bronnen behandelen streepjes nu niet meer als woordtekens in CSS ( 1471354 ).
  • Automatisch aanvullen sorteert CSS-gewijze trefwoorden nu altijd aan het einde.
  • RegEx-filters ondersteunen nu spaties ( 1346936 ).
  • Elementen vaste media query-functiedetectie ( 1472693 ).

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om nieuwe functies, updates of iets anders met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.