Pinapayagan ka ng tool ng developer ng Inspect Element sa Firefox na matukoy ang HTML code para sa anumang nakikita mo sa iyong web page. Ang HTML at mga kasamang CSS styleheet ay ganap na mae-edit sa sandaling bukas ang mga tool na ito. Eksperimento sa anumang mga pagbabago na gusto mo, pagkatapos i-refresh ang pahina upang bumalik sa inilaan na hitsura ng web page.
Mga hakbang
Bahagi 1 ng 2: Pag-iinspeksyon ng Mga Sangkap
Hakbang 1. Mag-right click sa anumang elemento ng webpage
Maaari kang mag-right click sa mga imahe, teksto, background, o anumang iba pang elemento. Kung wala kang isang dalawang-pindutan ng mouse, mag-left click habang hawak ang Control.
Hakbang 2. I-click ang Suriin ang Elemento mula sa drop-down na menu
Ang isang toolbar ay dapat na lumitaw sa ilalim ng iyong window. Lilitaw din ang isang pane sa ibaba ng toolbar, ipinapakita ang HTML code ng pahina.
Hakbang 3. Kilalanin ang mga toolbar at pane
Kapag na-click mo ang Inspect Element, maraming mga pane ang magbubukas sa ilalim ng iyong window. Narito ang isang pagkasira ng kanilang mga gamit at pangalan:
- Ang nangungunang hilera ay ang Toolbox Toolbar. Mayroong maraming mga tool sa pag-develop, ngunit interesado kami sa Inspektor sa kaliwa. Panatilihin ang napiling ito (naka-highlight sa asul) para sa buong gabay na ito.
- Sa ibaba ng toolbar, mayroong isang solong hilera ng Breadcrumbs ng mga elemento ng HTML, ipinapakita ang buong landas na nauugnay sa napiling elemento.
- Ipinapakita ng pane sa ibaba ng row na ito ang puno ng HTML o "Markup View" ng pahina. Ang HTML para sa sangkap na iyong pinili ay naka-highlight at nakasentro sa pane na ito.
- Ang pane sa kanan ay nagpapakita ng CSS styleheet para sa pahinang ito.
Hakbang 4. Pumili ng isa pang elemento
Kapag ang toolbar ay bukas, ang pagpili ng ibang elemento ay madali. Narito ang tatlong paraan upang magawa ito:
- Mag-hover sa isang linya ng HTML upang mai-highlight ang kaukulang elemento (nangangailangan ng Firefox 34+). I-click ang HTML upang mapili ang sangkap na iyon.
- I-click ang tool na Piliin ang Element sa dulong kaliwa ng toolbar: ang icon ay isang cursor sa isang parisukat. Ilipat ang iyong cursor sa pahina upang i-highlight ang mga elemento, pagkatapos ay mag-click upang pumili ng isang elemento.
Hakbang 5. Mag-navigate sa pamamagitan ng code
Mag-click saanman sa pane ng HTML. Gamitin ang kaliwa at kanang mga arrow sa iyong keyboard upang lumipat sa code (nangangailangan ng Firefox 39+). Kapaki-pakinabang ito para sa mga elementong masyadong maliit upang mapili nang manu-mano.
- Ang Gray HTML ay nauugnay sa mga elemento na hindi ipinakita sa pahina. Nagsasama ito ng mga komento, ilang mga node tulad ng, at mga elemento na itinago sa pag-aari ng CSS display.
- I-click ang arrow sa kaliwa ng mga lalagyan upang mapalawak o maitago ang mga nilalaman nito. Upang mapalawak ang lahat ng nilalaman, hawakan ang alt="Imahe" o pagpipilian habang nag-click.
Hakbang 6. Maghanap para sa isang elemento
Hanapin ang search bar (magnifying glass glass) sa dulong kanan ng row ng Breadcrumbs. I-click ito upang palawakin ito, pagkatapos ay i-type ang HTML code na iyong hinahanap. Habang nagta-type ka, lilitaw ang isang popup na naglilista ng mga tumutugmang elemento. Mag-click sa isa upang mapili ang sangkap na iyon at i-scroll ang HTML pane sa code nito.
Bahagi 2 ng 2: Pag-edit ng HTML
Hakbang 1. I-refresh ang pahina upang magsimula muli sa anumang oras
Kung bago ka sa mga tool sa web developer, maunawaan na hindi sila gumagawa ng anumang permanenteng pagbabago. Makikita lamang ang iyong mga pag-edit sa iyong screen, at hanggang sa maisara mo lamang ang pahina o i-refresh ito. Huwag mag-atubiling mag-eksperimento kahit na hindi ka sigurado kung ano ang mangyayari.
Hakbang 2. I-double click ang HTML upang mai-edit ang teksto
I-double click ang isang linya ng HTML. Mag-type sa bagong teksto at pindutin ang enter upang i-save ang iyong mga pagbabago.
Hakbang 3. I-click at hawakan ang isang breadcrumb para sa higit pang mga pagpipilian
Tandaan, ang toolbar ng Breadcrumb ay naka-sandwiched sa pagitan ng buong puno ng HTML at ng itaas na toolbar. Mag-click at hawakan ang alinman sa mga elemento sa hilera na ito upang buksan ang isang malawak na menu. Narito ang isang hindi kumpletong gabay sa mga pagpipiliang ito:
- Ginagawa ng "I-edit bilang HTML" ang node at lahat ng nilalaman nito na mai-e-edit sa puno ng HTML, sa halip na i-edit ang bawat linya nang paisa-isa.
- Kinokopya ng "Copy Inner HTML" ang lahat ng nilalaman ng node, habang ang "Copy Outer HTML" ay kinopya din ang node (tulad ng o
- Ang "I-paste →" ay humahantong sa maraming mga pagpipilian para sa kung saan i-paste, tulad ng bago ang node na ito o pagkatapos ng unang anak ng node.
- : hover,: active, at: focus baguhin ang hitsura ng elemento kapag nakikipag-ugnay dito ang gumagamit. Ang eksaktong epekto ay natutukoy ng CSS styleheet (mai-e-edit mula sa kanang-kanang pane).
Hakbang 4. I-drag at i-drop
Upang muling ayusin ang mga elemento sa code, i-click at pindutin nang matagal ang HTML hanggang sa lumitaw ang isang dashing line. Ilipat ito pataas o pababa ng puno at bitawan kung ang dashing line ay nasa nais na lugar.
Kinakailangan nito ang Firefox 39 o mas bago
Hakbang 5. Isara ang toolbar ng developer
Upang isara ang lahat ng mga magarbong bintana na ito, pindutin lamang ang X sa kanang sulok ng toolbar, sa itaas ng pane ng CSS.
Mga Tip
- Maaari mo ring buksan ang toolbar sa mga nangungunang mga pagpipilian sa menu na ito:
- Windows: Firefox → Web Developer → I-toggle ang Mga Tool
- Mac o Linux: Mga Tool → Web Developer → I-toggle ang Mga Tool
- Ipinakilala ng Firefox 40 ang pagpipilian upang maitago ang pane ng CSS upang bigyan ka ng mas maraming puwang habang ini-edit ang HTML. Hanapin ang icon ng arrow sa dulong kanan ng hilera ng Breadcrumbs, sa kanan ng search bar. I-click ang icon na ito upang maitago ang pane ng CSS, at i-click ito muli upang palawakin ito muli.
- Ang CSS pane ay nai-e-edit din, ngunit lampas sa saklaw ng gabay na ito. Ang artikulong ito ay nagtuturo ng mga pangunahing kaalaman sa CSS.
