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 tekstcache cache-control met het nieuwe netwerkzoekvenster

Klik op Matchcase Match Case 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-agent-instellingen. 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 gekozen.

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. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .

Chroom 124

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chroom 66

Chroom 65

Chroom 64

Chroom 63

Chroom 62

Chroom 61

Chroom 60

Chroom 59