"Inspektera element" är ett utvecklarverktyg i Firefox -webbläsaren som du kan använda för att spåra HTML -kod på vilken webbsida som helst. HTML- och CSS -formatmallen på en webbsida kan redigeras med "Inspektera element". Du kan försöka redigera en sida hur du vill och få tillbaka den till den var genom att helt enkelt ladda om den redigerade webbsidan.
Steg
Del 1 av 2: Kontroll av element
Steg 1. Uppdatera Firefox (valfritt)
Det är möjligt att du inte kommer åt de funktioner som diskuteras i den här artikeln om du använder en äldre version av Firefox. Uppdateringen installeras automatiskt när du kontrollerar vilken version av Firefox du använder.
Firefox 9 och tidigare versioner har inte verktyget "Inspektera element" alls
Steg 2. Högerklicka på valfri webbsida
Du kan högerklicka på valfri bild, text, bakgrund eller element. Om musen bara har en knapp, kommer en kombination av vänsterklicka och kontrollknappen att resultera i ett högerklick.
Steg 3. Klicka på "Inspektera element" från rullgardinsmenyn
Ett verktygsfält visas längst ned i fönstret. En panel under verktygsfältet kommer också att visas och visa HTML -koden på den aktiva sidan.
Steg 4. Lär känna befintliga verktygsfält och paneler
När du använder "Inspektera element" öppnas flera paneler under webbläsarfönstret. I det följande beskrivs namn och funktioner på verktygsfält och paneler i "Inspektera element":
- På den översta raden finns Toolbox Toolbar. Det finns flera verktyg att hitta här, men vi fokuserar på Inspector -knappen till vänster. Se till att den här knappen är aktiv (indikeras av färgen på knappen som blir blå när den är aktiv) i hela denna guide.
- Under det finns en rad HTML -elements ströbröd som anger platsen för det för närvarande valda elementet.
- Fönstret under navigeringsfrågorna visar HTML -trädet eller "Markup View" på webbsidan. HTML -koden för det valda elementet kommer att markeras och centreras i den här rutan.
- Fönstret till höger visar den aktuella webbsidans CSS -formatmall.
Steg 5. Välj ett annat element
När verktygsfältet är öppet kan du enkelt välja andra element. Det finns tre sätt att göra detta:
- Håll muspekaren över en rad HTML för att markera det valda elementet (denna funktion kräver Firefox 34+). Klicka på HTML -koden för att välja det elementet.
- Klicka på "Välj element" -verktyget i det vänstra hörnet av verktygsfältet: det har en markörformad ikon ovanför en ruta. Flytta markören på webbsidan för att markera ett element och klicka för att markera det.
Steg 6. Spåra HTML -koden
Klicka var som helst i HTML -rutan. Använd vänster och höger riktningstangenter på tangentbordet för att gå från kod till kod (denna funktion kräver Firefox 39+). Denna metod är användbar för att välja element som är för små för att kunna väljas med markören.
- Gråtonad HTML anger element som inte visas på sidan. Elementen som ingår i detta är kommentarer, som noder och andra element som döljs av CSS -visningsegenskapen.
- Klicka på pilen till vänster i rutan för att visa eller dölja innehållet. Om du vill visa hela innehållet håller du ned alt="Bild" eller alternativ medan du klickar på pilen.
Steg 7. Leta reda på elementet
Leta efter sökfältet (loopformad ikon) längst till höger på ströbrödsraden. Klicka för att expandera sökfältet och skriv in HTML -koden du vill söka efter. När du skriver visas en popup som visar matchande sökresultat. Klicka på ett element i sökresultaten och rulla HTML -rutan till koden du letar efter.
Del 2 av 2: Redigering av HTML
Steg 1. Ladda om sidan för att börja om
Om du är ny på webbplatsutvecklingsverktyg, tänk på att du inte gör permanenta ändringar på sidorna du redigerar. Dina redigeringar visas bara på skärmen tills du laddar om eller stänger sidan. Experimentera gärna även om du inte vet vad som kommer att hända.
Steg 2. Dubbelklicka på HTML -koden för att redigera
Dubbelklicka på inline HTML. Skriv den nya texten och tryck enter för att spara ändringarna.
Steg 3. Klicka och håll verktyget i ströbrödet för att få fram fler alternativ
Observera att verktygsfältet för ströbröd sitter mellan HTML -trädet och verktygsfältet ovanför det. Klicka och håll ett verktyg på den här raden för att öppna fler menyer. Nedan följer en antydan om tillgängliga alternativ (inte uttömmande):
- Med "Redigera som HTML" kan du redigera allt HTML -innehåll från HTML -trädet direkt istället för att redigera varje rad.
- "Kopiera inre HTML" kopierar hela innehållet inuti noden, medan "Kopiera yttre HTML" kopierar innehållet och noder (t.ex. eller
- "Klistra in →" visar flera alternativ för var du ska klistra in kopian, till exempel före noden eller efter nodens första barn.
- : sväva,: aktiv och: fokus ändra elementets utseende när användaren interagerar. Ändrade effekter definieras från CSS -formatmallen (redigerbar från panelen till höger).
Steg 4. Dra och släpp
Om du vill ordna om element i koden klickar du på och håller HTML -koden tills en prickad linje visas. Flytta raden upp och ner i trädet och släpp musknappen när raden är där du vill ha den.
Den här funktionen kräver Firefox 39 och senare
Steg 5. Stäng utvecklarens verktygsfält
För att stänga hela inspektionselementfönstret, klicka på X -knappen i det övre högra hörnet av verktygsfältet ovanför CSS -panelen.
Tips
- Du kan också öppna verktygsfältet från menyalternativen högst upp i fönstret:
- Windows: Firefox → Webbutvecklare → Växla verktyg
- Mac eller Linux: Verktyg → Webbutvecklare → Växla verktyg
- Firefox 40 har möjlighet att dölja CSS -panelen så att du har mer utrymme att redigera HTML. Leta efter pilikonen längst till höger i ströbrödsraden och till höger om sökfältet. Klicka på den här ikonen för att dölja CSS -panelen och klicka igen för att visa den.
- Du kan också redigera CSS -paneler, men de finns inte listade i den här artikeln. Du kan hitta instruktioner för redigering av CSS -kod på internet.
