Nais mo bang pansamantalang i-edit ang isang webpage upang makita kung paano ito tumingin sa mga partikular na kulay, mga font, estilo, atbp Posible sa isang tool na mayroon na sa iyong browser na tinatawag na Inspect Element. Ito ay isang pangarap na matupad para sa lahat ng mga gumagamit ng DIY kapag nakita nila ang tungkol dito. Sa artikulong ito, ipapakita namin sa iyo ang mga pangunahing kaalaman sa pag-inspeksyon ng elemento at kung paano gamitin ito sa iyong WordPress site.
Ano ang Inspect Element o Mga Tool ng Developer?
Ang mga modernong web browser tulad ng Google Chrome at Mozilla Firefox ay may built-in na mga tool na nagpapahintulot sa mga developer ng web na mag-debug ng mga error. Ipinakikita ng mga tool na ito ang HTML, CSS, at JavaScript code para sa isang pahina at kung paano isinasagawa ng browser ang code.
Paggamit ng tool ng Inspect Element, maaari mong i-edit ang HTML, CSS, o JavaSCript code para sa anumang webpage at makita ang iyong mga pagbabago nang live (lamang sa iyong computer).
Para sa isang may-ari ng website ng DIY, makakatulong ang mga tool na ito na i-preview mo kung paano ang hitsura ng isang disenyo ng site nang hindi talaga ginagawa ang mga pagbabago para sa lahat.
Para sa mga manunulat, ang mga tool na ito ay kahanga-hanga dahil maaari mong madaling baguhin ang personal na pagkilala ng impormasyon kapag kinuha ang iyong mga screenshot eliminating ang pangangailangan upang lumabo ang mga item nang sama-sama.
Para sa mga ahente ng suporta, ito ay isang mahusay na paraan upang makilala ang error na maaaring magdulot ng iyong mga gallery na hindi ma-load o ang iyong mga slider upang hindi gumana ng maayos.
Sinisimulan lamang natin ang ibabaw ng mga kaso ng paggamit. Siyasatin ang sangkap ay napakalakas.
Sa artikulong ito, kami ay tumutuon sa Inspect Element sa Google Chrome dahil iyan ang aming browser ng pagpili. Ang Firefox ay may sariling mga kasangkapan sa pag-develop na maaari ring mahihirapan sa pamamagitan ng pagpili ng siyasatin ang elemento mula sa menu ng browser.
Handa? Magsimula na tayo.
Paglulunsad ng Elemento at Paghanap ng Code
Maaari mong ilunsad ang inspect element tool sa pamamagitan ng pagpindot sa CTRL + Shift + I key sa iyong keyboard. Kung maaari kang mag-click kahit saan sa isang web page at piliin ang siyasatin ang elemento mula sa menu ng browser.
Ang split window ng iyong browser ay bubukas sa dalawa, at ipapakita ng mas mababang window ang source code ng web page.
Ang window ng tool ng developer ay higit na nahahati sa dalawang bintana. Sa iyong kaliwa, makikita mo ang HTML code para sa pahina. Sa pane sa kanan, makikita mo ang mga panuntunan ng CSS.
Habang inililipat mo ang iyong mouse sa pinagmulan ng HTML makikita mo ang apektadong lugar na naka-highlight sa web page. Mapapansin mo rin ang pagbabago ng mga patakaran ng CSS upang ipakita ang CSS para sa elementong iyong tinitingnan.
Maaari mo ring gawin ang mouse pointer sa isang elemento sa web page, i-right click at piliin ang siyasatin ang elemento. Ang sangkap na iyong itinuturo sa ay i-highlight sa source code.
Pag-edit at Pag-debug sa Code sa Pagmasdan ang Element
Ang parehong HTML at CSS sa pag-inspect window ng elemento ay mae-edit. Maaari kang mag-double click kahit saan sa HTML source code at i-edit ang code na gusto mo.
Maaari mo ring i-double-click at i-edit ang anumang mga katangian at estilo sa pane ng CSS. Upang magdagdag ng isang custom na tuntunin sa pag-click mag-click sa + na icon sa tuktok ng pane ng CSS.
Habang gumagawa ka ng mga pagbabago sa CSS o HTML ang mga pagbabago ay makikita agad sa browser.
Tandaan, na ang anumang mga pagbabagong ginawa mo dito ay hindi nai-save kahit saan. Siyasatin ang sangkap ay isang tool sa pag-debug, at hindi ito isulat ang iyong mga pagbabago pabalik sa mga file sa iyong server. Nangangahulugan ito na kung i-refresh mo ang pahina, mawawala ang lahat ng iyong mga pagbabago.
Upang aktwal na gawin ang mga pagbabago, kailangan mong i-edit ang stylesheet ng iyong WordPress tema o kaugnay na template upang idagdag ang mga pagbabago na nais mong i-save.
Bago mo simulan ang pag-edit ng iyong umiiral na tema ng WordPress gamit ang tool ng Inspect Element, siguraduhin na i-save mo ang lahat ng iyong mga pagbabago sa pamamagitan ng paglikha ng tema ng bata.
Madaling Maghanap ng mga Mali Sa Iyong Site
Ang inspeksyon ng elemento ay may lugar na tinatawag na Console na nagpapakita ng lahat ng mga error na umiiral sa iyong website. Kapag sinusubukang i-debug ang isang error o humihiling ng suporta mula sa mga may-akda ng plugin, palagi itong nakakatulong upang tumingin dito upang makita kung ano ang mga error.
Halimbawa, kung ikaw ay isang customer ng OptinMonster na nagtataka kung bakit hindi naglo-load ang iyong optin, maaari mong madaling mahanap ang problema na “hindi tumutugma ang iyong slug ng pahina”.
Kung ang iyong sharebar ay hindi gumagana ng maayos, pagkatapos ay maaari mong makita na mayroong error sa JavaScript.
Ang mga tool tulad ng Inspect Element Console at SupportAlly ay tumutulong sa iyo na makakuha ng mas mahusay na suporta sa customer dahil ang koponan ng teknikal na suporta ay nag-ibig ng mga customer na nagsasagawa ng inisyatibo sa pagbibigay ng detalyadong feedback ng isyu.
Umaasa kami na ang artikulong ito ay nakatulong sa iyo na matutunan ang mga pangunahing kaalaman sa pag-inspeksyon ng elemento at kung paano gamitin ito sa iyong site ng WordPres. Maaari mo ring tingnan ang default WordPress na nabuong CSS cheat sheet upang pabilisin ang iyong mga kasanayan sa pag-unlad ng tema.