Element Inspector-trucs: 8 onmisbare hacks! 🛠️
De Elementeninspector in je browser lijkt misschien een hulpmiddel alleen voor ontwikkelaars, maar je kunt er echt heel leuke dingen mee doen, zelfs als je geen verstand hebt van programmeren! 🚀
1 . Afbeeldingen downloaden
Misschien moet je een afbeelding van een website downloaden. Je probeert met de rechtermuisknop te klikken en op 'Afbeelding opslaan' te klikken, maar dan is die optie grijs of verschijnt de knop 'Afbeelding opslaan' niet. Soms kun je alleen een miniatuur van de afbeelding downloaden, niet het hele bestand. 🤔 Wat is er aan de hand?
Ontwikkelaars schakelen de knop 'Afbeelding opslaan' vaak opzettelijk uit, of gebruiken een webframework dat het downloaden van afbeeldingen op die manier niet toestaat. Maar er is een handige oplossing in de Element Inspector. Je kunt elke afbeelding van een website in volledige grootte ophalen in drie eenvoudige stappen. 📸
Stap 1
Doet klik met de rechtermuisknop op ergens op de pagina en selecteer 'Element inspecteren' of 'Inspecteren'. U kunt ook de specifieke sneltoets voor de inspector in uw browser gebruiken: F12 werkt in de meeste browsers en besturingssystemen. Ik gebruik Firefox voor deze demonstratie, maar de stappen zijn identiek. 🖱️
Stap 2
Klik in het Element Inspector-venster op het tabblad 'Netwerk'. Het tabblad 'Netwerk' zou 'Afbeeldingen' als een van de submenu's moeten hebben. Klik op 'Afbeeldingen'. 🖼️
Laad de pagina nu opnieuw zodat alle afbeeldingsbronnen in het tabblad 'Afbeeldingen' verschijnen. Gebruik de Vernieuwen-knop naast de adresbalk vanuit uw browser of druk op Ctrl+R. 🔄
Stap 3
En voilà. De volledige afbeeldingenbibliotheek zou in de lijst moeten worden geladen. De lijst wordt dynamisch bijgewerkt, dus naarmate er meer afbeeldingen naar de website worden geüpload, verschijnen ze hier ook. 🖼️✨
Je kunt met de muis over een bestand bewegen om een voorbeeld en de afmetingen te bekijken. Dubbelklik om het bestand in een nieuw tabblad te openen, waar je het kunt opslaan via het rechtermuisknopmenu. 💾
2 . Video's downloaden
Net als bij afbeeldingen staan websites soms het plaatsen van afbeeldingen niet toe. afvoer video's direct. Maar je kunt ze downloaden door ze te laden in de Elementeninspector. Zodra ze in de Inspector zijn geladen, dubbelklik je op de bestandsnaam om het in een nieuw tabblad te openen. 🎥
Stap 1
Open het venster Element Inspector door op de sneltoets F12 te drukken (dit zou op de meeste systemen moeten werken). U kunt ook met de rechtermuisknop ergens op de webpagina klikken en 'Inspecteren' selecteren. Het venster Element Inspector zou moeten verschijnen. 🖱️
Stap 2
Klik op het tabblad 'Netwerk' en vervolgens op 'Media' om alles behalve videobestanden te filteren. Vernieuw de pagina. Dit kan door op de verversknop van de browser te klikken of door op Ctrl+R te drukken. 🔄
Stap 3
De videobestanden zouden in een lijst moeten laden. Je kunt ze niet direct bekijken, maar je kunt wel dubbelklikken op een bestand om het in een nieuw tabblad te openen. Daar kun je met de rechtermuisknop klikken en het downloaden. 🎬
3 . Maak screenshots van de volledige pagina
Als je een hele webpagina wilt opslaan, kun je deze snel downloaden als PDF- of HTML-bestand. Maar wat als je een gewone momentopname van de hele pagina wilt maken? Zo doe je dat. Ik zal uitleggen hoe je het moet doen. 📸
Firefox heeft een speciale screenshot-tool in het contextmenu, dus ik ga je laten zien hoe je dat kunt doen in Google Chrome en andere browsers. 🌐
Open de inspectortool door met de rechtermuisknop ergens op de pagina te klikken of op F12 te drukken.
Druk op Ctrl+Shift+P om het venster Uitvoeren te openen. Typ Vangst vangst van volledig scherm in dit venster. Klik erop. 📄
Er zou onmiddellijk een 'Opslaan als'-venster moeten verschijnen, waarmee u de schermafbeelding van de volledige pagina als JPG kunt opslaan. 💾
4 . Doe alsof je aan het bellen bent
De meeste websites laden anders, afhankelijk van het type apparaat en de schermgrootte. Wil je de site laten denken dat je een ander apparaat gebruikt (om welke reden dan ook), dan kun je dat eenvoudig doen met de Inspector-tool. 📱
Open in Chrome het venster Elementeninspector via het rechtermuisknopmenu of met F12. Klik vervolgens op het kleine laptop- en telefoonpictogram in de linkerbovenhoek. Firefox heeft een vergelijkbare knop, genaamd Responsieve ontwerpmodus (Ctrl+Shift+M). 🖥️
U krijgt een lijst met apparaten die u kunt emuleren, en u kunt ook handmatig de grootte van de schermZodra je een mobiel apparaat hebt geselecteerd, zul je merken dat je browser ook aanraakgebaren simuleert. 📱✨
5 . Bronnen identificeren
Deze tip is bedoeld voor creatievelingen, maar iedereen die geïnteresseerd is in lettertypen op een website kan deze truc gebruiken. Je kunt de inspecteurstool om te identificeren en soms zelfs lettertypen downloaden. 🖋️
Open eerst de Element Inspector-tool. Klik vervolgens op het tabblad 'Netwerk' (mogelijk verborgen in het overloopmenu) en selecteer 'Bron'.
Druk vervolgens op Ctrl+R. De gerenderde lettertypen worden in de lijst geladen, waarschijnlijk in WOFF-formaat. Je kunt ze direct downloaden door te dubbelklikken op de lettertypenaam. How-To Geek gebruikt bijvoorbeeld Roboto als standaardlettertype. 🔤
Als je meer gedetailleerde informatie over het lettertype nodig hebt, ga dan naar het tabblad 'Elementen' en selecteer 'Stijlen'. Scrol omlaag naar de eigenschap van de lettertypefamilie en klik erop. De bijbehorende tekst wordt gemarkeerd op de webpagina. Zo kun je een lettertype precies identificeren. 🎨
6 . Tekst op een pagina bewerken (tijdelijk)
Wist je dat je bijna alles op een webpagina tijdelijk kunt bewerken met de inspector? Met deze tool kun je de code van de website bewerken. Dus als je een beetje verstand hebt van code, kun je de pagina er precies zo uit laten zien als je wilt (alleen op je computer, totdat je de pagina opnieuw laadt). 🛠️
Zelfs als je niets van coderen weet, kun je op elke webpagina eenvoudige tekst bewerken. Het kan een leuke grap zijn om met je vrienden uit te halen. 😉
Markeer de tekst op de pagina die u wilt bewerken en klik er met de rechtermuisknop op. Selecteer vervolgens 'Inspecteren' of 'Element inspecteren'.
Het relevante tekstfragment zou moeten verschijnen op het tabblad Elementen. Dubbelklik erop en vervang het door wat je maar wilt. ✏️
Sluit de Element Inspector en je bent klaar! Onthoud dat als je de pagina opnieuw laadt, je wijzigingen ongedaan worden gemaakt. 🔄
7 . Items verwijderen
Net als bij het bewerken van tekst kun je ook specifieke elementen van een webpagina verwijderen. Ook hier blijven de wijzigingen alleen behouden totdat je de pagina opnieuw laadt. ❌
Klik met de rechtermuisknop op het element dat u wilt verwijderen en selecteer vervolgens 'Inspecteren' of 'Element inspecteren'.
Beweeg de muis over de labels
"totdat het hele element gemarkeerd is. Druk dan gewoon op de Delete-toets. 🔚
Zomaar, weg is het! 🕵️♂️
8 . Kleurwaarden identificeren
Nog een tip voor creatievelingen: je kunt de RGB- en HEX-waarden van elk kleur op een webpagina met het pipetgereedschap in de Elementeninspector. 🎨
Klik met de rechtermuisknop ergens op de pagina en open de Inspector. Standaard wordt het venster Regels geopend in het tabblad Inspector. Scrol omlaag om een eigenschap met het label 'kleur' te vinden.
Naast de kleureigenschap hoort een gekleurde cirkel of vierkant te staan. Klik erop om de kleurenkiezer te openen en druk op het pipetpictogram ernaast. 🖌️
Je kunt met dit pipetje overal op de pagina bewegen om de kleurwaarden te vinden. Als je op het pipetje klikt, wordt de eigenschap automatisch ingevuld met de zojuist geselecteerde kleurwaarde. Je kunt deze hier eenvoudig kopiëren.
Deze tips krassen nauwelijks aan de oppervlakte van wat er daadwerkelijk mogelijk is met de Elements Inspector. Wil je je verder verdiepen in webontwikkeling? Hier is een handleiding om je op weg te helpen. 💻
