Hoe het Inspect Element-gereedschap in Mozilla Firefox te gebruiken

Met de ontwikkelaarstool `Inspecteren` kunt u de HTML-code van alle elementen die u op een webpagina ziet nauwkeurig identificeren. De HTML- en CSS-stylesheets die hiermee gepaard gaan, kunnen volledig worden bewerkt zodra u deze hulpmiddelen hebt geopend. Experimenteer door de gewenste wijzigingen aan te brengen en werk vervolgens de pagina bij om de webpagina met de gewenste uitstraling weer te geven.

stappen

Deel 1

2

Klik met de rechtermuisknop op een element van de webpagina. U kunt met de rechtermuisknop op afbeeldingen, tekst, achtergronden of elk ander element klikken. Als u geen muis hebt met twee knoppen, klikt u met de linkermuisknop terwijl u de toets ingedrukt houdt ^ Controle.

3

Klik in het vervolgkeuzemenu op "Artikel inspecteren". Een werkbalk zou in het onderste deel van het venster moeten verschijnen. Er verschijnt ook een paneel onder de werkbalk waar de HTML-code van de pagina wordt weergegeven.

4

Identificeer de werkbalken en panelen. Wanneer u op "Inspect item" klikt, worden er verschillende panelen geopend in het onderste gedeelte van het venster. Hier volgt een beschrijving van de namen en het gebruik van elk afzonderlijk:

5

Selecteer een ander item. Als de werkbalk eenmaal is geopend, is het eenvoudig om een ​​ander item te selecteren. Hier zijn drie manieren om het te doen:

6

Blader door de code. Klik ergens in het HTML-paneel. Gebruik de linker- en rechterpijl op uw toetsenbord om door de code te bladeren (u moet Firefox-versie 39 of later hebben). Dit is erg handig voor items die te klein zijn om handmatig te selecteren.

7

Zoeken naar een artikel Ga naar de zoekbalk (die met het pictogram van een vergrootglas), die helemaal rechts van de rij staat Paneermeel. Klik op de balk om deze uit te vouwen en typ vervolgens de HTML-code die u wilt doorzoeken. Terwijl u typt, verschijnt een lijst met items die overeenkomen met de gezochte tekst. Klik op een van de items om het item te selecteren dat u zoekt en schuif het HTML-paneel naar de plaats waar die code staat.

Deel 2

2

Dubbelklik op de HTML-code om de tekst te bewerken. Dubbelklik op een regel HTML. Schrijf nieuwe tekst en druk op ⌅ Voer in om de wijzigingen op te slaan.

3

Klik op een rij met "broodkruimels" voor meer opties. Onthoud: de werkbalk van broodkruimels zijn ingeklemd tussen de volledige HTML-structuur en de bovenste werkbalk. Klik op een van de elementen in deze rij en houd deze ingedrukt om een ​​uitgebreid menu te openen. Hier is een gids (onvolledig) van de beschikbare opties:

4

Slepen en neerzetten Als u elementen in de code opnieuw wilt ordenen, houdt u de HTML-muis ingedrukt totdat een stippellijn verschijnt. Verplaats hem naar beneden of naar boven in de boom en laat hem los als de stippellijn op de gewenste plaats is.

5

Sluit de werkbalk van de ontwikkelaar. Om al deze mooie vensters te sluiten, drukt u eenvoudigweg op X in de rechterbovenhoek van de werkbalk, boven het CSS codepaneel.