Wat is er nieuw in DevTools (Chrome 71)

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

Lees verder of bekijk de videoversie van deze pagina:

Beweeg over een Live-expressie om een ​​DOM-knooppunt te markeren

Wanneer een Live Expression evalueert tot een DOM-knooppunt, beweegt u de muis over het Live Expression-resultaat om dat knooppunt in de viewport te markeren.

Beweeg over een Live Expression-resultaat om het knooppunt in de viewport te markeren.

Figuur 1 . Beweeg over een Live Expression-resultaat om het knooppunt in de viewport te markeren

Bewaar DOM-knooppunten als globale variabelen

Om een ​​DOM-knooppunt op te slaan als een globale variabele, voert u een expressie uit in de console die resulteert in een knooppunt, klikt u met de rechtermuisknop op het resultaat en selecteert u vervolgens Opslaan als globale variabele .

Opslaan als globale variabele in de console.

Figuur 2 . Opslaan als globale variabele in de console

Of klik met de rechtermuisknop op het knooppunt in de DOM-structuur en selecteer Opslaan als globale variabele .

Opslaan als globale variabele in de DOM-structuur.

Figuur 3 . Opslaan als globale variabele in de DOM-structuur

Initiator- en prioriteitsinformatie nu in HAR-import en -export

Als u samen met collega's netwerklogboeken wilt diagnosticeren, kunt u de netwerkverzoeken exporteren naar een HAR-bestand .

Netwerkverzoeken exporteren naar een HAR-bestand.

Figuur 8 . Netwerkverzoeken exporteren naar een HAR-bestand

Om het bestand weer in het netwerkpaneel te importeren, hoeft u het alleen maar te slepen en neer te zetten.

Wanneer u een HAR-bestand exporteert, neemt DevTools nu initiator- en prioriteitsinformatie op in het HAR-bestand. Wanneer u HAR-bestanden weer in DevTools importeert, worden de kolommen Initiator en Prioriteit nu ingevuld.

Het veld _initiator biedt meer context over de reden waarom de bron is aangevraagd. Dit komt overeen met de kolom Initiator in de tabel Verzoeken.

De initiatiefnemerskolom.

Figuur 9 . De initiatiefnemerskolom

U kunt ook Shift ingedrukt houden en de muisaanwijzer op een verzoek plaatsen om de initiator en afhankelijkheden ervan te bekijken.

Initiators en afhankelijkheden bekijken.

Figuur 10 . Initiators en afhankelijkheden bekijken

Het veld _priority geeft aan welk prioriteitsniveau de browser aan de bron heeft toegewezen. Dit wordt toegewezen aan de kolom Prioriteit in de tabel Verzoeken, die standaard verborgen is.

De kolom Prioriteit.

Figuur 11 . De kolom Prioriteit

Klik met de rechtermuisknop op de kop van de tabel Verzoeken en selecteer Prioriteit om de kolom Prioriteit weer te geven.

Hoe de kolom Prioriteit wordt weergegeven.

Figuur 12 . Hoe de kolom Prioriteit wordt weergegeven

Open het Commandomenu vanuit het Hoofdmenu

Gebruik het Commandomenu voor een snelle manier om toegang te krijgen tot DevTools-panelen, tabbladen en functies.

Het Commandomenu.

Figuur 13 . Het Commandomenu

U kunt nu het Commandomenu openen vanuit het Hoofdmenu. Klik op het Hoofdmenu voornaamst en selecteer Opdracht uitvoeren .

Het Commandomenu openen vanuit het Hoofdmenu.

Figuur 14 . Het Commandomenu openen vanuit het Hoofdmenu

Picture-in-Picture-breekpunten

Picture-in-Picture is een nieuwe experimentele API waarmee een pagina een zwevend videovenster over het bureaublad kan creëren.

Schakel de selectievakjes enterpictureinpicture , leavepictureinpicture en resize in het deelvenster Event Listener Breakpoints in om te pauzeren wanneer een van deze picture-in-picture-gebeurtenissen wordt geactiveerd. DevTools pauzeert op de eerste regel van de handler.

Picture-in-Picture-gebeurtenissen in het deelvenster Event Listener Breakpoints.

Figuur 16 . Picture-in-Picture-gebeurtenissen in het deelvenster Event Listener Breakpoints

(Bonustip) Voer monitorEvents() uit in de console om te zien hoe de gebeurtenissen van een element worden geactiveerd

Stel dat u een rode rand rond een knop wilt toevoegen nadat u erop hebt scherpgesteld en op R , E , D hebt gedrukt, maar u weet niet aan welke gebeurtenissen u luisteraars moet toevoegen. Gebruik monitorEvents() om alle gebeurtenissen van het element in de console te loggen.

  1. Haal een verwijzing naar het knooppunt op.

    Gebruik 'Opslaan als globale variabele' om een ​​verwijzing naar het knooppunt te krijgen.

    Figuur 17 . Gebruik Store als globale variabele om een ​​verwijzing naar het knooppunt te verkrijgen

  2. Geef het knooppunt door als het eerste argument aan monitorEvents() .

    Het knooppunt doorgeven aan monitorEvents().

    Figuur 18 . Het knooppunt doorgeven aan monitorEvents()

  3. Interactie met het knooppunt. DevTools registreert alle gebeurtenissen van het knooppunt in de console.

    De gebeurtenissen van het knooppunt in de console.

    Figuur 19 . De gebeurtenissen van het knooppunt in de console

Roep unmonitorEvents() aan om het loggen van gebeurtenissen in de console te stoppen.

unmonitorEvents(temp1);

Geef een array door als tweede argument aan monitorEvents() als u alleen bepaalde gebeurtenissen of typen gebeurtenissen wilt monitoren:

monitorEvents(temp1, ['mouse', 'focus']);

Het mouse vertelt DevTools dat alle muisgerelateerde gebeurtenissen, zoals mousedown en click , moeten worden geregistreerd. Andere ondersteunde typen zijn key , touch en control .

Bekijk Command Line Reference voor andere handige functies die u vanuit de console kunt oproepen.

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta 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 is behandeld in de What's New In DevTools- serie.

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