- Snel HTML-elementen bewerken
- Breid alle onderliggende elementen uit
- Verplaatsing van de inspecteur
- DOM-element zoeken
- paletten
- Meerdere cursors
- Codeer base64-afbeelding
- Pseudo-klasse schakelen
- Kolom selectie
- Verzoek om cURL kopiëren
- Schermtoetsenbord
- Schermafbeelding van de hele pagina
- Emulatie van touch-apparaten
- Handige functies
Zoals de naam al aangeeft, is Chrome DevTools, of webinspecteur, een hulpprogramma dat is ontworpen voor webontwikkelaars en mensen die ermee zijn verbonden. Met de webinspector kunt u het volgende doen:
- Inspecteer de juistheid van het display.
- Volg de uitvoering van scripts in JavaScript.
- Bekijk netwerkactiviteiten.
Bij het schrijven van dit artikel dat ik heb gebruikt kanarie - versie van Chrome, waar nieuwe functies worden getest, die vervolgens vallen in een stabiele versie van Chrome.
Om de inspecteur te starten, kunt u met de rechtermuisknop ergens op de pagina klikken en "Itemcode bekijken" selecteren. U kunt ook gewoon op Ctrl + Shift + C drukken.
Snel HTML-elementen bewerken
Laten we beginnen met de eenvoudigste: bewerkingselementen.
Hoe te controleren:
- Selecteer het tabblad Elementen.
- Selecteer een HTML-element binnen het paneel.
- Dubbelklik op het label en wijzig bijvoorbeeld de tagnaam.
Wanneer het bewerken is voltooid, wordt de afsluitende tag automatisch bijgewerkt.
Breid alle onderliggende elementen uit
Hoe te controleren:
- Ga naar het paneel Elements.
- Selecteer een element en klik met Alt op de pijl links van het element.
Verplaatsing van de inspecteur
Het inspectievenster kan zowel naar de onderkant van het browservenster als naar de rechterkant worden gedrukt. De locatie van het paneel aan de rechterkant is bijvoorbeeld handig bij het werken op breedbeeldmonitoren. Het inspectiepaneel kan ook in een apart venster worden geplaatst en bijvoorbeeld worden overgebracht naar een andere monitor.
Hoe te controleren:
- Ctrl + Shift + D - Locatie wijzigen
DOM-element zoeken
Waarschijnlijk niet veel voor wie dit een ontdekking zal zijn, maar op het tabblad "Elementen" kunt u zoeken op DOM.
Hoe te controleren:
- Druk op Ctrl + F en voer de voorgestelde zoekopdracht in.
paletten
Selecteer kleur uit palet De kleurkeuze in recente versies van Chrome heeft enkele wijzigingen ondergaan: twee paletten toegevoegd om de kleur te vergemakkelijken.
Meerdere cursors
Verplaats de cursor en terwijl u Ctrl ingedrukt houdt, klikt u in het gewenste gebied om een cursor toe te voegen. U kunt de actie ongedaan maken met behulp van Ctrl + U. Persoonlijk ben ik nooit nuttig geweest.
Codeer base64-afbeelding
Hoe te controleren:
- Schakel over naar het netwerkpaneel.
- Selecteer afbeelding
- Klik met de rechtermuisknop op de afbeelding en selecteer ""
Pseudo-klasse schakelen
Pseudo-klassen weerspiegelen de staat van de elementen en hun relatieve posities.
Hoe te controleren:
- Klik met de rechtermuisknop op een element in het paneel Elementen en selecteer een pseudo-klasse in de lijst Force-elementstatus.
- U kunt ook een pseudo-klasse selecteren aan de rechterkant van het paneel Elementen.
Kolom selectie
Hoe te controleren:
- Ga naar het paneel "Bronnen".
- Selecteer een bestand.
- Selecteer de tekst door Alt ingedrukt te houden.
Het selecteren van een kolom werkt ook wanneer HTML wordt bewerkt in het paneel Elementen.
Verzoek om cURL kopiëren
Elk verzoek op het tabblad Netwerk kan worden gekopieerd en vervolgens in de terminal worden geplakt voor uitvoering met curl.
Schermtoetsenbord
Als het Nexus 5X-profiel is geselecteerd, kunt u zien hoe de site eruit ziet wanneer het toetsenbord op het scherm actief is.
Chrome DevTools: schermtoetsenbord
Schermafbeelding van de hele pagina
Maak een foto van de hele pagina is heel eenvoudig. Gewoon nodig ...
- Open de inspecteur.
- Ga naar console.
- Druk op Ctrl + Shift + P
- Type "screenshot"
- Selecteer "Capture full size screenshot"
Schermafbeelding van de hele pagina Emulatie van touch-apparaten
U kunt ook enkele sensoren simuleren:
- Touchscreen
- Coördinaten voor geolocatie
- accelerometer
Hoe te proberen:
- Selecteer het paneel Elementen.
- Druk op "Esc" en selecteer "Emulatie> Sensoren".
Handige functies
sleutels en waarden
Met de toetsen en waarden kunt u de sleutels of waarden van het object respectievelijk naar de console sturen. 
Sleutels en objectwaarden afzonderlijk weergeven