Hoe om die Inspect Element-instrument in Mozilla Firefox te gebruik

Die "Inspect item" ontwikkelaar instrument laat jou toe om die HTML-kode van al die elemente wat jy op `n webblad sien, akkuraat te identifiseer. Die HTML- en die CSS-style sheets wat dit vergesel, is heeltemal redigeer sodra jy hierdie gereedskap oopgemaak het. Eksperimenteer deur die veranderinge wat jy wil te maak en werk dan die bladsy op om die webblad met die verlangde voorkoms te vertoon.

conținut

Stappe
Deel 1
Deel 2
Wenke

stappe

Deel 1

Inspekteer items

Prent getiteld Gebruik die Inspeksie-element in Mozilla Firefox Stap 1

Update Firefox (opsioneel). U het dalk nie toegang tot al die funksies wat in hierdie artikel beskryf word as u `n ou weergawe van Firefox het nie. As u die weergawe van Firefox wat u geïnstalleer het, nagaan, sal die nuutste weergawe outomaties afgelaai word.

Firefox 9 en vorige weergawes het nie direk die "Inspekteer item" -gereedskap nie.

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 2

Regskliek op enige element van die webblad. U kan regs kliek op prente, teks, agtergronde of enige ander element. As jy nie `n muis met twee knoppies het nie, links kliek terwyl jy die sleutel hou ^ Beheer.

Prent getiteld Gebruik die Inspeksie-element in Mozilla Firefox Stap 3

Klik in die hangkieslys op "Inspekteer item". `N Werkbalk moet in die onderste gedeelte van die venster verskyn. `N Paneel verskyn ook onder die nutsbalk waar die HTML-kode van die bladsy vertoon sal word.

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 4

Identifiseer die werkbalke en panele. As u op "Inspekteer item" klik, sal verskeie panele in die onderste gedeelte van die venster oopmaak. Hier is `n beskrywing van die name en die gebruik van elk van hulle afsonderlik:

Die boonste ry is die "Toolbox". Dit het verskeie ontwikkelaar gereedskap, maar jy moet konsentreer op die een Inspekteur, sê aan die linkerkant. Hou dit gemerk deur die gids (dit moet in blou gekies word).

Onder die nutsbalk sien jy `n enkele ry broodkrummels (in Engels, "broodkrummels") met die HTML-elemente wat die volledige pad van die geselekteerde element aandui.

In die paneel hieronder word die HTML-boom of "Handelsmerkbeskouing" van die bladsy vertoon. In hierdie paneel sal die HTML-kode van die gekose element gekies en gekentreer word.

Die paneel regs wys die kode van die CSS-style sheets op die bladsy.

Prent getiteld Gebruik die Inspeksie-element in Mozilla Firefox Stap 5

Kies `n ander item. Sodra die nutsbalk oop is, is dit maklik om `n ander item te kies. Hier is drie maniere om dit te doen:

Slaan die muisaanwyser oor `n lyn van HTML om die ooreenstemmende element te kies (jy moet Firefox weergawe 34 of later hê). Klik op die HTML-kode om daardie element te kies.

