Wat is er nieuw in DevTools (Chrome 67)

Kayce Basken

Nieuwe functies en grote veranderingen voor DevTools in Chrome 67 zijn onder meer:

Videoversie van de releaseopmerkingen :

Open het netwerkpaneel en druk vervolgens op Command + F (Mac) of Control + F (Windows, Linux, ChromeOS) om het nieuwe netwerkzoekvenster te openen. DevTools doorzoekt de headers en hoofdteksten van alle netwerkverzoeken voor de zoekopdracht die u opgeeft.

Zoeken naar de tekst 'cache-control' met het nieuwe Netwerkzoekvenster.

Figuur 1 . Zoeken naar het cache-control met het nieuwe netwerkzoekvenster

Klik op Matchcase Match geval om uw zoekopdracht hoofdlettergevoelig te maken. Klik op Reguliere expressie gebruiken Gebruik reguliere expressie om resultaten weer te geven die overeenkomen met het patroon dat u opgeeft. U hoeft uw RegEx niet tussen schuine strepen te plaatsen.

Een reguliere expressiequery in het deelvenster Netwerk zoeken.

Figuur 2 . Een reguliere expressiequery in het deelvenster Netwerk zoeken.

De gebruikersinterface van het deelvenster Globaal zoeken komt nu overeen met de gebruikersinterface van het nieuwe deelvenster Netwerk zoeken . Het drukt nu ook mooie resultaten af ​​om de scanbaarheid te bevorderen.

De oude en nieuwe gebruikersinterface.

Figuur 3 . De oude gebruikersinterface aan de linkerkant en de nieuwe gebruikersinterface aan de rechterkant

Druk op Command + Option + F (Mac) of Control + Shift + F (Windows, Linux, ChromeOS) om Global Search te openen. Je kunt het ook openen via het Commandomenu .

Voorbeelden van CSS-variabelewaarden in het deelvenster Stijlen

Wanneer de waarde van een CSS-kleureigenschap, zoals background-color of color , is ingesteld op een CSS-variabele, toont DevTools nu een voorbeeld van die kleur.

Een voorbeeld van CSS-variabele kleurwaarden.

Figuur 4 . In de oude gebruikersinterface aan de linkerkant is er geen kleurvoorbeeld naast color: var(--main-color) , terwijl er in de nieuwe gebruikersinterface aan de rechterkant wel

Kopiëren als ophalen

Klik met de rechtermuisknop op een netwerkverzoek en selecteer vervolgens Kopiëren > Kopiëren als ophalen om de fetch() -equivalente code voor dat verzoek naar uw klembord te kopiëren.

De fetch()-equivalente code voor een verzoek kopiëren.

Figuur 5 . De fetch() -equivalente code voor een verzoek kopiëren

DevTools produceert code zoals de volgende:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Updates van het auditpaneel

Nieuwe audits

Het Auditspanel heeft 2 nieuwe audits, waaronder:

Nieuwe configuratieopties

U kunt het paneel Audits nu configureren om:

  • Behoud de desktopviewport- en user-agentinstellingen. Met andere woorden, u kunt voorkomen dat het paneel Audits een mobiel apparaat simuleert.
  • Schakel netwerk- en CPU-beperking uit.
  • Bewaar opslag, zoals LocalStorage en IndexedDB, tijdens audits.

Nieuwe auditconfiguratieopties.

Figuur 6 . Nieuwe auditconfiguratieopties

Bekijk sporen

Nadat u een pagina hebt gecontroleerd, klikt u op Tracering weergeven om de laadprestatiegegevens te bekijken waarop uw audit is gebaseerd in het prestatiepaneel .

De knop Tracering bekijken.

Figuur 7 . De knop Tracering bekijken

Stop oneindige lussen

Als u met for -lussen werkt, do...while of veel recursie gebruikt, heeft u waarschijnlijk per ongeluk een oneindige lus uitgevoerd tijdens het ontwikkelen van uw site. Om de oneindige lus te stoppen, kun je nu:

  1. Open het paneel Bronnen .
  2. Klik op Pauze Pauze . De knop verandert in Scriptuitvoering hervatten Cv .
  3. Houd de hervatting van de uitvoering van het script ingedruktCv selecteer vervolgens Huidige JavaScript-oproep stoppen Stop .

