Utvecklarverktyget Inspect Element i Firefox låter dig hitta HTML -koden för allt du ser på din webbsida. HTML och medföljande CSS -formatmall kan redigeras fullständigt när dessa verktyg är öppna. Experimentera med de ändringar du gillar och uppdatera sedan sidan för att återgå till webbsidans avsedda utseende.
Steg
Del 1 av 2: Inspektera element
Steg 1. Högerklicka på valfri webbsida
Du kan högerklicka på bilder, text, bakgrunder eller något annat element. Om du inte har en mus med två knappar, vänsterklicka medan du håller ned Control.
Steg 2. Klicka på Inspektera element i rullgardinsmenyn
Ett verktygsfält bör visas längst ned i fönstret. En ruta visas också under verktygsfältet som visar sidans HTML -kod.
Steg 3. Identifiera verktygsfält och rutor
När du klickar på Inspektera element öppnas flera rutor längst ned i fönstret. Här är en sammanställning av deras användningsområden och namn:
- Den översta raden är Toolbox Toolbar. Detta har flera utvecklarverktyg, men vi är intresserade av Inspector till vänster. Behåll denna markerad (markerad med blått) för hela den här guiden.
- Under verktygsfältet finns en enda Breadcrumbs -rad med HTML -element som visar hela sökvägen för det valda elementet.
- Fönstret under den här raden visar HTML -trädet eller "Markup View" på sidan. HTML -koden för det element du valt markeras och centreras i den här rutan.
- Fönstret till höger visar CSS -formatmallen för den här sidan.
Steg 4. Välj ett annat element
När verktygsfältet är öppet är det enkelt att välja ett annat element. Här är tre sätt att göra det:
- Håll muspekaren över en rad HTML för att markera motsvarande element (kräver Firefox 34+). Klicka på HTML -koden för att välja det elementet.
- Klicka på verktyget Välj element längst till vänster i verktygsfältet: ikonen är en markör över en ruta. Flytta markören över sidan för att markera element och klicka sedan för att välja ett element.
Steg 5. Navigera genom koden
Klicka var som helst i HTML -rutan. Använd vänster och höger pilar på tangentbordet för att gå igenom koden (kräver Firefox 39+). Detta är användbart för element som är för små för att välja för hand.
- Grå HTML avser element som inte visas på sidan. Detta inkluderar kommentarer, vissa noder som, och element som har dolts med CSS -visningsegenskapen.
- Klicka på pilen till vänster om behållarna för att expandera eller dölja dess innehåll. För att expandera allt innehåll, håll alt="Bild" eller alternativ medan du klickar.
Steg 6. Sök efter ett element
Leta efter sökfältet (förstoringsglasikonen) längst till höger på raden Brödsmulor. Klicka på det här för att expandera det och skriv sedan in HTML -koden du letar efter. När du skriver visas en popup med matchande element. Klicka på en för att välja det elementet och rulla HTML -rutan till dess kod.
Del 2 av 2: Redigera HTML
Steg 1. Uppdatera sidan för att börja om när som helst
Om du är ny på webbutvecklarverktyg, förstå att de inte gör några permanenta ändringar. Dina redigeringar kommer bara att synas på skärmen och bara tills du stänger sidan eller uppdaterar den. Tveka inte att experimentera även om du inte är säker på vad som kommer att hända.
Steg 2. Dubbelklicka på HTML -koden för att redigera text
Dubbelklicka på en rad med HTML. Skriv in den nya texten och tryck på enter för att spara dina ändringar.
Steg 3. Klicka och håll kvar en ströbröd för fler alternativ
Kom ihåg att Breadcrumb -verktygsfältet ligger mellan hela HTML -trädet och det övre verktygsfältet. Klicka och håll kvar på något av elementen i den här raden för att öppna en omfattande meny. Här är en ofullständig guide till dessa alternativ:
- "Redigera som HTML" gör noden och allt dess innehåll redigerbart i HTML -trädet, istället för att behöva redigera varje rad individuellt.
- "Kopiera inre HTML" kopierar allt innehåll i noden, medan "Kopiera yttre HTML" också kopierar noden (t.ex. eller
- "Klistra in →" leder till flera alternativ för var du ska klistra in, till exempel före denna nod eller efter nodens första barn.
- : sväva,: aktiv och: fokus ändra elementets utseende när användaren interagerar med det. Den exakta effekten bestäms av CSS-formatmallen (redigerbar från den högra rutan).
Steg 4. Dra och släpp
Om du vill ordna om element i koden klickar du på och håller HTML -koden tills en streckad rad visas. Flytta den upp eller ner i trädet och släpp när den streckade linjen är på önskad plats.
Detta kräver Firefox 39 eller senare
Steg 5. Stäng utvecklarens verktygsfält
För att stänga alla dessa fina fönster, tryck bara på X längst till höger i verktygsfältet ovanför CSS -rutan.
Tips
- Du kan också öppna verktygsfältet med dessa toppmenyalternativ:
- Windows: Firefox → Webbutvecklare → Växla verktyg
- Mac eller Linux: Verktyg → Webbutvecklare → Växla verktyg
- Firefox 40 introducerade möjligheten att dölja CSS -rutan för att ge dig mer utrymme när du redigerar HTML. Leta efter pilikonen längst till höger på raden Brödsmulor, till höger om sökfältet. Klicka på den här ikonen för att dölja CSS -rutan och klicka på den igen för att expandera den igen.
- CSS -rutan är också redigerbar, men det ligger utanför räckvidden för den här guiden. Den här artikeln lär ut grunderna i CSS.
