Met de Inspect Element-ontwikkelaarstool in Firefox kunt u de HTML-code lokaliseren voor alles wat u op uw webpagina ziet. De HTML en de bijbehorende CSS-stylesheet kunnen volledig worden bewerkt zodra deze tools zijn geopend. Experimenteer met alle gewenste wijzigingen en vernieuw vervolgens de pagina om terug te keren naar het beoogde uiterlijk van de webpagina.
Stappen
Deel 1 van 2: Elementen inspecteren
Stap 1. Klik met de rechtermuisknop op een webpagina-element
U kunt met de rechtermuisknop op afbeeldingen, tekst, achtergronden of elk ander element klikken. Als u geen muis met twee knoppen hebt, klikt u met de linkermuisknop terwijl u Control ingedrukt houdt.
Stap 2. Klik in het vervolgkeuzemenu op Element inspecteren
Er zou een werkbalk onder aan uw venster moeten verschijnen. Er verschijnt ook een venster onder de werkbalk met de HTML-code van de pagina.
Stap 3. Identificeer de werkbalken en deelvensters
Wanneer u op Element inspecteren klikt, worden verschillende deelvensters onder in uw venster geopend. Hier is een overzicht van hun gebruik en namen:
- De bovenste rij is de Toolbox Toolbar. Dit heeft verschillende ontwikkelaarstools, maar we zijn geïnteresseerd in Inspector aan de linkerkant. Houd dit geselecteerd (blauw gemarkeerd) voor deze hele gids.
- Onder de werkbalk is er een enkele Breadcrumbs-rij met HTML-elementen, die het volledige pad toont met betrekking tot het geselecteerde element.
- Het deelvenster onder deze rij toont de HTML-structuur of "Markup View" van de pagina. De HTML voor het geselecteerde element wordt gemarkeerd en gecentreerd in dit paneel.
- In het rechterdeelvenster wordt de CSS-stylesheet voor deze pagina weergegeven.
Stap 4. Selecteer een ander element
Als de werkbalk eenmaal is geopend, is het eenvoudig om een ander element te selecteren. Hier zijn drie manieren om het te doen:
- Beweeg over een regel HTML om het corresponderende element te markeren (vereist Firefox 34+). Klik op de HTML om dat element te selecteren.
- Klik op het gereedschap Element selecteren uiterst links op de werkbalk: het pictogram is een cursor op een vierkant. Beweeg uw cursor over de pagina om elementen te markeren en klik vervolgens om een element te selecteren.
Stap 5. Navigeer door de code
Klik ergens in het HTML-venster. Gebruik de linker- en rechterpijlen op uw toetsenbord om door de code te bladeren (vereist Firefox 39+). Dit is handig voor elementen die te klein zijn om met de hand te selecteren.
- Grijze HTML heeft betrekking op elementen die niet op de pagina worden weergegeven. Dit omvat opmerkingen, bepaalde knooppunten zoals, en elementen die zijn verborgen met de CSS-eigenschap display.
- Klik op de pijl links van containers om de inhoud uit te vouwen of te verbergen. Om alle inhoud uit te vouwen, houdt u alt=""Image" of optie ingedrukt terwijl u klikt.</li" />
Stap 6. Zoek een element
Zoek naar de zoekbalk (vergrootglaspictogram) helemaal rechts van de rij Broodkruimels. Klik hierop om het uit te vouwen en typ vervolgens de HTML-code die u zoekt. Terwijl u typt, verschijnt er een pop-up met overeenkomende elementen. Klik op een om dat element te selecteren en blader door het HTML-venster naar de code.
Deel 2 van 2: De HTML bewerken
Stap 1. Vernieuw de pagina om op elk moment opnieuw te beginnen
Als u nog niet bekend bent met hulpprogramma's voor webontwikkelaars, moet u begrijpen dat deze geen permanente wijzigingen aanbrengen. Uw bewerkingen zijn alleen zichtbaar op uw scherm en alleen totdat u de pagina sluit of vernieuwt. Aarzel niet om te experimenteren, zelfs als u niet zeker weet wat er zal gebeuren.
Stap 2. Dubbelklik op de HTML om tekst te bewerken
Dubbelklik op een regel HTML. Typ de nieuwe tekst in en druk op enter om uw wijzigingen op te slaan.
Stap 3. Houd een breadcrumb ingedrukt voor meer opties
Onthoud dat de Breadcrumb-werkbalk is ingeklemd tussen de volledige HTML-structuur en de bovenste werkbalk. Klik en houd een van de elementen in deze rij ingedrukt om een uitgebreid menu te openen. Hier is een onvolledige gids voor deze opties:
- "Bewerken als HTML" maakt het knooppunt en al zijn inhoud bewerkbaar in de HTML-boom, in plaats van elke regel afzonderlijk te moeten bewerken.
- "Copy Inner HTML" kopieert alle inhoud van het knooppunt, terwijl "Copy Outer HTML" het knooppunt ook kopieert (zoals of
- "Plakken →" leidt tot verschillende opties om te plakken, zoals vóór dit knooppunt of na het eerste onderliggende knooppunt.
- :hover,:active en:focus veranderen het uiterlijk van het element wanneer de gebruiker ermee communiceert. Het exacte effect wordt bepaald door de CSS-stylesheet (bewerkbaar vanuit het rechterdeelvenster).
Stap 4. Slepen en neerzetten
Als u elementen in de code opnieuw wilt rangschikken, houdt u de HTML ingedrukt totdat er een stippellijn verschijnt. Beweeg het omhoog of omlaag in de boom en laat los wanneer de stippellijn zich op de gewenste plaats bevindt.
Hiervoor is Firefox 39 of hoger vereist
Stap 5. Sluit de werkbalk voor ontwikkelaars
Om al deze mooie vensters te sluiten, drukt u gewoon op de X in de rechterhoek van de werkbalk, boven het CSS-paneel.
Tips
- U kunt de werkbalk ook openen met deze hoofdmenu-opties:
- Windows: Firefox → Webontwikkelaar → Toggle Tools
- Mac of Linux: Tools → Webontwikkelaar → Toggle Tools
- Firefox 40 introduceerde de optie om het CSS-paneel te verbergen om u meer ruimte te geven tijdens het bewerken van HTML. Zoek naar het pijlpictogram helemaal rechts van de rij Broodkruimels, rechts van de zoekbalk. Klik op dit pictogram om het CSS-venster te verbergen en klik er nogmaals op om het weer uit te vouwen.
- Het CSS-paneel kan ook worden bewerkt, maar dat valt buiten het bestek van deze handleiding. Dit artikel leert de basisprincipes van CSS.
