"Inspekteer element" is 'n ontwikkelaarhulpmiddel in die Firefox -blaaier wat u kan gebruik om HTML -kode op enige webbladsy op te spoor. Die HTML- en CSS -stylblaaie van 'n webbladsy kan met 'Inspekteer element' gewysig word. U kan probeer om 'n bladsy te redigeer soos u wil en dit weer te kry soos dit was deur die geredigeerde webblad eenvoudig te herlaai.
Stap
Deel 1 van 2: Kontroleer elemente
Stap 1. Dateer Firefox op (opsioneel)
Dit is moontlik dat u nie toegang sal hê tot die funksies wat in hierdie artikel bespreek word as u 'n ouer weergawe van Firefox gebruik nie. Die opdatering word outomaties geïnstalleer as u kyk watter weergawe van Firefox u gebruik.
Firefox 9 en vorige weergawes het glad nie die instrument "Inspekteer element" nie
Stap 2. Klik met die rechtermuisknop op enige webbladelement
U kan met die rechtermuisknop op enige prent, teks, agtergrond of element klik. As u muis slegs een knoppie het, sal 'n kombinasie van links-klik en die Control-sleutel 'n regsklik veroorsaak.
Stap 3. Klik op "Inspekteer element" in die keuselys
'N Werkbalk verskyn onderaan die venster. 'N Paneel onder die werkbalk sal ook verskyn en die HTML -kode op die aktiewe bladsy vertoon.
Stap 4. Maak kennis met die bestaande werkbalke en panele
As u 'Inspekteer element' gebruik, word verskeie panele onder die blaaiervenster oopgemaak. Die volgende beskryf die name en funksies van die werkbalke en panele in "Inspekteer element":
- In die boonste ry is die Toolbox Toolbar. Hier kan u verskillende instrumente vind, maar ons fokus op die inspekteur -knoppie aan die linkerkant. Maak seker dat hierdie knoppie aktief is (aangedui deur die kleur van die knoppie wat blou word as dit aktief is) in hierdie gids.
- Daaronder is 'n reël broodkrummels van HTML -elemente wat die ligging van die geselekteerde element aandui.
- Die paneel onder die navigasie -aanwysings wys die HTML -boom of 'Opmerkingsaansig' van die webblad. Die HTML van die geselekteerde element sal in hierdie venster gemerk en gesentreer word.
- Die venster aan die regterkant vertoon die huidige webwerf se CSS -stylblad.
Stap 5. Kies 'n ander element
As die werkbalk oop is, kan u maklik ander elemente kies. Daar is drie maniere om dit te doen:
- Beweeg oor 'n HTML -reël om die geselekteerde element te merk (hierdie funksie benodig Firefox 34+). Klik op die HTML om die element te kies.
- Klik op die "Kies element" -gereedskap in die linkerhoek van die werkbalk: dit het 'n wyservormige ikoon bo 'n blokkie. Beweeg die wyser op die webblad om 'n element te merk en klik om dit te kies.
Stap 6. Spoor die HTML -kode na
Klik oral in die HTML -paneel. Gebruik die rigtingsleutels links en regs op die sleutelbord om van kode na kode te beweeg (hierdie funksie benodig Firefox 39+). Hierdie metode is nuttig om elemente te selekteer wat te klein is om met die wyser gekies te word.
- Gegrimeerde HTML dui elemente aan wat nie op die bladsy vertoon word nie. Die elemente wat hierin ingesluit is, is opmerkings, soos nodes, en ander elemente wat deur die CSS -vertoningseienskappe versteek word.
- Klik op die pyltjie links van die boks om die inhoud te wys of te verberg. Om die hele inhoud te vertoon, hou alt="Image" of opsie ingedruk terwyl u op die pyltjie klik.
Stap 7. Vind die element
Soek die soekveld (lusvormige ikoon) in die regterkantste hoek van die broodkrummelsry. Klik om die soekveld uit te brei en tik die HTML -kode waarna u wil soek. Terwyl u tik, sal 'n opspringvenster verskyn wat ooreenstem met die soekresultate. Klik op 'n element uit die soekresultate en blaai deur die HTML -paneel na die kode wat u soek.
Deel 2 van 2: HTML wysig
Stap 1. Herlaai die bladsy om weer te begin
As u nuut is in die ontwikkeling van gereedskap vir webwerwe, moet u daarop let dat u nie die bladsye wat u wysig, permanent verander nie. U wysigings verskyn slegs op u skerm totdat u die bladsy herlaai of toemaak. Eksperimenteer gerus al weet u nie wat gaan gebeur nie.
Stap 2. Dubbelklik op die HTML om te wysig
Dubbelklik op die inline HTML. Tik die nuwe teks en druk enter om die veranderinge te stoor.
Stap 3. Klik en hou die instrument in die broodkrumm om meer opsies te kry
Let daarop dat die broodkrumm -werkbalk tussen die HTML -boom en die werkbalk daarbo sit. Klik en hou 'n hulpmiddel in hierdie ry om meer spyskaarte oop te maak. Hieronder is 'n wenk van die beskikbare opsies (nie volledig nie):
- Met 'Edit as HTML' kan u alle HTML -inhoud direk vanaf die HTML -boom wysig in plaas van om elke reël te wysig.
- "Kopieer innerlike HTML" kopieer die hele inhoud binne die knoop, terwyl "Kopieer buitenste HTML" die inhoud en nodusse (soos of
- "Plak →" bied verskeie opsies om die kopie te plak, soos voor die knoop of na die knoop se eerste kind.
- : sweef,: aktief en: fokus verander die voorkoms van die element wanneer die gebruiker interaksie het. Veranderde effekte word gedefinieer vanuit die CSS -stylblad (bewerkbaar vanaf die paneel aan die regterkant).
Stap 4. Sleep en laat val
Om die elemente in die kode te herrangskik, hou die HTML ingedruk totdat 'n stippellyn verskyn. Beweeg die lyn op en af in die boom en laat die muisknop los wanneer die lyn is waar u dit wil hê.
Hierdie funksie vereis Firefox 39 en later
Stap 5. Maak die ontwikkelaar se nutsbalk toe
Om die hele venster Inspect Element te sluit, klik op die X -knoppie in die regter boonste hoek van die werkbalk bo die CSS -paneel.
Wenke
- U kan ook die werkbalk oopmaak vanuit die kieslysopsies bo -aan die venster:
- Windows: Firefox → Webontwikkelaar → Skakel gereedskap
- Mac of Linux: Gereedskap → Webontwikkelaar → Wisselgereedskap
- Firefox 40 het die opsie om die CSS -paneel te verberg, sodat u meer ruimte het om HTML te wysig. Soek die pyltjie -ikoon in die heel regter hoek van die broodkrummelsry en regs van die soekveld. Klik op hierdie ikoon om die CSS -paneel te verberg en klik weer om dit weer te gee.
- U kan ook CSS -panele wysig, maar dit word nie in hierdie artikel gelys nie. U kan instruksies vind vir die wysiging van CSS -kode op die internet.
