Tingnan ang HTML at CSS ng Anumang Web Page
Ang website ay binuo na may mga linya ng code , ngunit ang resulta ay tiyak na mga pahina na may mga larawan, video, mga font at higit pa. Upang baguhin ang isa sa mga sangkap na ito o tingnan kung ano ang binubuo nito, kailangan mong hanapin ang partikular na linya ng code na kinokontrol ito. Maaari mong gawin iyon gamit ang isang tool ng inspeksyon ng sangkap.
Ang karamihan sa mga web browser ay hindi nagagawa mong i-download ang isang tool sa inspeksyon o mag-install ng isang add-on. Sa halip, hinayaan mong i-right-click mo ang elemento ng pahina at piliin ang Inspect or Inspect Element . Gayunpaman, maaaring maging kaunti ang proseso sa iyong browser.
Suriin ang Mga Elemento sa Chrome
Pinapayagan ka ng pinakabagong mga bersyon ng Google Chrome na siyasatin ang pahina sa ilang mga paraan, na lahat ay gumagamit ng mga built-in na Chrome DevTools nito:
- Mag-right-click ng isang bagay sa pahina (o isang blangko na lugar) at piliin ang Inspect
- Ipasok ang Ctrl + Shift + I keyboard shortcut
- Gamitin ang menu ng Chrome upang ma-access ang Higit pang Mga Tool> Mga pagpipilian sa tool ng developer
Pinapayagan ka ng Chrome DevTools na gawin ang mga bagay tulad ng madaling kopyahin o i-edit ang mga linya ng HTML o itago o tanggalin ang mga elemento nang buo (hanggang sa muling i-load ang pahina).
Sa sandaling magbukas ang DevTools sa gilid ng pahina, maaari mong baguhin kung saan ito nakaposisyon, i-pop ito sa pahina, maghanap sa lahat ng mga file ng pahina, piliin ang mga elemento mula sa pahina para sa tukoy na pagsusuri, kopyahin ang mga file at mga URL, at kahit ipasadya ang isang grupo ng mga setting.
Suriin ang Mga Elemento sa Firefox
Tulad ng Chrome, may ilang iba't ibang paraan ang Firefox upang buksan ang tool na tinatawag na Inspektor:
- Mag-right click sa isang blangko na lugar sa pahina o pumili ng isang elemento, at piliin ang Inspect Element
- Ipasok ang Ctrl + Shift + T o Ctrl + Shift + ako gamit ang keyboard
- Mula sa menu ng Firefox, i-click ang Developer > Inspector
- Mula sa menu ng Mga Tool , i-click ang Web Developer> Inspector
Habang inililipat mo ang iyong mouse sa iba't ibang mga elemento sa Firefox, awtomatikong nahanap ng tool ng Inspector ang impormasyon ng source code ng elemento. Mag-click sa isang elemento at titigil ang "on-the-fly search" at maaari mong suriin ang elemento mula sa window ng Inspector.
Mag-right-click ang isang elemento upang mahanap ang lahat ng suportadong mga kontrol. Maaari mong gawin ang mga bagay tulad ng pag-edit ng pahina bilang HTML, kopyahin o i-paste ang panloob o panlabas na HTML code, ipakita ang mga katangian ng DOM, screenshot o tanggalin ang node, madaling mag-apply ng mga bagong katangian, tingnan ang lahat ng CSS ng pahina, at higit pa.
Suriin ang Mga Sangkap sa Opera
Maaari ring siyasatin ng Opera ang mga elemento, kasama ang tool na DOM Inspector na kapareho sa Chrome. Narito kung paano makarating dito:
- Gamitin ang keyboard shortcut na Ctrl + Shift + I
- Mag-navigate sa Menu> Higit pang Mga Tool> Ipakita ang menu ng Developer , at pagkatapos ay buksan ang menu sa pamamagitan ng Menu> Developer> Mga Tool ng Developer
- Mula sa menu ng right-click sa anumang elemento sa pahina, piliin ang Suriin ang elemento
Suriin ang Mga Elemento sa Internet Explorer
Ang isang katulad na inspeksyon ng tool na elemento, na tinatawag na Mga Tool ng Developer, ay magagamit sa Internet Explorer:
- Pindutin ang F12 sa keyboard
- Gamitin ang Opsyon> Mga Tool> F12 Developer Menu (pindutin ang Alt + X kung hindi mo makita ang menu ng Mga Tool )
- Mag-right-click sa pahina at i-click ang Elemento ng Siyasatin
Ang IE ay mayroong tool na Pumili ng elemento sa bagong menu na hinahayaan kang mag-click sa anumang elemento ng pahina upang makita ang mga detalye ng HTML at CSS nito. Maaari mo ring madaling paganahin / paganahin ang pag-highlight ng elemento habang nagba-browse ka sa tab ng DOM Explorer .
Tulad ng iba pang mga tool ng inspector ng elemento sa mga browser sa itaas, hinahayaan ka ng Internet Explorer na i-cut, kopyahin, at i-paste ang mga elemento pati na rin i-edit ang HTML, idagdag ang mga katangian, kopyahin ang mga elemento na may naka-attach na mga estilo, at higit pa.