In de video hierboven wordt de klok bijgewerkt via een setInterval() timer. Als u op Start Infinite Loop klikt, wordt een do...while lus uitgevoerd die nooit stopt. Het interval wordt hervat omdat het niet actief was toen de huidige JavaScript-oproep werd gestoptStop werd geselecteerd.

Gebruikerstiming op de tabbladen Prestaties

Wanneer u een prestatieopname bekijkt, klikt u op de sectie Gebruikerstiming om de metingen van de gebruikerstiming te bekijken op de tabbladen Samenvatting , Bottom-Up , Oproepstructuur en Gebeurtenislogboek .

Maatregelen voor gebruikerstiming bekijken op het tabblad Bottom-Up.

Figuur 8 . Maatregelen voor gebruikerstiming bekijken op het tabblad Bottom-Up . De blauwe balk links van het gedeelte Gebruikerstiming geeft aan dat deze is geselecteerd.

Over het algemeen kunt u nu elk van de secties selecteren ( Main Thread , User Timing , GPU , ScriptStreamer , enzovoort) en de activiteit van die sectie op de tabbladen bekijken.

Selecteer JavaScript VM-instanties in het deelvenster Geheugen

In het paneel Geheugen worden nu duidelijk alle JavaScript VM-instanties weergegeven die aan een pagina zijn gekoppeld, in plaats van ze zoals voorheen achter het vervolgkeuzemenu Doel te verbergen.

Voor en na schermafbeeldingen van het geheugenpaneel.

Figuur 9 . In de oude gebruikersinterface aan de linkerkant zijn de JavaScript VM-instanties verborgen achter het vervolgkeuzemenu Doel , terwijl ze in de nieuwe gebruikersinterface aan de rechterkant worden weergegeven in de tabel Selecteer JavaScript VM-instantie

Naast de developers.google.com -instantie zijn er twee waarden: 8.7 MB en 13.3 MB . De linkerwaarde vertegenwoordigt geheugen dat is toegewezen vanwege JavaScript. De juiste waarde vertegenwoordigt al het besturingssysteemgeheugen dat wordt toegewezen vanwege dat VM-exemplaar. De rechterwaarde is inclusief de linkerwaarde. In Taakbeheer van Chrome komt de linkerwaarde overeen met JavaScript Memory en de rechterwaarde met Memory Footprint .

Het tabblad Netwerk is hernoemd naar het tabblad Pagina

In het paneel Bronnen heet het tabblad Netwerk nu het tabblad Pagina .

Twee DevTools-vensters naast elkaar, die de naamswijziging demonstreren.

Figuur 10 . In de oude gebruikersinterface aan de linkerkant heet het tabblad met de bronnen van de pagina Netwerk , terwijl dit in de nieuwe gebruikersinterface aan de rechterkant Pagina heet

Updates voor donkere thema's

Chrome 67 wordt geleverd met een aantal kleine wijzigingen in het donkere themakleurenschema. De breekpuntpictogrammen en de huidige uitvoeringsregel zijn nu bijvoorbeeld groen.

Een screenshot van het nieuwe breekpuntpictogram en het huidige kleurenschema voor de uitvoeringslijn.

Figuur 11 . Een screenshot van het nieuwe breekpuntpictogram en het huidige kleurenschema voor de uitvoeringslijn

Certificaattransparantie in het paneel Beveiliging

Het paneel Beveiliging rapporteert nu informatie over certificaattransparantie .

Certificaattransparantie-informatie in het paneel Beveiliging.

Figuur 12 . Certificeringstransparantie-informatie in het paneel Beveiliging

Locatie-isolatie in het paneel Prestaties

Als Site-isolatie is ingeschakeld, biedt het Prestatiepaneel nu een vlamdiagram voor elk proces, zodat u het totale werk kunt zien dat elk proces veroorzaakt.

Vlammendiagrammen per proces in een prestatieopname.

Figuur 13 . Vlammendiagrammen per proces in een prestatieopname

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 .