Karamihan sa mga tao ay walang kamalayan na mayroong isang kayamanan ng mga tool ng developer sa kanilang pagtatapon, at na ito ay nakatago sa kanilang paboritong browser.
Ang bawat web browser ay nag-aalok ng mga tool ng developer upang tingnan ang coding ng isang website, gayunpaman, ito ay isang dayuhang entity sa karaniwang gumagamit ng internet. Pagkatapos ng lahat, sino ang gustong tumingin sa coding ng isang website, di ba?
Sa lumalabas, maraming bagay ang matututunan mo sa pamamagitan ng pagtingin sa coding ng isang website. Magbasa para malaman kung ano ang inaalok ng feature na inspect element at kung paano ito gamitin.
Paano Gamitin ang Inspect Element sa isang Partikular na Browser
Karamihan sa mga browser ay may mga tool upang siyasatin ang mga elemento ng isang website, ngunit lahat sila sa pangkalahatan ay gumagana sa parehong paraan.
Paggamit ng Inspect Element sa Google Chrome
- Buksan ang website na gusto mong suriin.
- Mag-right click kahit saan sa page at piliin Siyasatin.
O
- Mag-click sa tatlong patayong tuldok sa kanang sulok ng iyong toolbar.
- Pumunta sa Higit pang Mga Tool.
- Pumili Mga Tool ng Developer.
O
- pindutin ang F12 keyboard shortcut key sa PC o CMD + Options + I sa isang Mac.
Paggamit ng Inspect Element sa Microsoft Edge
- Magbukas ng website.
- Mag-click sa tatlong patayong tuldok sa kanang sulok sa itaas ng toolbar ng browser.
- Mag-scroll pababa at mag-click sa Higit pang Mga Tool.
- Mag-click sa Mga Tool ng Developer.
O
- Mag-right click kahit saan sa website.
- Mag-click sa Siyasatin.
O
- Pindutin Ctrl + Shift + I.
Ang alinman sa tatlong pamamaraang ito ay magbibigay sa iyo ng parehong resulta.
Kung ginawa mo ito nang tama, makakakita ka ng bagong pane na bubukas sa ibaba ng iyong browser. Ito ang Mga Tool ng Developer at kasama ang tab na Mga Elemento. Ito ang tool na kailangan mo upang Siyasatin ang Element.
Magbubukas ang panel sa ibaba ng iyong screen bilang default, ngunit maaari mong baguhin anumang oras kung paano ito lalabas. Sundin ang mga simpleng hakbang na ito upang muling iposisyon ang panel ng Mga Tool ng Developer:
- Mag-click sa tatlong patayong tuldok sa itaas na sulok ng panel ng Mga Tool ng Developer.
- Pumili ng gilid ng pantalan (kaliwa, ibaba, o kanan) o i-undock sa isang hiwalay na window.
Ang pag-hover sa cursor sa tabi ng gilid ng panel frame ng Developer Tools at pag-drag ay magpapaliit o magpapalawak sa workspace. Halimbawa, kung pipiliin mong i-dock ang panel sa kanang bahagi ng window ng browser, subukang mag-hover sa kaliwang hangganan. Maaari mong i-drag ang panel upang baguhin ang laki nito kapag nakita mo ang arrow cursor.
Paggamit ng Inspect Element (OS Specific)
Bagama't marami sa mga hakbang na kasangkot ay maaaring saklaw sa pamamagitan lamang ng pagpapakita sa iyo kung paano gamitin ang Inspect Element sa browser, kung saan ito umiiral sa unang lugar, ngunit ipapakita namin sa iyo kung paano sa karamihan ng OS pa rin.
Paano Gamitin ang Inspect Element sa isang Chromebook
Ang default na browser sa isang Chromebook ay Google, kaya sundin ang mga tagubilin ng Chrome browser upang ma-access Suriin ang Elemento. Narito ang isang maliit na refresher course para sa iyo:
- Magbukas ng website.
- Mag-click sa tatlong patayong linya sa kanang sulok sa itaas ng toolbar.
- Pumili Higit pang Mga Tool.
- Mag-click sa Mga Tool ng Developer.
Maaari mo ring gamitin ang right-click na paraan o F12 function key upang mas mabilis na makarating sa Developer Tools.
Paano Gamitin ang Inspect Element sa isang Android Device
Ang pagpapatakbo ng Inspect Element sa isang Android device ay bahagyang naiiba. Tingnan kung paano makapunta sa Inspect Element panel sa Android:
- pindutin ang F12 function key.
- Pumili I-toggle ang Device Bar.
- Piliin ang Android device mula sa drop-down na menu.
Kapag pumili ka ng partikular na Android device, mapapansin mong naglo-load ang isang mobile na bersyon ng website. Mula dito, libre mong gamitin ang feature na Inspect Element sa iyong Android device mula sa ginhawa ng iyong desktop.
Gumagana ang paraang ito para sa parehong mga browser ng Chrome at Firefox dahil mayroon silang feature sa kanilang Mga Tool ng Developer na tinatawag na Device Simulation.
Gumagana rin ito sa parehong paraan para sa mga iPhone device. Kailangan mo lang piliin ang tama sa drop-down na menu.
Paano Gamitin ang Inspect Element sa Windows
Ang Inspect Element tool ay hindi kinakailangang partikular sa OS ngunit partikular sa browser. Ibig sabihin, ang Developer Tools ay isang feature ng browser na ginagamit mo at hindi naman Windows. Gayunpaman, maaari kang pumunta sa panel ng Inspect Element kahit aling browser ang iyong pinapaboran.
Kung gumagamit ka ng Windows OS, malamang na gamitin mo rin ang browser ng Microsoft Edge. Tingnan kung paano i-access ang Inspect Element sa MS Edge:
- Buksan ang website na gusto mong suriin.
- I-tap ang tatlong patayong tuldok sa sulok ng window ng browser.
- Mag-scroll pababa at piliin Higit pang Mga Tool.
- Mag-click sa Mga Tool ng Developer.
Maaari mo ring gamitin ang F12 function key kung gusto mong mas mabilis na ma-access ang Inspect Element. Gayundin, gumagana rin ang pag-right-click sa web page at pagpili sa Inspect.
Paano Gamitin ang Inspect Element sa isang Mac
Kung gumagamit ka ng Mac, malamang na Safari ang napili mong browser. Ang pagbubukas ng Inspect Elements sa Safari ay bahagyang naiiba kaysa sa Chrome at Firefox. Ngunit ito ay kasing simple ng mga hakbang na ito:
- Buksan ang Safari browser.
- Mag-click sa Safari sa tab na header.
- Pumili Mga Kagustuhan mula sa drop-down na menu.
- Mag-click sa Advanced icon ng gear na matatagpuan sa tuktok ng screen.
- Lagyan ng check ang kahon na nagsasabing Ipakita ang Develop menu sa menu bar.
Ang pagdaan sa mga hakbang na ito ay nagbibigay-daan sa tampok na Inspect Element sa iyong browser. Kung hindi mo muna i-enable ang Inspect Element, hindi mo makikita ang opsyon kapag nagbukas ka ng website.
Pagkatapos mong makumpleto ang hakbang na ito, i-right click lang sa anumang bukas na web page at piliin ang Inspect. Maaari mo ring gamitin ang command ng quick keys: CMD + Option + I (siyasatin).
Paano Gamitin ang Inspect Element sa isang iPhone
Gusto mo bang gamitin ang feature na Inspect Elements para makita kung paano lumalabas ang isang mobile na bersyon ng isang web page sa isang iPhone? Magagawa mo ito at higit pa sa ilang simpleng hakbang. Ngunit bago ka tumingin sa isang elemento, kailangan mong paganahin Web Inspector para sa iyong iOS device:
- Pumunta sa Mga setting.
- Ngayon, pumili Safari.
- Mag-scroll sa ibaba at mag-tap sa Advanced na Menu.
- Ngayon, i-tap ang toggle switch para i-on Web Inspector.
Gayundin, kailangan mong tiyakin na ang Develop menu ay pinagana sa iyong Mac:
- Buksan ang Safari.
- Pumili Safari mula sa mga nangungunang header.
- Susunod, mag-click sa Mga Kagustuhan.
- Pagkatapos, mag-click sa Advanced.
- Lagyan ng check ang kahon na nagsasabing Ipakita ang Develop menu sa menu bar.
Pagkatapos i-enable ang parehong iOS mobile device at Mac, makikita mo ang Develop menu sa tuktok na bar sa iyong Mac. Mag-click dito upang makita ang konektadong iPhone at ang web page na aktibo sa device. Ang pagpili sa web page ay magbubukas din ng isang Web Inspector window para sa parehong pahina sa iyong Mac screen.
Gayunpaman, tandaan na ang mga direksyong ito ay gumagana lamang para sa Safari na nagpapatakbo ng Mac, hindi Safari sa Windows.
Paano Gamitin ang Inspect Element sa Google Forms
Maaari mo ring gamitin ang Inspect Element sa Google Forms. Gayunpaman, kung naghahanap ka ng mga sagot sa isang pagsusulit, wala kang swerte. Hindi mo mahahanap ang mga sagot na naka-embed sa coding. Maaari mo lang tingnan ang mga sagot kung ikaw ang gumawa o editor ng form. Sa alinmang paraan, kung ikaw ay isang mag-aaral na sumasagot sa isang pagsusulit sa Google Forms, makikita mo lamang ang sarili mong mga sagot.
- Maaari kang mag-right click sa form at pumili Siyasatin para makita ang lahat ng code para sa form.
Paano Gamitin ang Inspect Element Kapag Ito ay Naka-block
Paminsan-minsan, makikita mo na hindi mo masusuri ang isang web page at ang pagpili ng Inspect ay kulay abo kung susubukan mong mag-right click dito. Maaari mong isipin na ito ay naka-block, ngunit maraming mga paraan sa paligid nito:
Paraan 1 - I-off ang Javascript
- Pumasok sa Mga setting.
- Hanapin "JavaScript”.
- Patayin JavaScript.
Paraan 2 – I-access ang Mga Tool ng Developer sa Mahabang Daan
Sa halip na i-right-click ang mouse upang Siyasatin, gawin ito:
- Pumunta sa Mga setting sa iyong browser.
- Pumili Higit pang Mga Tool.
- Mag-scroll pababa at mag-click sa Mga tool ng developer.
Paraan 3 – Gamit ang Function Key
Maaari mo ring subukang gamitin ang F12 function key sa mga web page na humaharang sa right-click para sa Inspect.
Maaaring kailanganin mong subukan ang lahat ng mga pamamaraang ito bago makita ang isa na gumagana para sa iyo. Bilang huling paraan, maaari mo ring subukang tingnan ang source code sa pamamagitan ng pag-type view-source: [ilagay ang buong url]. 
Paano Gamitin ang Inspect Element sa Discord
Ang pagsuri sa iyong coding sa Discord ay isang madaling proseso. Gamitin lang ang Ctrl + Shift + I utos o F12 key sa isang pahina ng Discord.
Paano Gamitin ang Inspect Element sa isang Chromebook ng Paaralan
Kung ang iyong Chromebook ay ibinigay ng isang paaralan, ang paggamit ng feature na Inspect Element ay may kasamang ilang simpleng hakbang:
- Mag-right-click o mag-tap gamit ang dalawang daliri sa web page at piliin Siyasatin.
- Pindutin Ctrl + Shift + I.
- Subukan at gamitin ang view-source:[url] na pamamaraan, gaya ng “tingnan ang source://www.wikipedia.com", nang walang mga quotes.
Gayunpaman, hinaharangan ng ilang paaralan at organisasyon ang feature na ito. Kaya, kung hindi ito gumagana para sa iyo, maaaring kailanganin mong makipag-ugnayan sa iyong organisasyon o administrator ng paaralan.
Paano Gamitin ang Inspect Element para Makahanap ng Mga Sagot
Maaari mong gamitin ang Inspect Element upang makahanap ng mga sagot sa iba't ibang bagay tulad ng:
- Pag-preview ng disenyo ng site sa mga mobile device.
- Alamin ang mga keyword na ginagamit ng mga kakumpitensya.
- Mga pagsubok sa bilis.
- Pagbabago ng teksto sa isang web page.
- Maghanap ng mabilis na mga halimbawa upang ipakita sa mga developer kung ano ang kailangan mo.
Kapag inilunsad mo ang panel ng Inspect Element, makikita mo ang lahat ng coding para sa website. Kasama rito ang lahat ng JavaScript, CSS, at HTML coding na nakapaloob dito. Ito ay tulad ng pagtingin sa source coding ng isang web page, maliban kung maaari kang gumawa ng mga pagbabago sa code. Dagdag pa, makikita mo ang anumang mga pagbabagong ipinatupad nang real-time.
Ginagawang napakahalaga ng tool na ito para sa mga marketer, designer, at developer na tingnan ang anumang mga pagbabago sa disenyo bago tapusin ang mga ito. Gayunpaman, ang paggawa ng mga pagbabago sa coding gamit ang Inspect Element ay hindi magtatagal magpakailanman. Kapag na-reload mo ang page, babalik ito sa default nitong estado.
Karagdagang FAQ
Paano Ko Gagamitin ang Inspect Element Command para Makahanap ng Mga Sagot?
Ang tanging paraan upang makahanap ng mga sagot gamit ang feature na Inspect Element ay kung agad itong ipapakita ng website pagkatapos isumite. Sa pagkakataong ito, ang mga sagot ay naroroon sa coding.
Kung hindi, tinitingnan mo lang ang coding para sa pagsusulit o pagsubok kapag ginamit mo ang feature na Inspect Element, pati na rin ang anumang mga sagot na isusumite mo.
Ilegal ba ang Inspect Element?
Hindi, ang Inspect Element tool ay hindi ilegal, ito ay dinisenyo para sa mga web developer. Ang pagtingin sa source code para sa isang website ay hindi labag sa batas, ito ay nagiging isyu lamang kung gagamitin mo ang impormasyong nakalap para sa mga hindi kanais-nais na layunin, tulad ng pagtatangka sa mga pagsasamantala, atbp.
Posible bang I-disable ang Inspect Element sa Browser?
Ang maikling sagot ay hindi.
Hindi mo maaaring paganahin ang Inspect Element sa isang browser. Ngunit maaari kang magtakda ng mga parameter na pumipigil sa mga user sa paggawa ng ilang partikular na pagkilos tulad ng pag-right-click sa isang web page. Mayroong maraming mga tutorial online upang itakda ang mga tamang script upang hindi paganahin ang ilang mga kaganapan. Gayunpaman, hindi mo talaga ma-disable ang feature na Inspect Element sa kabuuan nito.
Alamin ang Inards ng isang Web Page
Ang pagsuri sa feature na Inspect Element ng isang web page ay malamang na isang developer tool na hindi mo alam na kailangan mo – kahit na hindi ka mismo developer. Mayroon itong napakaraming disenyo at mga application sa marketing na maaaring gawing mas maayos ang iyong website. At baka bigyan ka ng isang kalamangan sa isang katunggali.
Para saan mo ginagamit ang Inspect Element? Sabihin sa amin ang tungkol dito sa seksyon ng mga komento sa ibaba.
