"Inspekter element" er et utviklerverktøy i Firefox -nettleseren som du kan bruke til å spore HTML -kode på en hvilken som helst nettside. HTML- og CSS -stilarkene på en webside kan redigeres med "Inspiser element". Du kan prøve å redigere en side som du vil og få den tilbake til den var ved å laste den redigerte nettsiden på nytt.
Steg
Del 1 av 2: Kontroll av elementer
Trinn 1. Oppdater Firefox (valgfritt)
Det er mulig at du ikke får tilgang til funksjonene som er omtalt i denne artikkelen hvis du bruker en eldre versjon av Firefox. Oppdateringen installeres automatisk når du sjekker hvilken versjon av Firefox du bruker.
Firefox 9 og tidligere versjoner har ikke verktøyet "Inspiser element" i det hele tatt
Trinn 2. Høyreklikk på et hvilket som helst websideelement
Du kan høyreklikke på et bilde, tekst, bakgrunn eller element. Hvis musen din bare har en knapp, vil en kombinasjon av venstre klikk og kontrolltasten resultere i et høyreklikk.
Trinn 3. Klikk på "Inspiser element" fra rullegardinmenyen
En verktøylinje vises nederst i vinduet. Et panel under verktøylinjen vil også vises og vise HTML -koden på den aktive siden.
Trinn 4. Bli kjent med de eksisterende verktøylinjene og panelene
Når du bruker "Inspiser element", åpnes flere paneler under nettleservinduet. Følgende beskriver navn og funksjoner på verktøylinjer og paneler i "Inspiser element":
- På den øverste raden er Toolbox Toolbar. Det er flere verktøy å finne her, men vi fokuserer på Inspector -knappen til venstre. Sørg for at denne knappen er aktiv (angitt med fargen på knappen som blir blå når den er aktiv) gjennom denne veiledningen.
- Under det er det en linje med HTML -elementers brødsmuler som angir plasseringen av det valgte elementet.
- Ruten under navigasjonsmeldingene viser HTML -treet eller "Markup View" på nettsiden. HTML -koden til det valgte elementet vil bli merket og sentrert i denne ruten.
- Ruten til høyre viser CSS -stilarket for den gjeldende websiden.
Trinn 5. Velg et annet element
Når verktøylinjen er åpen, kan du enkelt velge andre elementer. Det er tre måter å gjøre dette på:
- Hold markøren over en HTML -linje for å markere det valgte elementet (denne funksjonen krever Firefox 34+). Klikk HTML -koden for å velge det elementet.
- Klikk på "Velg element" -verktøyet i venstre hjørne av verktøylinjen: det har et markørformet ikon over en boks. Flytt markøren på websiden for å markere et element, og klikk for å velge det.
Trinn 6. Spor HTML -koden
Klikk hvor som helst i HTML -ruten. Bruk venstre og høyre retningstast på tastaturet for å gå fra kode til kode (denne funksjonen krever Firefox 39+). Denne metoden er nyttig for å velge elementer som er for små til å kunne velges med markøren.
- Gråtonet HTML angir elementer som ikke vises på siden. Elementene som er inkludert i dette er kommentarer, som noder og andre elementer som er skjult av CSS -skjermegenskapen.
- Klikk på pilen til venstre i boksen for å vise eller skjule innholdet. For å vise hele innholdet, hold nede alt="Bilde" eller alternativ mens du klikker på pilen.
Trinn 7. Finn elementet
Se etter søkefeltet (sløyfeformet ikon) helt til høyre i brødsmuleraden. Klikk for å utvide søkefeltet og skriv inn HTML -koden du vil søke etter. Når du skriver, vil en popup-vindu vises som viser matchende søkeresultater. Klikk på et element fra søkeresultatene, og rull HTML -ruten til koden du leter etter.
Del 2 av 2: Redigering av HTML
Trinn 1. Last siden på nytt for å starte på nytt
Vær oppmerksom på at du ikke gjør permanente endringer på sidene du redigerer, hvis du er ny i utviklingsverktøyene for nettsteder. Endringene dine vises bare på skjermen til du laster inn siden på nytt eller lukker den. Eksperimenter gjerne selv om du ikke vet hva som vil skje.
Trinn 2. Dobbeltklikk på HTML -koden for å redigere
Dobbeltklikk på innebygd HTML. Skriv inn den nye teksten og trykk enter for å lagre endringene.
Trinn 3. Klikk og hold inne verktøyet i brødsmulet for å få frem flere alternativer
Vær oppmerksom på at brødsmulens verktøylinje sitter mellom HTML -treet og verktøylinjen over den. Klikk og hold inne et verktøy i denne raden for å åpne flere menyer. Nedenfor er et snev av de tilgjengelige alternativene (ikke uttømmende):
- "Rediger som HTML" lar deg redigere alt HTML -innhold fra HTML -treet direkte i stedet for å redigere hver linje.
- "Kopier indre HTML" kopierer hele innholdet inne i noden, mens "Kopier ytre HTML" kopierer innholdet og noder (for eksempel eller
- "Lim inn" gir flere alternativer for hvor du skal lime inn kopien, for eksempel før noden eller etter nodens første barn.
- : sveve,: aktiv og: fokus endre elementets utseende når brukeren samhandler. Endrede effekter er definert fra CSS -stilarket (kan redigeres fra panelet til høyre).
Trinn 4. Dra og slipp
For å omorganisere elementer i koden, klikk og hold inne HTML -koden til en stiplet linje vises. Flytt linjen opp og ned i treet og slipp museknappen når linjen er der du vil ha den.
Denne funksjonen krever Firefox 39 og nyere
Trinn 5. Lukk utviklerverktøylinjen
For å lukke hele Inspect Element -vinduet, klikk på X -knappen øverst til høyre på verktøylinjen som ligger over CSS -panelet.
Tips
- Du kan også åpne verktøylinjen fra menyalternativene øverst i vinduet:
- Windows: Firefox → Webutvikler → Toggle Tools
- Mac eller Linux: Verktøy → Webutvikler → Toggle Tools
- Firefox 40 har muligheten til å skjule CSS -panelet, slik at du har mer plass til å redigere HTML. Se etter pilikonet helt til høyre i brødsmuleraden og til høyre for søkefeltet. Klikk på dette ikonet for å skjule CSS -panelet, og klikk igjen for å vise det.
- Du kan også redigere CSS -paneler, men de er ikke oppført i denne artikkelen. Du kan finne instruksjoner for redigering av CSS -kode på internett.
