Firebug(basic) အသံုးျပဳနည္းလမ္းညႊန္

Firebug ဆိုတာ ဘာလဲ?
ဟုတ္ကဲ႔ သူကေတာ႔ web developer ေတြဟက္ကာေတြအသံုးမ်ားတဲ႔ addon  လို႔ေျပာမယ္ဆိုရင္မမွားပါဘူး
သူကေတာ႔ web page ေတြရဲ႕ code ေတြကို view ၾကည္႔လို႔ရပါတယ္ html, css ,node စသည္ျဖင္႔ အမ်ားၾကီးပါ
အဲဒီမွာ ကၽြန္ေတာ္တို႔က သူကိုဘယ္လိုအသံုးခ်မလဲဆိုတာ ကိုေတာ႔ ကၽြန္ေတာ္တို႔သူကိုဘယ္ေလာက္အသံုးျပဳတတ္လဲဆိုတာကပိုအေရးၾကီးပါတယ္
ဒါမွ လိုခ်င္တဲ႔ ဟာကိုျမန္ျမန္နဲ႔ ကၽြန္ေတာ္တို႔လုပ္ေဆာင္နိုင္မွာပါ
firebug က open source web developer tool လိုလူသိမ်ားပါတယ္ web page ေတြကို debugging လုပ္ရာမွာ code ေတြကိုျမန္ဆန္စြာ
ရွာေဖြနိုင္ဖို႔နဲ႔ code ေတြရဲ႕ အလုပ္လုပ္ပံုေတြကို တိတိက်က် နဲ႔ အသံုးခ်မွဳအေပၚမူတည္ျပီး အက်ိဳးရွိေစမွာေတာ႔အမွန္ပဲ႔ဗ်

Ok ကၽြန္ေတာ္က firebug ေကာင္းေၾကာင္းေျပာေနမွေတာ႔ သူနဲ႔စျပီး အလုပ္လုပ္ၾကည္႔ရေအာင္
ပထမဆံုး firebug add on ကို firefox မွာ Install လုပ္ေပးရပါမယ္
ဒီမွာေဒါင္းျပီး install လုပ္ပါ
http://getfirebug.com/downloads

ျပီးေတာ႔ web page တစ္ခုေလာက္ဖြင္႔ျပီးၾကည္႔ၾကည္႔ပါ ေအာက္ကပံုေလးလိုေတြပါမယ္
တစ္ကယ္လို႔ short cut key ေတြကိုသိခ်င္တယ္ဆိုရင္ ေအာက္က link မွာသြားၾကည္႔ပါ
http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts

အခုဆိုစျပီး ကၽြန္ေတာ္တို႔ browser ထဲမွာရွိတဲ႔ Context Menu ေတြကို firebug နဲ႔ဖြင္႔ၾကည္႔ရေအာင္
web page ရဲ႕ ဘယ္ေနရာမွာပဲ႔ျဖစ္ျဖစ္ right click နွိပ္လိုက္တဲ႔အခါမွာ ( reload ,bookmark ,view page source ) လိုမ်ိဳးပဲ႔
Inspect Element ဆိုတာကိုေတြမွာပါ ဒါကိုနိပ္ၾကည္႔ပါဦး တစ္ခုခုေတြ႔မွာပါ node ေတြကို delete လုပ္ၾကည္႔လို႔လည္းရပါတယ္

စမ္းၾကည္႔ေပါ႔ ေျပာေနရင္ ျပီးေတာ႔မွာမဟုတ္ဘူး ဟီး
ေနာက္ျပီး firebug icon ကို click နွိပ္ျပီးေတာ႔လည္း  firebug ကိုဖြင္႔လို႔ရပါတယ္ firebug icon က ပိုးေကာင္ပံုေလးပါ

ဒါဆို ေနာက္ထပ္ web page layout နဲ႔ markup ကိုစစ္ၾကည္႔ရေအာင္
ေမးမ်ားတဲ႔ေမးခြန္းတစ္ခုကေတာ႔ web page ကို developing လုပ္တဲ႔အခါ အမွားေတြကို ဘယ္ေနရာမွာရွာမလဲတဲ႔?
အဲဒီေမးခြန္းကိုေျဖဖို႔က ေတာ႔ firebug ကိုအသံုးျပဳရျခင္းက အဲဒါေတြကို inspection လုပ္ဖို႔ပါပဲ႔
firebug ကိုဖြင္႔လိုက္တဲ႔အခါမွာ ပံုမွန္ဆိုရင္ေတာ႔ Html panel ထဲကို ျမင္ရမွာပါ ဒါက ကၽြန္ေတာ္တို႔ကို web page ရဲ႕ html element ကို နားလည္ေစနိုင္ပါတယ္

