"Inspicer element" er et udviklerværktøj i Firefox -browseren, som du kan bruge til at spore HTML -kode på enhver webside. HTML- og CSS -stilarkene på en webside kan redigeres med "Inspicer element". Du kan prøve at redigere en side, som du vil, og få den tilbage til den måde, den var ved blot at genindlæse den redigerede webside.
Trin
Del 1 af 2: Kontrol af elementer
Trin 1. Opdater Firefox (valgfrit)
Det er muligt, at du ikke får adgang til de funktioner, der diskuteres i denne artikel, hvis du bruger en ældre version af Firefox. Opdateringen installeres automatisk, når du kontrollerer, hvilken version af Firefox du bruger.
Firefox 9 og tidligere versioner har slet ikke værktøjet "Inspekter element"
Trin 2. Højreklik på et hvilket som helst websideelement
Du kan højreklikke på ethvert billede, tekst, baggrund eller element. Hvis din mus kun har en knap, resulterer en kombination af venstreklik og kontroltasten i et højreklik.
Trin 3. Klik på "Inspicer element" i rullemenuen
Der vises en værktøjslinje nederst i vinduet. Et panel under værktøjslinjen vises også og viser HTML -koden på den aktive side.
Trin 4. Lær de eksisterende værktøjslinjer og paneler at kende
Når du bruger "Inspicer element", åbnes flere paneler under browservinduet. Det følgende beskriver navnene og funktionerne på værktøjslinjerne og panelerne i "Inspekter element":
- På den øverste række er Toolbox Toolbar. Der findes flere værktøjer her, men vi fokuserer på knappen Inspector til venstre. Sørg for, at denne knap er aktiv (angivet med den farve på knappen, der bliver blå, når den er aktiv) i hele denne vejledning.
- Nedenfor er der en linje med HTML -elementers brødkrummer, der angiver placeringen af det aktuelt valgte element.
- Ruden under navigationsprompterne viser HTML -træet eller "Markup View" på websiden. HTML -koden for det valgte element vil blive markeret og centreret i denne rude.
- Ruden til højre viser den aktuelle websides CSS -stilark.
Trin 5. Vælg et andet element
Når værktøjslinjen er åben, kan du nemt vælge andre elementer. Der er tre måder at gøre dette på:
- Hold markøren over en HTML -linje for at markere det valgte element (denne funktion kræver Firefox 34+). Klik på HTML -koden for at vælge det element.
- Klik på værktøjet "Vælg element" i venstre hjørne af værktøjslinjen: det har et markørformet ikon over en boks. Flyt markøren på websiden for at markere et element, og klik for at markere det.
Trin 6. Spor HTML -koden
Klik et vilkårligt sted i HTML -ruden. Brug venstre og højre retningstast på tastaturet til at gå fra kode til kode (denne funktion kræver Firefox 39+). Denne metode er nyttig til at vælge elementer, der er for små til at kunne vælges med markøren.
- Gråtonet HTML angiver elementer, der ikke vises på siden. De elementer, der er inkluderet i dette, er kommentarer, ligesom noder og andre elementer, der er skjult af CSS -displayegenskaben.
- Klik på pilen til venstre for feltet for at vise eller skjule indholdet. For at få vist hele indholdet skal du holde alt="Image" eller option nede, mens du klikker på pilen.
Trin 7. Find elementet
Se efter søgefeltet (loop-formet ikon) i det yderste højre hjørne af brødkrummerækken. Klik for at udvide søgefeltet, og indtast den HTML -kode, du vil søge efter. Når du skriver, vises der en pop-up, der viser matchende søgeresultater. Klik på et element fra søgeresultaterne, og rul HTML -ruden til den kode, du leder efter.
Del 2 af 2: Redigering af HTML
Trin 1. Genindlæs siden for at starte forfra
Hvis du ikke er ny inden for webstedsudviklingsværktøjer, skal du være opmærksom på, at du ikke foretager permanente ændringer på de sider, du redigerer. Dine redigeringer vises kun på din skærm, indtil du genindlæser eller lukker siden. Du er velkommen til at eksperimentere, selvom du ikke ved, hvad der vil ske.
Trin 2. Dobbeltklik på HTML -koden for at redigere
Dobbeltklik på inline HTML. Indtast den nye tekst, og tryk på enter for at gemme ændringerne.
Trin 3. Klik og hold værktøjet i brødkrummen for at få vist flere muligheder
Bemærk, at brødkrummens værktøjslinje sidder mellem HTML -træet og værktøjslinjen over det. Klik og hold på et værktøj i denne række for at åbne flere menuer. Nedenfor er et tip om de tilgængelige muligheder (ikke udtømmende):
- "Rediger som HTML" giver dig mulighed for at redigere alt HTML -indhold fra HTML -træet direkte i stedet for at redigere hver linje.
- "Kopier indre HTML" kopierer hele indholdet inde i noden, mens "Kopier ydre HTML" kopierer indholdet og noder (f.eks. Eller
- "Indsæt →" viser flere muligheder for, hvor kopien skal indsættes, f.eks. Før noden eller efter nodens første barn.
- : svæve,: aktiv og: fokus ændre elementets udseende, når brugeren interagerer. Ændrede effekter defineres ud fra CSS -stilarket (kan redigeres fra panelet 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 linjen op og ned i træet, og slip museknappen, når linjen er, hvor du vil have den.
Denne funktion kræver Firefox 39 og nyere
Trin 5. Luk udviklerværktøjslinjen
For at lukke hele vinduet Inspektionselement skal du klikke på knappen X i øverste højre hjørne af værktøjslinjen placeret over CSS -panelet.
Tips
- Du kan også åbne værktøjslinjen fra menuindstillingerne øverst i vinduet:
- Windows: Firefox → Webudvikler → Skift værktøjer
- Mac eller Linux: Værktøjer → Webudvikler → Skift værktøjer
- Firefox 40 har mulighed for at skjule CSS -panelet, så du har mere plads til at redigere HTML. Se efter pilikonet i yderste højre hjørne af brødkrummerækken og til højre for søgefeltet. Klik på dette ikon for at skjule CSS -panelet, og klik igen for at få det vist.
- Du kan også redigere CSS -paneler, men de er ikke angivet i denne artikel. Du kan finde instruktioner til redigering af CSS -kode på internettet.
