Hoe u de functie "Explore Element" in Mozilla Firefox gebruiken

Functie "Explore Element" in Firefox kunt u de HTML-webpagina-code bekijken. Door deze functie te activeren, kunt u HTML en CSS wijzigen. Experimenteren, wijzigingen aanbrengen en vervolgens de pagina gewoon bijwerken om terug te keren naar het oorspronkelijke formulier.

Stappen

Deel 1 van 2:

Studie-elementen

een. Update Firefox (als u wilt). U kunt niet alle functies in dit artikel activeren als u werkt met de oude versie van Firefox. Bepaal uw versie van deze browser om deze uit te voeren.

In Firefox 9 en eerdere versies van de functie "Explore Element" helemaal.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 2

2. Klik met de rechtermuisknop op elk webpagina-item, bijvoorbeeld door afbeelding, tekst, achtergrond of ander element. Als u geen muis met twee knoopt hebt, drukt u op de bediening en klikt u op het linker muisknop-item.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 3

3. Selecteer in het menu dat opent "Verkensel element". Aan de onderkant van het venster verschijnt de werkbalk en eronder - onderaan met de HTML-paginacode.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 4

4. Observeer de werkbalken en onderkant. Het kiezen van "Ontdek het element", wordt verschillende botthone geopend in de onderkant van het venster. Hier zijn hun beschrijving:

Top string is de werkbalk. Het bevat verschillende tabbladen, maar we zijn geïnteresseerd in het allereerste (linker) tabblad "Inspecteur" (geschilderd in blauw). Ga niet over naar andere tabbladen.

Onder de werkbalk is er een touw met debug-operators.

Hieronder staat de onderkant met HTML-paginacode. HTML-code van uw gekozen element wordt gemarkeerd (in een blauwe marker) en bevindt zich in het midden van deze subcast.

In het midden van de juiste plaats vind je CSS van deze pagina.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 5

vijf. Selecteer een ander item. Na het openen van de functies "Explore Item", kunt u eenvoudig een item een van de drie manieren selecteren:

Verplaats de muis in de HTML-codelijn om het overeenkomstige element (in Firefox 34+) te markeren. Klik op HTML-code om dit item te selecteren.

Klik op het pictogram "Selecteer element van pagina". Dit pictogram bevindt zich op de werkbalk aan de linkerkant en heeft een vierkant met een cursor. Muis naar het gewenste item (onderaan met HTML-code) en klik vervolgens op het item om het te selecteren.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 6

6. HTML-navigatiecode. Klik op een gebied onderaan met HTML-code. Gebruik de pijltjestoetsen (op het toetsenbord) om de code te navigeren (in Firefox 39+). Dit is handig als het element vrij klein is.

HTML-code die wordt gepresenteerd met grijs lettertype verwijst naar items die niet op de pagina worden weergegeven. Bijvoorbeeld opmerkingen, knooppunten (zoals ) en elementen verborgen met CSS.

Klik op de pijl links van de container om de inhoud ervan in te zetten of te verbergen. Klik op Alt of optie om alle containers uit te breiden.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 7

7. Zoek element. Op een rij met debug-operators vindt u het pictogram in de vorm van een vergrootglas (rechts). Klik op dit pictogram om de zoekreeks te openen en voer de HTML-code in die u zoekt. Terwijl het pop-upvenster met de bijbehorende elementen wordt geopend. Klik op het gewenste item en bladert door de HTML-code om de code van dit item te vinden.

Deel 2 van 2:

HTML-code bewerken

een. Werk de pagina bij om alle ingevoerde wijzigingen te annuleren. Vergeet niet dat de gemaakte wijzigingen alleen op het scherm worden weergegeven, dat wil zeggen, ze zijn niet constant. Sluiten of bijwerken van de pagina, het keert terug naar het oorspronkelijke formulier. Dus wees niet bang om te experimenteren, zelfs als je het niet helemaal voorstelt wat het zal leiden.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 9

2. Dubbelklik op de HTML-code om het te bewerken. Voer de nieuwe code in en druk op ENTER om de wijzigingen op te slaan.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 10

3. Houd een string ingedrukt met debug-operators om toegang te krijgen tot extra opties. Deze tekenreeks bevindt zich tussen de werkbalk en de grond met HTML-code. Hier is een onvolledige lijst met extra opties:

"Bewerken als HTML". Hiermee kunt u een geheel knooppunt en al zijn inhoud bewerken, niet individuele lijnen.

"COPY INTERNE HTML". Kopieert alle inhoud van het knooppunt en de optie "externe HTML" -opkopen en knooppunt (bijvoorbeeld,

of ).

"Insert". Opties-inserts worden geopend, bijvoorbeeld voor het knooppunt of na het knooppunt.

": Hover", ": actief", ": focus". Verander het uiterlijk van het element. Het exacte effect wordt bepaald door CSS (bewerkt aan de rechterkant).

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 11

4. Slepen. Om de items opnieuw in te delen, houdt u HTML-code ingedrukt totdat de stippellijn verschijnt. Verplaats het omhoog of omlaag en laat los wanneer de lijn de gewenste positie bereikt.

Het werkt alleen in Firefox 39+.

Titel afbeelding Gebruik het Inspectie-element in Mozilla Firefox Stap 12

vijf. Sluit de onderkant van de functies "Explore-items". Om dit te doen, klikt u eenvoudig op het pictogram "X" (in de rechterhoek van de werkbalk).

Tips

U kunt de werkbalk ook als volgt openen:

ramen. Klik op "Firefox" - "Developer" - "Toolbar".
Mac OS of Linux. Klik op "Tools" - "Developer" - "Toolbar".

In Firefox 40 kunt u de onderkant verbergen met CSS-code om de bodem uit te breiden met HTML-code. Om dit te doen, vindt u op de lijn met debug-operators het pictogram in de vorm van een pijl gericht aan de rechterkant (naast het vergrootglas). Klik op dit pictogram om de onderkant te verbergen met CSS-code - klik nogmaals op het pictogram om het te implementeren.

U kunt ook CSS-code bewerken, maar het gaat verder dan dit artikel. Dus lees Dit artikel.

Deel in het sociale netwerk:

Hoe de functie te gebruiken `ontdek item` mozilla firefox

Stappen

Tips