Klik op die opsie `Kies `n element op die bladsy` heel links van die nutsbalk. Die ikoon is `n wyser oor `n vierkant. Beweeg die muisaanwyser oor die bladsy om die item te kies en klik dan om dit te kies.

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 6

Blaai deur die kode. Kliek enige plek in die HTML-paneel. Gebruik die linker en regter pyltjies op u sleutelbord om deur die kode te blaai (u moet Firefox weergawe 39 of later hê). Dit is baie handig vir items wat te klein is om met die hand gekies te word.

Grys HTML-elemente is elemente wat nie op die bladsy vertoon word nie. Dit sluit in kommentaar, sekere nodes soos en ander elemente wat versteek is met die "vertoon" eienskap van CSS.

Klik op die pyltjie wat links van die houers verskyn om die inhoud uit te brei of weg te steek. Om alle inhoud uit te brei, druk en hou die sleutel in ⎇ Alt u ⌥ Opsie wanneer jy kliek.

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 7

Soek vir `n item Gaan na die soekbalk (die een met die ikoon van `n vergrootglas), wat heel regs van die ry van Broodkrummels. Klik op die balk om dit uit te brei en tik dan die HTML-kode wat u wil soek. Terwyl jy tik, sal `n lys van die items wat ooreenstem met die gesoekte teks, verskyn. Klik op een van hulle om die item wat jy soek te kies en skuif die HTML-paneel na die plek waar die kode is.

Deel 2

Wysig die HTML-kode

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 8

Herlaai die bladsy om enige tyd weer te begin. As jy nie veel ondervinding het met ontwikkelaargereedskap nie, moet jy verstaan dat hulle nie permanente veranderinge aanbring nie. Jou wysigings sal net op jou skerm sigbaar wees en sal wees totdat jy die bladsy sluit of dit opdateer. Moenie huiwer om te eksperimenteer nie, al is jy nie seker wat sal gebeur nie.

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 9

Dubbelklik op die HTML-kode om die teks te wysig. Dubbelklik op `n lyn van HTML. Skryf nuwe teks en druk ⌅ Tik om die veranderinge op te slaan.

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 10

Klik op `n ry broodkrummels vir meer opsies. Onthou: die nutsbalk van Broodkrummels is tussen die hele HTML-boom en die boonste nutsbalk. Klik op enige van die elemente in hierdie ry en hou dit gedruk om `n uitgebreide spyskaart oop te maak. Hier is `n gids (onvolledig) van die beskikbare opsies:

Die opsie "Verander as HTML" maak die nodus en al die inhoud van die HTML-boom redigeerbaar, so jy hoef nie elke lyn individueel te wysig nie.

Die opsie "Kopieer interne HTML" kopieer al die inhoud van die nodus, terwyl "Kopieer eksterne HTML" ook die nodus kopieer (byvoorbeeld,

of ).

"Plak →" lei tot verskeie opsies oor waar die gekopieerde teks geplaas moet word. Byvoorbeeld, voor die node of na die eerste kind van die node.

: Hover : aktief en : fokus verander die voorkoms van die element wanneer die gebruiker daarmee saamwerk. Die presiese effek sal bepaal word volgens die CSS-stylblad (redigeerbaar vanaf die paneel aan die regterkant).

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 11

Sleep en laat val Om elemente in die kode te herbestel, klik en hou die HTML totdat `n streep verskyn. Beweeg dit af of op die boom en laat dit los wanneer die gebreekte lyn op die verlangde plek is.

Hiervoor is dit nodig om Firefox 39 of `n latere weergawe te hê.

Prent getiteld Gebruik die Inspect Element in Mozilla Firefox Step 12

Maak die ontwikkelaar se nutsbalk. Om al hierdie pragtige vensters te sluit, druk eenvoudig X in die regter bovenhoek van die nutsbalk, bo die CSS-kodepaneel.

wenke

U kan ook die nutsbalk oopmaak met hierdie opsies in die boonste spyskaart:
Windows: Firefox → Webontwikkelaar → Wys gereedskap
Mac of Linux: Tools → Webontwikkelaar → Wys gereedskap
Firefox 40 het die opsie aangebied om die CSS-paneel te verberg om jou meer ruimte te gee wanneer jy die HTML redigeer. Vind die pylikoon heel regs van die ry broodkrummels wat regs van die soekkas is. Klik op hierdie ikoon om die CSS-paneel te versteek en klik daarop om dit weer uit te brei.
Die CSS paneel kan ook geredigeer word, maar dit is buite die omvang van hierdie gids. U kan `n basiese CSS-tutoriaal op die internet soek.

Wys meer ... (6)

Deel op sosiale netwerke:

Verwante