Node View Pane
ပထမဆံုး ဘယ္ဖက္က ဟာကို Node view လို႔ေခၚပါတယ္သူကေတာ႔ page ရဲ႕ source code ကို generate လုပ္ျပီး ေဖာ္ျပေပးထားပါတယ္
Node View ကေတာ႔ web page ထဲက html element /code ေတြကို edit လုပ္ဖို႔ခြင္႔ျပဳေပးထားပါတယ္ ျပီးေတာ႔  node view အေပၚမွာ
ကၽြန္ေတာ္တို႔ mouse ေလးကို html markup ေပၚကိုတင္လိုက္တဲ႔အခါ စျပီး အလုပ္လုပ္တာေတြ႔မွာပါ browser က ကၽြန္ေတာ္တို႔
node view ရဲ႕ element ကို highlight ေလးနဲ႔ျပမွာပါ

HTML Side Panels
ဒုတိယ ကေတာ႔ ညာဖက္က Side Panels ပဲ႔ျဖစ္ပါတယ္ သူကေတာ႔ ကၽြန္ေတာ္တို႔ highlight လုပ္ထားတဲ႔ element ရဲ႕ information ကိုျပေပးတဲ႔ ေနရာပဲ႔ျဖစ္ပါတယ္
Panel Side အေနနဲ႔ကေတာ႔ 4 မ်ိဳးပါ၀င္ပါတယ္
1. Style
2. Computed
3. Layout
4. Dom(  Document Object Model  )

1. Style side panel မွာေတာ႔  element မွာပါ၀င္တဲ႔ effect  declaration ရဲ႕ Css style ကိုျပေပးပါတယ္
Style sheet ကို Line နံပါတ္နဲ႔ ျပေပးမွာပါ သက္ဆိုင္တဲ႔ element ရဲ႕ style ကုတ္အားလံုးကိုျပေပးမွာပါ

2. Computed side panel ကေတာ႔ html element ရဲ႕ (font-size,background,text-align,color) စတဲ႔ Css properties ကိုျပေပးတာပါ
ဒါက web browser ထဲ႔က ဘယ္ element ကို render လုပ္တယ္ဆိုတာသိနိုင္ပါတယ္

3.Layout ပဲျဖစ္ပါတယ္ ကၽြန္ေတာ္တို႔ element ရဲ႕ box model ကို ျပေပးတဲ႔ေနရာပါ padding ,border, margin စတဲ႔ property ေတြကိုအလြယ္တစ္ကူျမင္နိုင္ပါတယ္
ျပီးေတာ႔ double click နွိပ္ျပီး value ေတြကို ျပန္ျပင္ၾကည္႔လို႔ရပါတယ္

4. Dom ကေတာ႔ ကၽြန္္ေတာ္တို႔ select လုပ္ထားတဲ႔ element ရဲ႕document object model information ကိုျပေပးတာပါ
သူကေတာ႔ javascript သံုးျပီး အလုပ္လုပ္တဲ႔ front-end web developer ေတြအတြက္ အရမ္းကိုအသံုး၀င္ပါတယ္
ေနာက္ပိုင္းမွာ  DOM အေၾကာင္းကိုကၽြန္ေတာ္ရွင္းပါမယ္ အားမွေနာ္

ဆက္လုပ္မယ္ဟာေတြကေတာ႔ ျပင္တဲ႔အပိုင္းေပါ႔ဗ်ာ
html element ေတြကို add/remove လုပ္နိုင္ပါတယ္
class ရဲ႕ id ေတြကို add/remove လုပ္နိုင္ပါတယ္
inline style ေတြကိုထပ္ျပီး adding လုပ္နိုင္ပါတယ္

သတိျပဳရမွာက firebug ကေတာ႔ ကၽြန္ေတာ္တို႔ေရးထားတဲ႔ code ကို တစ္ကယ္တန္းေတာ႔ save မလုပ္နိုင္ပါဘူး

ျပင္ျပီး design ေျပာင္းသြားတာေတြကိုေလာက္ပဲ႔ လုပ္ေပးနိုင္ပါတယ္ page ကို refresh လုပ္လိုက္တဲ႔အခါမွာ Page ကမူရင္းအတိုင္းျပန္ျဖစ္သြားမွာပါ
ဒါေၾကာင္႔ ၾကိဳက္သေလာက္ကလိလို႔ရပါတယ္ လိုခ်င္တဲ႔ပံုစံ ျဖစ္တဲ႔အထိေပါ႔
Css style ကိုလည္း အေပၚကလိုပဲ႔ ေျပာင္းလဲၾကည္႔နိုင္ပါတယ္

အဆင္ေျပပါေစ
အခ်ိန္သိပ္မရလို႔ လိုရင္တိုရွင္းပဲ႔ေရးလိုက္ပါတယ္ က်န္တဲ႔အပိုင္းကိုစိတ္၀င္စားရင္ဆက္ျပီးကလိနိုင္ပါတယ္