"Inspect Element" is een ontwikkelaarstool in de Firefox-browser die u kunt gebruiken om HTML-code op elke webpagina te volgen. De HTML- en CSS-stylesheets van een webpagina kunnen worden bewerkt met "Inspect Element". U kunt proberen een pagina te bewerken zoals u dat wilt en deze terug te brengen naar hoe het was door simpelweg de bewerkte webpagina opnieuw te laden.
Stap
Deel 1 van 2: Elementen controleren
Stap 1. Update Firefox (optioneel)
Het is mogelijk dat u geen toegang hebt tot de functies die in dit artikel worden besproken als u een oudere versie van Firefox gebruikt. De update wordt automatisch geïnstalleerd wanneer u controleert welke versie van Firefox u gebruikt.
Firefox 9 en eerdere versies hebben helemaal geen tool "Inspect Element"
Stap 2. Klik met de rechtermuisknop op een webpagina-element
U kunt met de rechtermuisknop op een afbeelding, tekst, achtergrond of element klikken. Als uw muis maar één knop heeft, resulteert een combinatie van linksklikken en de Control-toets in een rechtsklik.
Stap 3. Klik op "Element inspecteren" in het vervolgkeuzemenu
Onder in het venster verschijnt een werkbalk. Een paneel onder de werkbalk zal ook verschijnen en de HTML-code op de actieve pagina weergeven.
Stap 4. Maak kennis met de bestaande werkbalken en panelen
Wanneer u "Inspect Element" gebruikt, openen er verschillende panelen onder het browservenster. Het volgende beschrijft de namen en functies van de werkbalken en panelen in "Inspect Element":
- Op de bovenste rij staat de Toolbox Toolbar. Er zijn hier verschillende tools te vinden, maar we concentreren ons op de Inspector-knop aan de linkerkant. Zorg ervoor dat deze knop actief is (aangegeven door de kleur van de knop die blauw wordt wanneer deze actief is) in deze handleiding.
- Daaronder bevinden zich een rij broodkruimels van HTML-elementen die de locatie van het momenteel geselecteerde element aangeven.
- Het paneel onder de navigatie-aanwijzingen toont de HTML-structuur of "Markup View" van de webpagina. De HTML van het geselecteerde element wordt gemarkeerd en gecentreerd in dit paneel.
- In het rechterdeelvenster wordt de CSS-stylesheet van de huidige webpagina weergegeven.
Stap 5. Selecteer een ander element
Als de werkbalk is geopend, kunt u eenvoudig andere elementen selecteren. Er zijn drie manieren om dit te doen:
- Plaats de muisaanwijzer op een regel HTML om het geselecteerde element te markeren (voor deze functie is Firefox 34+ vereist). Klik op de HTML om dat element te selecteren.
- Klik op het gereedschap "Selecteer element" in de linkerhoek van de werkbalk: het heeft een cursorvormig pictogram boven een vak. Verplaats de cursor op de webpagina om een element te markeren en klik om het te selecteren.
Stap 6. Traceer de HTML-code
Klik ergens in het HTML-venster. Gebruik de linker en rechter richtingstoetsen op het toetsenbord om van code naar code te gaan (voor deze functie is Firefox 39+ vereist). Deze methode is handig voor het selecteren van elementen die te klein zijn om met de cursor te worden geselecteerd.
- Grijze HTML geeft elementen aan die niet op de pagina worden weergegeven. De elementen die hierin zijn opgenomen zijn opmerkingen, zoals knooppunten, en andere elementen die verborgen zijn door de CSS-eigenschap display.
- Klik op de pijl links van het vak om de inhoud weer te geven of te verbergen. Om de volledige inhoud weer te geven, houdt u alt=""Image" of option ingedrukt terwijl u op de pijl klikt.</li" />
Stap 7. Zoek het element
Zoek naar het zoekveld (lusvormig pictogram) in de rechterhoek van de rij met broodkruimels. Klik om het zoekveld uit te vouwen en typ de HTML-code waarnaar u wilt zoeken. Terwijl u typt, wordt een pop-up weergegeven met overeenkomende zoekresultaten. Klik op een element in de zoekresultaten en blader in het HTML-venster naar de code die u zoekt.
Deel 2 van 2: HTML bewerken
Stap 1. Laad de pagina opnieuw om opnieuw te beginnen
Als u nieuw bent met hulpprogramma's voor websiteontwikkeling, moet u er rekening mee houden dat u geen permanente wijzigingen aanbrengt in de pagina's die u bewerkt. Uw bewerkingen verschijnen alleen op uw scherm totdat u de pagina opnieuw laadt of sluit. Voel je vrij om te experimenteren, zelfs als je niet weet wat er zal gebeuren.
Stap 2. Dubbelklik op de HTML die u wilt bewerken
Dubbelklik op inline HTML. Typ de nieuwe tekst en druk op enter om de wijzigingen op te slaan.
Stap 3. Klik en houd het gereedschap in de broodkruimel om meer opties weer te geven
Merk op dat de breadcrumb-werkbalk zich tussen de HTML-structuur en de werkbalk erboven bevindt. Houd een tool in deze rij ingedrukt om meer menu's te openen. Hieronder volgt een hint van de beschikbare opties (niet uitputtend):
- Met "Bewerken als HTML" kunt u alle HTML-inhoud rechtstreeks vanuit de HTML-structuur bewerken in plaats van elke regel te bewerken.
- "Copy Inner HTML" kopieert de volledige inhoud binnen het knooppunt, terwijl "Copy Outer HTML" de inhoud en knooppunten kopieert (zoals of
- "Plakken →" geeft verschillende opties weer voor waar de kopie moet worden geplakt, zoals vóór het knooppunt of na het eerste onderliggende knooppunt.
- :hover,:active en:focus veranderen het uiterlijk van het element wanneer de gebruiker interactie heeft. Gewijzigde effecten worden gedefinieerd vanuit de CSS-stylesheet (bewerkbaar vanuit het paneel aan de rechterkant).
Stap 4. Slepen en neerzetten
Om elementen in de code te herschikken, houdt u de HTML ingedrukt totdat een stippellijn verschijnt. Verplaats de lijn op en neer in de boom en laat de muisknop los wanneer de lijn is waar u hem wilt hebben.
Voor deze functie is Firefox 39 en hoger vereist
Stap 5. Sluit de werkbalk voor ontwikkelaars
Om het volledige Inspect Element-venster te sluiten, klikt u op de X-knop in de rechterbovenhoek van de werkbalk boven het CSS-paneel.
Tips
- U kunt de werkbalk ook openen via de menu-opties bovenaan het venster:
- Windows: Firefox → Webontwikkelaar → Toggle Tools
- Mac of Linux: Tools → Webontwikkelaar → Toggle Tools
- Firefox 40 heeft de mogelijkheid om het CSS-paneel te verbergen, zodat u meer ruimte heeft om HTML te bewerken. Zoek naar het pijlpictogram in de rechterhoek van de rij met broodkruimels en rechts van het zoekveld. Klik op dit pictogram om het CSS-paneel te verbergen en klik nogmaals om het weer te geven.
- U kunt ook CSS-panelen bewerken, maar deze worden niet in dit artikel vermeld. Instructies voor het bewerken van CSS-code vindt u op internet.
