Med Inspect Element -utviklerverktøyet i Firefox kan du finne HTML -koden for alt du ser på nettsiden din. HTML og tilhørende CSS -stilark kan redigeres fullt ut når disse verktøyene er åpne. Eksperimenter med eventuelle endringer du liker, og oppdater siden for å gå tilbake til det tiltenkte utseendet til nettsiden.
Trinn
Del 1 av 2: Inspisere elementer
Trinn 1. Høyreklikk på et hvilket som helst websideelement
Du kan høyreklikke på bilder, tekst, bakgrunner eller andre elementer. Hvis du ikke har en mus med to knapper, høyreklikker du mens du holder Control.
Trinn 2. Klikk på Inspiser element fra rullegardinmenyen
En verktøylinje skal vises nederst i vinduet. En rute vil også vises under verktøylinjen, som viser sidens HTML -kode.
Trinn 3. Identifiser verktøylinjer og ruter
Når du klikker Inspiser element, åpnes flere ruter nederst i vinduet. Her er en oversikt over bruksområder og navn:
- Den øverste raden er Toolbox Toolbar. Dette har flere utviklerverktøy, men vi er interessert i Inspector til venstre. Hold dette valgt (markert med blått) for hele denne guiden.
- Under verktøylinjen er det en enkelt brødkrummerad med HTML -elementer, som viser hele banen knyttet til det valgte elementet.
- Ruten under denne raden viser HTML -treet eller "Markup View" på siden. HTML -koden for elementet du valgte er uthevet og sentrert i denne ruten.
- Ruten til høyre viser CSS -stilarket for denne siden.
Trinn 4. Velg et annet element
Når verktøylinjen er åpen, er det enkelt å velge et annet element. Her er tre måter å gjøre det på:
- Hold markøren over en HTML -linje for å markere det tilsvarende elementet (krever Firefox 34+). Klikk HTML -koden for å velge det elementet.
- Klikk på Select Element -verktøyet helt til venstre på verktøylinjen: ikonet er en markør over en firkant. Flytt markøren over siden for å markere elementer, og klikk deretter for å velge et element.
Trinn 5. Naviger gjennom koden
Klikk hvor som helst i HTML -ruten. Bruk venstre og høyre pil på tastaturet for å gå gjennom koden (krever Firefox 39+). Dette er nyttig for elementer som er for små til å velge for hånd.
- Grå HTML gjelder elementer som ikke vises på siden. Dette inkluderer kommentarer, visse noder som, og elementer som har blitt skjult med CSS -skjermegenskapen.
- Klikk på pilen til venstre for beholdere for å utvide eller skjule innholdet. For å utvide alt innhold, hold alt="Bilde" eller alternativ mens du klikker.
Trinn 6. Søk etter et element
Se etter søkefeltet (forstørrelsesglassikonet) lengst til høyre på brødsmuleraden. Klikk på dette for å utvide det, og skriv deretter inn HTML -koden du leter etter. Når du skriver, vises en popup med matchende elementer. Klikk på en for å velge det elementet og bla HTML -ruten til koden.
Del 2 av 2: Redigering av HTML
Trinn 1. Oppdater siden for å starte på nytt når som helst
Hvis du er ny på webutviklerverktøy, må du forstå at de ikke gjør noen permanente endringer. Endringene dine vil bare være synlige på skjermen, og bare til du lukker siden eller oppdaterer den. Ikke nøl med å eksperimentere selv om du ikke er sikker på hva som vil skje.
Trinn 2. Dobbeltklikk på HTML -koden for å redigere tekst
Dobbeltklikk på en linje med HTML. Skriv inn den nye teksten og trykk enter for å lagre endringene.
Trinn 3. Klikk og hold en brødsmul for flere alternativer
Husk at Breadcrumb -verktøylinjen er plassert mellom hele HTML -treet og den øvre verktøylinjen. Klikk og hold på et av elementene i denne raden for å åpne en omfattende meny. Her er en ufullstendig guide til disse alternativene:
- "Rediger som HTML" gjør noden og alt innholdet redigerbart i HTML -treet, i stedet for å måtte redigere hver linje individuelt.
- "Kopier indre HTML" kopierer alt innholdet i noden, mens "Kopier ytre HTML" også kopierer noden (for eksempel eller
- "Lim inn" fører til flere alternativer for hvor du skal lime inn, for eksempel før denne noden eller etter det første barnet til noden.
- : sveve,: aktiv og: fokus endre elementets utseende når brukeren samhandler med det. Den eksakte effekten bestemmes av CSS-stilarket (kan redigeres fra ruten 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 den opp eller ned i treet og slipp når den stiplede linjen er på ønsket sted.
Dette krever Firefox 39 eller nyere
Trinn 5. Lukk utviklerverktøylinjen
For å lukke alle disse flotte vinduene, trykker du bare på X helt til høyre på verktøylinjen, over CSS -ruten.
Tips
- Du kan også åpne verktøylinjen med disse toppmenyalternativene:
- Windows: Firefox → Webutvikler → Toggle Tools
- Mac eller Linux: Verktøy → Webutvikler → Toggle Tools
- Firefox 40 introduserte muligheten til å skjule CSS -ruten for å gi deg mer plass mens du redigerer HTML. Se etter pilikonet helt til høyre på brødkrummene, til høyre for søkefeltet. Klikk på dette ikonet for å skjule CSS -ruten, og klikk på det igjen for å utvide det igjen.
- CSS -ruten er også redigerbar, men det er utenfor omfanget av denne veiledningen. Denne artikkelen lærer grunnleggende CSS.
