Ang "Inspect Element" ay isang tool ng developer sa browser ng Firefox na maaari mong gamitin upang subaybayan ang HTML code sa anumang web page. Ang mga style style ng HTML at CSS ng isang web page ay maaaring mai-edit gamit ang "Inspect Element". Maaari mong subukang i-edit ang isang pahina subalit nais mo at ibalik ito sa dati, sa pamamagitan lamang ng paglo-load ng na-edit na webpage.
Hakbang
Bahagi 1 ng 2: Suriin ang Mga Elemento
Hakbang 1. I-update ang Firefox (opsyonal)
Posibleng hindi mo ma-access ang mga tampok na tinalakay sa artikulong ito kung gumagamit ka ng isang mas lumang bersyon ng Firefox. Ang pag-update ay awtomatikong mai-install kapag tiningnan mo kung aling bersyon ng Firefox ang iyong ginagamit.
Ang Firefox 9 at mga naunang bersyon ay walang tool na "Suriin ang Elemento"
Hakbang 2. Mag-right click sa anumang elemento ng webpage
Maaari kang mag-right click sa anumang imahe, teksto, background, o elemento. Kung ang iyong mouse ay may isang pindutan lamang, isang kumbinasyon ng pag-left-click at ang Control key ay magreresulta sa isang pag-right click.
Hakbang 3. I-click ang "Suriin ang Elemento" mula sa drop-down na menu
Lilitaw ang isang toolbar sa ilalim ng window. Ang isang panel sa ibaba ng toolbar ay lilitaw din at ipapakita ang HTML code sa aktibong pahina.
Hakbang 4. Kilalanin ang mayroon nang mga toolbar at panel
Kapag ginamit mo ang "Inspect Element", maraming mga panel ang magbubukas sa ibaba ng window ng browser. Inilalarawan ng sumusunod ang mga pangalan at pag-andar ng mga toolbar at panel sa "Inspect Element":
- Sa itaas na hilera ay ang Toolbox Toolbar. Maraming mga tool na mahahanap dito, ngunit magtutuon kami sa pindutan ng Inspektor sa kaliwa. Tiyaking aktibo ang pindutang ito (ipinahiwatig ng kulay ng pindutan na nagiging asul kapag aktibo) sa buong gabay na ito.
- Sa ibaba nito, mayroong isang linya ng mga breadcrumb ng mga elemento ng HTML na nagpapahiwatig ng lokasyon ng kasalukuyang napiling elemento.
- Ipinapakita ng pane sa ilalim ng mga pag-navigate ang puno ng HTML o "Markup View" ng web page. Ang HTML ng napiling elemento ay mamarkahan at nakasentro sa pane na ito.
- Ipinapakita ng pane sa kanan ang CSS styleheet ng kasalukuyang web page.
Hakbang 5. Pumili ng isa pang elemento
Kapag ang toolbar ay bukas, madali kang pumili ng iba pang mga elemento. Mayroong tatlong paraan upang magawa ito:
- Mag-hover sa isang linya ng HTML upang markahan ang napiling elemento (ang tampok na ito ay nangangailangan ng Firefox 34+). I-click ang HTML upang mapili ang sangkap na iyon.
- I-click ang tool na "Piliin ang Element" sa kaliwang sulok ng toolbar: mayroon itong isang hugis na cursor na icon sa itaas ng isang kahon. Ilipat ang cursor sa web page upang markahan ang isang elemento at i-click upang mapili ito.
Hakbang 6. Subaybayan ang HTML code
Mag-click saanman sa pane ng HTML. Gamitin ang kaliwa at kanang direksyon ng mga key sa keyboard upang lumipat mula sa code patungo sa code (ang tampok na ito ay nangangailangan ng Firefox 39+). Kapaki-pakinabang ang pamamaraang ito para sa pagpili ng mga elemento na napakaliit upang mapili gamit ang cursor.
- Ang gradong HTML ay nagpapahiwatig ng mga elemento na hindi ipinakita sa pahina. Ang mga elemento na kasama dito ay mga komento, tulad ng mga node, at iba pang mga elemento na nakatago ng pag-aari ng CSS display.
- I-click ang arrow sa kaliwa ng kahon upang ipakita o maitago ang nilalaman. Upang maipakita ang buong nilalaman, pindutin nang matagal ang alt="Imahe" o pagpipilian habang ina-click ang arrow.
Hakbang 7. Hanapin ang elemento
Hanapin ang patlang ng paghahanap (icon na hugis loop) sa dulong kanang sulok ng hilera ng mga breadcrumbs. Mag-click upang palawakin ang patlang ng paghahanap at i-type ang HTML code na nais mong hanapin. Habang nagta-type ka, ipapakita ang isang pop-up na nagpapakita ng mga tumutugmang resulta ng paghahanap. Mag-click sa isang elemento mula sa mga resulta ng paghahanap at i-scroll ang HTML pane sa code na iyong hinahanap.
Bahagi 2 ng 2: Pag-edit ng HTML
Hakbang 1. I-reload ang pahina upang magsimulang muli
Kung bago ka sa mga tool sa pagbuo ng website, magkaroon ng kamalayan na hindi ka gagawa ng permanenteng mga pagbabago sa mga pahina na na-e-edit mo. Lilitaw lamang ang iyong mga pag-edit sa iyong screen hanggang sa muling i-reload o isara ang pahina. Huwag mag-atubiling mag-eksperimento kahit na hindi mo alam kung ano ang mangyayari.
Hakbang 2. I-double click ang HTML upang mai-edit
I-double click ang inline HTML. I-type ang bagong teksto at pindutin ang enter upang i-save ang mga pagbabago.
Hakbang 3. I-click at hawakan ang tool sa breadcrumb upang maglabas ng maraming mga pagpipilian
Tandaan na ang toolbar ng breadcrumb ay nakaupo sa pagitan ng puno ng HTML at ng toolbar sa itaas nito. I-click at hawakan ang isang tool sa hilera na ito upang buksan ang higit pang mga menu. Nasa ibaba ang isang pahiwatig ng mga magagamit na pagpipilian (hindi kumpleto):
- Pinapayagan ka ng "I-edit bilang HTML" na i-edit ang lahat ng nilalaman ng HTML mula sa puno ng HTML nang direkta sa halip na i-edit ang bawat linya.
- Kinokopya ng "Copy Inner HTML" ang buong nilalaman sa loob ng node, habang ang "Copy Outer HTML" ay kinopya ang mga nilalaman at node (tulad ng o
- Nagdadala ang "I-paste →" ng maraming mga pagpipilian para sa kung saan i-paste ang kopya, tulad ng bago ang node o pagkatapos ng unang anak ng node.
- : hover,: active, at: focus baguhin ang hitsura ng elemento kapag nakikipag-ugnay ang gumagamit. Ang mga nabagong epekto ay tinukoy mula sa CSS styleheet (Nae-edit mula sa panel sa kanan).
Hakbang 4. I-drag at i-drop
Upang muling ayusin ang mga elemento sa code, mag-click at hawakan ang HTML hanggang sa lumitaw ang isang tuldok na linya. Ilipat ang linya pataas at pababa sa puno at bitawan ang pindutan ng mouse kapag ang linya ay kung saan mo nais ito.
Ang tampok na ito ay nangangailangan ng Firefox 39 at mas bago
Hakbang 5. Isara ang toolbar ng developer
Upang isara ang buong window ng Inspect Element, i-click ang X button sa kanang sulok sa itaas ng toolbar na matatagpuan sa itaas ng CSS panel.
Mga Tip
- Maaari mo ring buksan ang toolbar mula sa mga pagpipilian sa menu sa tuktok ng window:
- Windows: Firefox → Web Developer → I-toggle ang Mga Tool
- Mac o Linux: Mga Tool → Web Developer → I-toggle ang Mga Tool
- Ang Firefox 40 ay may pagpipilian upang maitago ang panel ng CSS upang magkaroon ka ng mas maraming silid upang mai-edit ang HTML. Hanapin ang icon ng arrow sa kanang sulok ng row ng mga breadcrumbs at sa kanan ng patlang ng paghahanap. I-click ang icon na ito upang maitago ang panel ng CSS at i-click muli upang ilabas ito.
- Maaari mo ring i-edit ang mga CSS panel, ngunit hindi nakalista ang mga ito sa artikulong ito. Maaari kang makahanap ng mga tagubilin para sa pag-edit ng CSS code sa internet.
