Web developer Tools at Firefox Aurora 10


Web developer/designer ေတြအတြက္မရွိမၿဖစ္ tools ၿဖစ္တဲ့ firebug ကို အားလံုးသိၾကမွာပါ။ ဒီလုိပဲ web developer tools ကို လည္းသံုးဖူးၾကမယ္
ထင္ပါတယ္။ ခုခ်ိန္မွာ Firefox ရဲ႕ Aurora 10 မွာ built in အၿဖစ္ထည့္သြင္းေပးလိုက္ပါၿပီ။ ဒီေတာ့ ဒီပိုစ္ေလးကို မဖတ္ခင္မွာပဲ Firefox ရဲ႕ Aurora
 ကို download ခ်ထားလိုက္ပါ။

Web developer Tool ကိုအသံုးၿပဳေတာ့မယ္ဆိုရင္ Menu > Tools> WebDeveloper ဒါမွမဟုတ္ Ctrl+Shift+I တိုကို တြဲႏွိပ္ေပးပါ။ ၿပီးရင္ေတာ့ ကိုယ္ရဲ႕ webpage ေပၚမွာ inspect element နဲ႕ ကိုယ္လိုခ်င္တဲ့ element တခုစီကိုေထာက္ၿပီး inspect လုပ္ႏိုင္ပါတယ္။Overlay ေလးေပၚေနတဲ့ကိုယ္ေရြးခ်ယ္ထားတဲ့ အပိုင္းေလးတခုစီကို tag,ID,classes ေတြအလိုက္ ေဖာ္ၿပေပးပါတယ္။ ဥပမာ ဒီပံုေလးကို ေထာက္လိုက္ရင္ သူ႕ရဲ႕ tag,html code ေတြနဲ႕ CSS properties ေတြအထိကို အေသးစိတ္ေဖာ္ၿပေပးတယ္။window ရဲ႕ ေအာက္ဆံုးမွာရီတဲ့ ညာဘက္ေဒါင့္စြန္ဆံုးက HTML နဲ႕ Style button ေလးကိုလည္း ေၿပာင္းၿပီး ကစားႏိုင္တယ္္။Style buttonေလးကို ႏွိပ္လိုက္ရင္ေတာ့ Rules ရယ္ Computed ရယ္ ဆိုတဲ႕ buttons ေလးႏွစ္ခုကို ထပ္ၿမင္ႏိုင္မွာပါ။ Rules မွာေတာ့ ကိုယ္ေရြးခ်ယ္ inspect လုပ္ထားတဲ့ element မွာ သံုးထားတဲ့css rule ေတြကို္ေဖာ္ၿပေပးထားတယ္။ Computed ကေတာ့ သူ႕ရဲ႕ properties ေလးေတံြကို ေဖာ္ၿပေပးထားတာပါ။

အလြယ္တကူၿပန္ထြက္ႏိုင္တဲ့ short cut ေလးကေတာ့ Esc ေလးပါပဲ။ Rule မွာရွိတဲ့ style ေတြကို လည္း ကိုယ္စိတ္ၾကိဳက္ css ေတြကို ၿပဳၿပင္ၿပီး စိတ္ေက်နပ္မွာ ကိုယ့္ရဲ႕ project က style ကိုၿပဳၿပင္ေပးၿခင္းအားၿဖင့္ အၿပန္အၿပန္ အလွန္လွန္ webpage ဖြင့္ၾကည့္လိုက္ project က ဒီဇိုင္းကို ၿပဳၿပင္လုိက္လုပ္ၿခင္းေၾကာင့္ ၾကာၿမင့္တဲ့အခ်ိန္ေတြ သက္သာသြားပါတယ္။

HTML Inspector/CSS Inspector
ဥပမာ နဂိုမူလက မီးခိုးေရာင္ေလးရွိေနတံ့ အကီႏို ဘေလာ့က title ေလးကို အေရာင္ေၿပာင္းၾကည့္ရေအာင္title ကို inspect လုပ္ပါ။

ၿပီးရင္ ညာဘက္ေဒါင့္မွာရွိတဲ့ style button ေလးကိုႏွိပ္လုိကပါ္ ။ Rules ထဲမွာ color: red; လိုက္ရိုက္လိုက္တာနဲ႕ title ေလးဟာ အနီေရာင္ ေၿပာင္းသြားပါတယ္။ဒီေတာ့ ကိုယ္လိုခ်င္တဲ့ desgin ရတဲ့အထိ css ကို ဒီေပၚမွာ ကစားၿပီး မွာ တကယ့္ project ထဲ သြား ၿပုၿပင္ (edit)လိုက္ရံုပါပဲ။

Scratpatch
သူကေတာ့ javascript developer သမားေတံ စိတ္ၾကိဳက္ၿဖစ္ေစမဲ့ tools ေလးပါ။ အကီႏို အရိုးရွင္းဆံုး js code ေလးပဲေရးၿပလိုက္ပါတယ္။ 🙂 code ေရးၿပီးရင္ေတာ့ scratchpad menu ေပၚ က execute > run ကို ႏွပေပးၿပီး ကိုယ့္ရဲ႕ js code ေတြကို စမ္းသပ္ႏိုင္ပါတယ္။

Web Console
Web console ကေတာ့ Network requests,CSS error Messages,JavaScript error Message ေတြနဲ႕ web developer messages ေတြကို ေဖာ္ၿပေပးတယ္ ။

web developer ေတြ အတြက္ ဒီ web developer tools ဟာ ဒီထက္မကတဲ့ အားသာခ်က္ေတြအမ်ားၾကီးရွိပါေသးတယ္။ဒီပိုစ္မွာရွင္းလင္းေၿပာၿပသြားတာေတြဟာ အေၿခခံအဆင့္ေလာက္သာၿဖစ္ၿပီး ကိုယ့္ project ေတြရဲ႕ လုိအပ္ခ်က္ေတြ အလိုက္ ေကာင္းစြားအသံုးခ် တတ္မယ္ဆိုရင္ လုပ္ငန္းပိုင္းမွာ ပိုမိုလ်င္ၿမန္ လြယ္ကူၿပီးေတာ့ အခ်ိန္ကုန္ သက္သာေစတဲ့ Development Tools ၿဖစ္ေၾကာင္း ရည္ညြန္း ေဖာ္ၿပအပ္ပါတယ္။

Refer: http://hacks.mozilla.org/2011/11/developer-tools-in-firefox-aurora-10/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s