Karaniwan kapag ang pag-edit ng isang web page ay gumagamit kami ng isang tukoy na tool sa pag-edit tulad ng Adobe Dreamweaver, CoffeeCup, Bluefish o isa sa iba pang mga tool sa pag-unlad. Ngunit ano ang tungkol sa kung lamang tayo ay brainstorming o nais na subukan ang isang bagay sa isang live na pahina? Maaari kaming gumawa ng isang kopya ng pahina sa aming tool na pinili at i-play sa paligid. O maaari naming gawin ito sa loob ng aming web browser. Pupunta sa iyo ang tutorial na ito kung paano i-edit ang isang web page sa iyong browser.
Tinukoy bilang Developer Tool, tinatawag ng Firefox ang tampok na Inspect Element habang tinawag ito ng Chrome na Suriin. Alinmang paraan, ito ay isang paraan para sa browser na sumilip sa likod ng sakilaw ng iyong disenyo at tingnan ang code na nagtutulak nito. Ang tampok na ito ay lubos na kilala at ginagamit ng maraming. Ang hindi masyadong kilalang kilala ay ang kakayahang gumawa ng mga pagbabago sa code na iyon sa mabilisang.
Ang anumang pagbabago na gagawin mo ay hindi mai-save at hindi ito makakaapekto sa live. Kung hindi mo nais na mai-load ang pahina sa iyong tool ng developer, ito ay isang maayos na paraan upang mag-eksperimento.
I-edit ang anumang web page sa iyong browser
Ang Dreamweaver at mga tool tulad nito ay may built-in na browser emulator na gayahin kung ano ang hitsura ng isang disenyo sa iba't ibang mga browser. Kagaya ng mga ito, hindi sila palaging eksaktong at madalas mong mahanap kapag naglulunsad ng isang site na mukhang hindi kapani-paniwala sa iyong tool ng nag-develop na bahagyang naiiba sa isang nakapag-iisang browser.
Kadalasan ay ilulunsad mo ang site sa isang panloob na web server at pagsubok sa isang browser bago ilunsad ang live para sa kadahilanang ito. Kung ang isang pahina ay nabubuhay o nais mo lamang na subukan ang isang bagay, hindi na kailangang kopyahin at mai-load ito sa iyong tool sa pag-unlad, maaari mo lamang gamitin ang Tool ng Developer ng browser.
Gumagamit ako ng Firefox kaya ipapakita ko sa iyo kung paano gamitin iyon. Ang Chrome ay halos pareho.
- Magbukas ng isang webpage na nais mong mag-eksperimento sa iyong browser.
- Mag-right click kahit saan sa pahina at piliin ang Suriin.
Dapat mong makita ang iyong pahina na nahahati sa dalawa na may isang bagong pane na lumilitaw sa ilalim na may ilang mga code sa loob nito. Ang code na ito ay ang lakas ng pagmamaneho ng pahinang iyong napili. Ang iba't ibang mga elemento ng pahina ay maa-access mula sa mga tab sa tuktok ng ibabang tab. Halimbawa, nakikita namin ang Inspektor, Console, Debugger, Estilo ng Editor at iba pa sa Firefox.
Kung nagpapatakbo ka ng iyong cursor sa mga linya sa ibabang pane makikita mo ang iba't ibang mga bahagi ng web page highlight. Ang linya ng code na iyong pinapasukan ay ang code na nakakaimpluwensya sa bahagi ng pahina.
- Kung nais mong maglaro sa kung paano ang hitsura ng pahina, subukan ang Estilo ng Editor.
- Kung nais mong maglaro sa kung paano gumagana ang pahina, subukan ang Console o Pag-access.
- Kung nais mong mag-quash ng mga bug o malutas ang isang problema, gumamit ng Console o Debugger
Ang pagganap ay kapaki-pakinabang para sa onsite SEO ngunit ang memorya, Network at Storage ay hindi gaanong ginagamit.
Tandaan, maaari kang magulo sa loob ng Mga tool sa Developer hangga't gusto mo at hindi ito makakaapekto sa site. Ang anumang mga pagbabago ay ginawa lamang sa kung paano ipinapakita ang pahina sa iyong indibidwal na browser, hindi mo apektado ang mismong website. Kapag isinara mo ang tool, nawala ang lahat ng mga pagbabago.
Ang paggawa ng mga pagbabago sa isang pahina
Ngayon alam mo na maaari mong baguhin ang anumang gusto mo nang hindi naaapektuhan ang aktwal na website, magkaroon tayo ng kaunting kasiyahan. Maghanap ng isang elemento sa pahina na nais mong i-edit. Maaari mong baguhin ang isang font, isang kulay ng font, imahe sa background o kung ano ang gusto mo. Para sa halimbawang ito, babaguhin ko ang kulay ng font ng headline ng banner.
- I-right click ang eksaktong elemento na nais mong baguhin at piliin ang Suriin.
- I-highlight ang linya na may alinman sa 'pamagat' o 'H1' kaya ang teksto ay naka-highlight sa tuktok na pane.
- Mag-navigate sa kaliwang dalawang mga panel at makahanap ng kulay ng font.
- Baguhin ang halaga sa ibang bagay o piliin ang tuldok ng kulay upang magamit ang isang pumipili.
Ang iyong pagbabago ay lilitaw nang pabago-bago habang natapos mo ang pagbabago. Maaari mong baguhin ang kulay, laki, font, background at lahat tungkol sa font. Hindi mo mai-save ang trabaho ngunit ang iyong mga pagbabago ay mananatili para sa session na iyon.
Maaari mong baguhin ang lahat tungkol sa pahina na perpekto kung mayroon kang isang ideya at nais mong mabilis na suriin ito bago ipaputok ang lahat ng iyong mga apps sa pag-unlad. Ang kailangan mo lang gawin ay alalahanin kung anong mga pagbabago na ginawa mo at kung saan hindi mo mai-save ang mga ito dito. Kailangan mong kumuha ng isang screenshot o i-record ang mga pagbabago at kopyahin ang mga ito sa loob ng iyong mga tool sa developer upang gawin itong stick.
Ang pag-edit ng isang web page sa iyong browser ay isang maayos na paraan upang mag-eksperimento o maglaro sa paligid ng mga pahina. Ito rin ay isang mahusay na paraan upang malaman ang kaunti tungkol sa pag-unlad ng web nang hindi kinakailangang bumili sa mga mamahaling tool ng developer. Ngayon alam mo kung paano, pumunta at magkaroon ng isang play!
