Met die Inspect Element -ontwikkelaarhulpmiddel in Firefox kan u die HTML -kode bepaal vir alles wat u op u webwerf sien. Die HTML en gepaardgaande CSS -stylblad is volledig bewerkbaar sodra hierdie gereedskap oopgemaak is. Eksperimenteer met die veranderings wat u wil, en verfris dan die bladsy om terug te keer na die beoogde voorkoms van die webwerf.
Stappe
Deel 1 van 2: Inspeksie van elemente
Stap 1. Klik met die rechtermuisknop op enige webbladelement
U kan met die rechtermuisknop op prente, teks, agtergronde of enige ander element klik. As u nie 'n muis met twee knoppies het nie, klik met die linkermuisknop terwyl u Control hou.
Stap 2. Klik op Inspekteer element in die keuselys
'N Werkbalk moet onderaan u venster verskyn. 'N Paneel sal ook onder die werkbalk verskyn, met die HTML -kode van die bladsy.
Stap 3. Identifiseer die werkbalke en ruite
As u op Inspekteer element klik, word verskeie vensters onderaan u venster oopgemaak. Hier is 'n uiteensetting van hul gebruike en name:
- Die boonste ry is die Toolbox Toolbar. Dit het verskeie ontwikkelaarshulpmiddels, maar ons is geïnteresseerd in die inspekteur aan die linkerkant. Hou hierdie geselekteerde (blou gemerk) vir hierdie hele gids.
- Onder die werkbalk is daar 'n enkele Breadcrumbs -ry HTML -elemente wat die volledige pad met betrekking tot die geselekteerde element aandui.
- Die paneel onder hierdie ry toon die HTML -boom of 'Opmerkingsaansig' van die bladsy. Die HTML vir die element wat u gekies het, word in hierdie venster gemerk en gesentreer.
- Die venster regs vertoon die CSS -stylblad vir hierdie bladsy.
Stap 4. Kies 'n ander element
Sodra die werkbalk oop is, is dit maklik om 'n ander element te kies. Hier is drie maniere om dit te doen:
- Beweeg oor 'n HTML -reël om die ooreenstemmende element uit te lig (vereis Firefox 34+). Klik op die HTML om die element te kies.
- Klik op die Select Element -instrument heel links in die werkbalk: die ikoon is 'n wyser oor 'n vierkant. Beweeg die wyser oor die bladsy om elemente uit te lig, en klik dan om 'n element te kies.
Stap 5. Navigeer deur die kode
Klik oral in die HTML -paneel. Gebruik die pyltjies links en regs op u sleutelbord om deur die kode te gaan (vereis Firefox 39+). Dit is handig vir elemente wat te klein is om met die hand te kies.
- Grys HTML hou verband met elemente wat nie op die bladsy vertoon word nie. Dit bevat opmerkings, sekere nodes soos, en elemente wat met die CSS -vertoningseienskappe weggesteek is.
- Klik op die pyltjie links van die houers om die inhoud uit te brei of te verberg. Om alle inhoud uit te brei, hou alt="Beeld" of opsie ingedruk terwyl u klik.
Stap 6. Soek 'n element
Soek die soekbalk (ikoon vergrootglas) heel regs van die broodkrummelsry. Klik hierop om dit uit te brei en tik die HTML -kode in wat u soek. Terwyl u tik, verskyn 'n opspring met bypassende elemente. Klik op een om die element te kies en blaai deur die HTML -paneel na die kode.
Deel 2 van 2: Redigering van die HTML
Stap 1. Herlaai die bladsy om te eniger tyd te begin
As u nuut is in die ontwikkeling van gereedskap vir webontwikkelaars, moet u verstaan dat dit geen permanente veranderinge aanbring nie. U wysigings sal slegs op u skerm sigbaar wees, en slegs totdat u die bladsy toemaak of dit verfris. Moenie huiwer om te eksperimenteer nie, selfs al weet u nie wat gaan gebeur nie.
Stap 2. Dubbelklik op die HTML om teks te wysig
Dubbelklik op 'n reël HTML. Tik die nuwe teks in en druk enter om u veranderinge te stoor.
Stap 3. Klik en hou 'n broodkrummels in vir meer opsies
Onthou dat die Breadcrumb -werkbalk tussen die volledige HTML -boom en die boonste werkbalk geleë is. Klik en hou op een van die elemente in hierdie ry om 'n uitgebreide spyskaart oop te maak. Hier is 'n onvolledige gids vir hierdie opsies:
- "Wysig as HTML" maak die knoop en al die inhoud daarvan bewerkbaar in die HTML -boom, in plaas daarvan dat u elke reël individueel hoef te wysig.
- "Kopieer innerlike HTML" kopieer al die inhoud van die knoop, terwyl "Kopieer uiterlike HTML" ook die knoop (soos of
- "Plak →" lei tot verskeie opsies om te plak, soos voor hierdie knoop of na die eerste kind van die knoop.
- : sweef,: aktief en: fokus verander die voorkoms van die element wanneer die gebruiker daarmee interaksie het. Die presiese effek word bepaal deur die CSS-stylblad (bewerkbaar in die regterkantste venster).
Stap 4. Sleep en laat val
Om die elemente in die kode te herrangskik, hou die HTML ingedruk totdat 'n stippellyn verskyn. Beweeg dit op of af in die boom en laat los as die stippellyn op die gewenste plek is.
Dit vereis Firefox 39 of later
Stap 5. Maak die ontwikkelaar se nutsbalk toe
Om al hierdie pragtige vensters toe te maak, druk net op die X in die regterkantste hoek van die werkbalk, bo die CSS -venster.
Wenke
- U kan ook die nutsbalk oopmaak met die boonste menu -opsies:
- Windows: Firefox → Webontwikkelaar → Skakel gereedskap
- Mac of Linux: Gereedskap → Webontwikkelaar → Wisselgereedskap
- Firefox 40 het die opsie bekendgestel om die CSS -paneel te verberg om u meer ruimte te gee tydens die redigering van HTML. Soek die pyltjie -ikoon heel regs van die broodkrummels, regs van die soekbalk. Klik op hierdie ikoon om die CSS -paneel te verberg, en klik weer daarop om dit weer uit te brei.
- Die CSS -paneel is ook bewerkbaar, maar dit is buite die omvang van hierdie gids. Hierdie artikel leer die basiese beginsels van CSS.
