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, beweegt u de muisaanwijzer over de eigenschapsnaam in Elementen > Stijlen . De beschrijvingen worden in een tooltip weergegeven. Klik in de tooltip op de link om de geregistreerde eigenschap te bekijken in de uitvouwbare @property sectie.

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 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 'Verwijder alle overschrijvingen' 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 waarop u hebt geklikt, 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 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 pretty-printing en syntax highlighting van het scripttype voor speculatieregels.

Voor meer informatie over speculatieregels, zie Prerenderpagina's in Chrome voor directe paginanavigatie .

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 pictogrammen voor populaire resourcetypen: media , wasm , websocket , manifest , fetch/xhr , json ( 1466298 ).
  • Kleurupdates naar materiaal 3-kleuren 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 referenties, objecten zonder typereferentie, 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 wat in de serie Wat is er nieuw in DevTools is behandeld.