Wat is er nieuw in DevTools (Chrome 67)

Kayce Basken
Kayce Basques
X GitHub

Nieuwe functies en belangrijke wijzigingen in DevTools in Chrome 67 zijn onder andere:

Videoversie van de release-opmerkingen :

Open het paneel Netwerk en druk vervolgens op Command + F (Mac) of Control + F (Windows, Linux, ChromeOS) om het nieuwe paneel Netwerk zoeken te openen. DevTools doorzoekt de headers en body's van alle netwerkverzoeken op de zoekopdracht die u opgeeft.

Zoeken naar de tekst 'cache-control' met het nieuwe zoekvenster voor netwerkgegevens.

Afbeelding 1. Zoeken naar de tekstcache cache-control met het nieuwe paneel Netwerk zoeken.

Klik op de luciferdoos Lucifersdoosje Om uw zoekopdracht hoofdlettergevoelig te maken, klikt u op 'Reguliere expressie gebruiken' . Gebruik een reguliere expressie. Om alle resultaten weer te geven die overeenkomen met het door u opgegeven patroon. U hoeft uw reguliere expressie niet tussen schuine strepen te plaatsen.

Een reguliere expressiequery in het deelvenster Netwerk zoeken.

Afbeelding 2. Een reguliere expressiequery in het venster Netwerk zoeken.

De gebruikersinterface van het paneel 'Globale zoekopdracht ' komt nu overeen met de gebruikersinterface van het nieuwe paneel 'Netwerkzoekopdracht '. De resultaten worden nu ook overzichtelijker weergegeven, waardoor ze gemakkelijker te scannen zijn.

De oude en de nieuwe gebruikersinterface.

Afbeelding 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 de globale zoekfunctie te openen. Je kunt deze ook openen via het Command Menu .

Voorbeelden van CSS-variabelewaarden in het deelvenster Stijlen

Wanneer de waarde van een CSS-kleureigenschap, zoals background-color of color , wordt 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 dat in de nieuwe gebruikersinterface aan de rechterkant wel het geval is.

Kopiëren als ophalen

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

Het kopiëren van de code die overeenkomt met fetch() voor een verzoek.

Afbeelding 5. Het kopiëren van de fetch() -equivalent code voor een verzoek.

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 auditpanel

Nieuwe audits

Het auditpanel heeft 2 nieuwe audits, waaronder:

Nieuwe configuratieopties

U kunt het paneel Audits nu als volgt configureren:

  • Behoud de instellingen voor de desktopweergave en de gebruikersagent. Met andere woorden, u kunt voorkomen dat het paneel Audits een mobiel apparaat simuleert.
  • Schakel netwerk- en CPU-throttling uit.
  • Behoud de gegevens van opslagmedia zoals LocalStorage en IndexedDB tijdens audits.

Nieuwe configuratieopties voor audits.

Afbeelding 6. Nieuwe configuratieopties voor audits.

Bekijk sporen

Nadat u een pagina hebt gecontroleerd, klikt u op Trace bekijken om de laadprestatiegegevens te bekijken waarop uw controle is gebaseerd in het paneel Prestaties .

De knop 'Trace bekijken'.

Afbeelding 7. De knop 'Trace bekijken' .

Stop oneindige lussen

Als je veel werkt met for -lussen, do...while -lussen of recursie, is de kans groot dat je tijdens het ontwikkelen van je website per ongeluk een oneindige lus hebt veroorzaakt. Om deze oneindige lus te stoppen, kun je nu het volgende doen:

  1. Open het paneel Bronnen .
  2. Klik op Pauze Pauze De knop verandert in 'Scriptuitvoering hervatten' . Cv .
  3. Houd de hervatting van de scriptuitvoering in de wachtCv Selecteer vervolgens 'Stop huidige JavaScript-aanroep'. Stop .

In de bovenstaande video wordt de klok bijgewerkt via een ` setInterval() `-timer. Door op 'Start Infinite Loop' te klikken, wordt een ` do...while -lus uitgevoerd die nooit stopt. Het interval wordt hervat omdat het niet actief was toen op 'Stop Current JavaScript Call' werd geklikt.Stop werd geselecteerd.

Gebruikerstiming in de tabbladen Prestaties

Wanneer u een prestatie-opname bekijkt, klikt u op het gedeelte Gebruikerstiming om de gebruikerstiminggegevens te bekijken in de tabbladen Samenvatting , Bottom-Up , Oproepstructuur en Gebeurtenislogboek .

Gebruikerstiminggegevens bekijken in het tabblad Bottom-Up.

Figuur 8. Gebruikerstimingmetingen bekijken in het tabblad Bottom-Up . De blauwe balk links van het gedeelte Gebruikerstiming geeft aan dat dit is geselecteerd.

Over het algemeen kunt u nu elk van de secties selecteren ( Hoofdthread , Gebruikerstiming , GPU , ScriptStreamer , enzovoort) en de activiteit van die sectie in de tabbladen bekijken.

Selecteer JavaScript VM-instanties in het geheugenpaneel.

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

Screenshots van het geheugenpaneel vóór en na de aanpassing.

Afbeelding 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 het instantiebestand developers.google.com staan ​​twee waarden: 8.7 MB en 13.3 MB . De linkerwaarde vertegenwoordigt het geheugen dat door JavaScript wordt gebruikt. De rechterwaarde vertegenwoordigt al het besturingssysteemgeheugen dat door die VM-instantie wordt gebruikt. De linkerwaarde is inclusief de rechterwaarde. In Taakbeheer van Chrome komt de linkerwaarde overeen met JavaScript Memory en de rechterwaarde met de Memory Footprint .

Het tabblad Netwerk is hernoemd naar tabblad Pagina.

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

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

Afbeelding 10. In de oude gebruikersinterface aan de linkerkant heet het tabblad met de paginabronnen 'Netwerk' , terwijl het in de nieuwe gebruikersinterface aan de rechterkant 'Pagina' heet.

Updates voor het donkere thema

Chrome 67 bevat een aantal kleine wijzigingen in het kleurenschema van het donkere thema. Zo zijn de breakpoint-pictogrammen en de huidige uitvoeringsregel nu groen.

Een schermafbeelding van het nieuwe breakpoint-pictogram en het huidige kleurenschema voor de uitvoeringslijn.

Afbeelding 11. Een schermafbeelding van het nieuwe breakpoint-pictogram en het huidige kleurenschema voor de uitvoeringsregel.

Certificaattransparantie in het beveiligingspaneel

Het beveiligingspaneel geeft nu informatie weer over de transparantie van certificaten .

Informatie over certificaattransparantie in het paneel Beveiliging.

Afbeelding 12. Informatie over de transparantie van certificering in het beveiligingspaneel.

Locatie-isolatie in het prestatiepaneel

Als Site Isolation is ingeschakeld, biedt het Prestatiepaneel nu een flame chart voor elk proces, zodat u de totale belasting van elk proces kunt zien.

Per-proces vlamdiagrammen in een prestatieopname.

Figuur 13. Vlamdiagrammen per proces in een prestatieopname.

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