Inspektionselementets udviklerværktøj i Firefox giver dig mulighed for at lokalisere HTML -koden for alt, hvad du ser på din webside. HTML og tilhørende CSS -stilark kan redigeres fuldstændigt, når disse værktøjer er åbne. Eksperimenter med de ændringer, du kan lide, og opdater derefter siden for at vende tilbage til websidens tilsigtede udseende.
Trin
Del 1 af 2: Inspektion af elementer
Trin 1. Højreklik på et hvilket som helst websideelement
Du kan højreklikke på billeder, tekst, baggrunde eller ethvert andet element. Hvis du ikke har en mus med to knapper, skal du venstreklikke, mens du holder Kontrol nede.
Trin 2. Klik på Inspicer element i rullemenuen
En værktøjslinje skal vises nederst i dit vindue. En rude vises også under værktøjslinjen, der viser sidens HTML -kode.
Trin 3. Identificer værktøjslinjer og ruder
Når du klikker på Inspicer element, åbnes flere ruder i bunden af dit vindue. Her er en oversigt over deres anvendelser og navne:
- Den øverste række er Toolbox Toolbar. Dette har flere udviklerværktøjer, men vi er interesseret i Inspektør til venstre. Hold denne markeret (markeret med blå) for hele denne vejledning.
- Under værktøjslinjen er der en enkelt Breadcrumbs -række med HTML -elementer, der viser den fulde sti, der vedrører det valgte element.
- Ruden under denne række viser HTML -træet eller "Markup View" på siden. HTML -koden for det valgte element er fremhævet og centreret i denne rude.
- Ruden til højre viser CSS -stilarket for denne side.
Trin 4. Vælg et andet element
Når værktøjslinjen er åben, er det let at vælge et andet element. Her er tre måder at gøre det på:
- Hold markøren over en HTML -linje for at markere det tilsvarende element (kræver Firefox 34+). Klik på HTML -koden for at vælge det element.
- Klik på værktøjet Vælg element længst til venstre på værktøjslinjen: ikonet er en markør over en firkant. Flyt markøren hen over siden for at markere elementer, og klik derefter for at vælge et element.
Trin 5. Naviger gennem koden
Klik et vilkårligt sted i HTML -ruden. Brug venstre og højre pil på tastaturet til at gå gennem koden (kræver Firefox 39+). Dette er nyttigt for elementer, der er for små til at vælge i hånden.
- Grå HTML vedrører elementer, der ikke vises på siden. Dette inkluderer kommentarer, visse noder som f.eks. Og elementer, der er blevet skjult med CSS -displayegenskaben.
- Klik på pilen til venstre for containere for at udvide eller skjule dets indhold. For at udvide alt indhold skal du holde alt="Image" eller option nede, mens du klikker.
Trin 6. Søg efter et element
Se efter søgelinjen (ikonet med forstørrelsesglas) yderst til højre i brødkrummerækket. Klik på dette for at udvide det, og indtast derefter den HTML -kode, du leder efter. Når du skriver, vises der en popup med matchende elementer. Klik på en for at vælge det element og rulle HTML -ruden til dens kode.
Del 2 af 2: Redigering af HTML
Trin 1. Opdater siden for at starte forfra når som helst
Hvis du er ny inden for webudviklerværktøjer, skal du forstå, at de ikke foretager permanente ændringer. Dine redigeringer er kun synlige på din skærm, og kun indtil du lukker siden eller opdaterer den. Tøv ikke med at eksperimentere, selvom du ikke er sikker på, hvad der vil ske.
Trin 2. Dobbeltklik på HTML -koden for at redigere tekst
Dobbeltklik på en HTML -linje. Indtast den nye tekst, og tryk på enter for at gemme dine ændringer.
Trin 3. Klik og hold på en brødkrumme for flere muligheder
Husk, at Breadcrumb -værktøjslinjen er klemt mellem det fulde HTML -træ og den øverste værktøjslinje. Klik og hold på et af elementerne i denne række for at åbne en omfattende menu. Her er en ufuldstændig guide til disse muligheder:
- "Rediger som HTML" gør noden og alt dens indhold redigerbart i HTML -træet, i stedet for at skulle redigere hver linje individuelt.
- "Kopier indre HTML" kopierer alt indholdet af noden, mens "Kopier ydre HTML" også kopierer noden (f.eks. Eller
- "Indsæt →" fører til flere muligheder for at indsætte, f.eks. Før denne knude eller efter nodens første barn.
- : svæve,: aktiv og: fokus ændre elementets udseende, når brugeren interagerer med det. Den nøjagtige effekt bestemmes af CSS-stilarket (redigerbart fra ruden til højre).
Trin 4. Træk og slip
For at omarrangere elementer i koden skal du klikke på HTML -koden og holde den nede, indtil der vises en stiplet linje. Flyt det op eller ned af træet og slip, når den stiplede linje er det ønskede sted.
Dette kræver Firefox 39 eller nyere
Trin 5. Luk udviklerværktøjslinjen
For at lukke alle disse smarte vinduer skal du bare trykke på X'et i yderste højre hjørne af værktøjslinjen over CSS -ruden.
Tips
- Du kan også åbne værktøjslinjen med disse topmenuindstillinger:
- Windows: Firefox → Webudvikler → Skift værktøjer
- Mac eller Linux: Værktøjer → Webudvikler → Skift værktøjer
- Firefox 40 introducerede muligheden for at skjule CSS -ruden for at give dig mere plads, mens du redigerer HTML. Se efter pilikonet yderst til højre i rækken med brødkrummer til højre for søgelinjen. Klik på dette ikon for at skjule CSS -ruden, og klik på det igen for at udvide det igen.
- CSS -ruden er også redigerbar, men det er uden for denne vejledning. Denne artikel lærer grundlæggende CSS.
