Myo Kyaw Htun

Firebug

November 28, 2008
Firebug ကေတာ့ html, css နဲ႕ javascript တို႕ကို web page တစ္ခု browse လုပ္ေနတုန္းမွာပဲ အလြယ္တကူ ျပင္လို႕ရေအာင္ အကူအညီေပးတဲ့ Firefox extension တစ္ခုပါ။ အဲဒိအတြက္ ကုဒ္ေတြျပန္ေရးလိုက္ server ေပၚျပန္တင္ၿပီးေတာ့ refresh ျပန္လုပ္စရာမလိုေတာ့ဘူးေပါ့။ အခုေျပာမွာက သူ႕ကိုသံုးၿပီး တန္းပလိတ္ေတြျပင္ရာမွာ လြယ္လြယ္ကူကူ နဲ႕ အခ်ိန္ကုန္သက္သာေစတဲ့နည္းပါ။
ပထမဆံုး လိုအပ္ခ်က္ေတြက Firefox Browser ေနာက္ၿပီးေတာ့ Firebug ကို Firefox မွာ install လုပ္ၿပီး enable လုပ္ပါ။ ေနာက္ အဓိကကေတာ့ HTML တုိ႕ CSS တို႕ကိုလဲ နားလည္ထားရပါ့မယ္။ ဒါမွာလဲ လြယ္လြယ္ကူကူ ျပင္လုိ႕ရမွာပါ။
ကိုယ္ျပင္ခ်င္တဲ့ blog ကို browse လုပ္ပါ။ Firefox browser ရဲ႕ ေအာက္ ညာဖက္ေဒါင့္စြန္းက Firebug icon in Firefox Firebug icon ေလးကို click လုပ္လိုက္ပါ။ ေအာက္ပံုအတိုင္းေတြ႕ပါလိမ့္မယ္။ ကၽြန္ေတာ္က ကၽြန္ေတာ့္ blog ကို browse လုပ္ထားပါတယ္။

Myo Kyaw Htun in Firebug


ဘယ္ဘက္ windows က html element ေတြပါ။ ညာဖက္ကေတာ့ CSS style code ေတြပါ။ ဘယ္ဘက္ Windows က html code ေတြကို တစ္ခုျခင္းစီ ျဖည္ၿပီး mouse တင္ၿပီးၾကည့္တာနဲ႕ အဲဒိ element ကို Firebug က color နဲ႕ highlight လုပ္ျပေပးပါတယ္။


Firebug HTML Code Windows


ေနာက္ ကိုယ္ျပင္ခ်င္တဲ့ element ကို click လုပ္ပါ။ ညာဖက္က CSS windows မွာ အဲဒိ element ရဲ႕ style တန္ဖိုးေတြကို ျပေပးပါလိမ့္မယ္။ အဲဒိတန္ဖိုးေတြကို ျပင္လိုက္တာနဲ႕ အထက္က ကိုယ္ browse လုပ္လိုက္တဲ့ site ရဲ႕ သက္ဆိုဒ္ရင္ element ရဲ႕ styleလဲ ေျပာင္းသြားပါတယ္။

Firebug CSS style windows



ကဲ ဒိေလာက္ပါပဲ။ ကုဒ္ေတြကေတာ့ ကိုယ့္ဘာသာျပင္ၾကည့္ေပါ့။ တကယ္ အေသးစိတ္ ကို လိုက္ေလ့လာခ်င္ရင္ Michael Sync ဘေလာ့ဂ္မွာ Firebug နဲ႕ ပါတ္သက္တဲ့ Firebug Tutorials ေတြ ေတာ္ေတာ္မ်ားမ်ား ရွိပါတယ္။ ေလ့လာၾကည့္ႏိုင္ပါတယ္။

1 comments:

သဥၨာ - Thinzar said...

မိုက္တယ္။ ဒါမ်ိဳးလိုခ်င္ေနတာၾကာျပီ။ မဟုတ္ရင္ တန္းပလိတ္ျပင္ရင္ CSS ေတြ ၾကည့္ျပီး မူးမူးသြားလိုက္။ ဆာဗာေပၚတင္လိုက္ မဟုတ္လိုက္ ျပန္ျပင္လိုက္နဲ႔ ခ်ာခ်ာလည္းေနလို႔။ ေက်းဇူးဘဲ.. :)

Post a Comment

Thank you for commenting in Myo Kyaw Htun - Personal Blog