မဆိုက်ဘ်စာမျက်နှာ၏ HTML နဲ့ CSS ကိုကြည့်ရှုပါ
အဆိုပါက်ဘ်ဆိုက်၏လိုင်းများနှင့်အတူတည်ဆောက် ကုဒ် ပေမယ့်ရလဒ်ပုံများ, ဗီဒီယို, ဖောင့်နှင့်ပိုပြီးနှင့်အတူသီးခြားစာမျက်နှာများဖြစ်ပါသည်။ သူတို့အားဒြပ်စင်များ၏တဦးတည်းကိုပြောင်းလဲရန်သို့မဟုတ်ထိုသို့ဖွဲ့စည်းရဲ့အဘယ်အရာကိုမြင်မှ, သင်ကထိန်းချုပ်ထားကြောင်း code တွေရဲ့တိကျတဲ့မျဉ်းကိုတွေ့ရှိရန်ရှိသည်။ သငျသညျ Element တစ်ခုရဲ့စစ်ဆေးရေး tool ကိုနဲ့လုပ်နိုင်ပါတယ်။
အများစုက web browsers တွေသင်တစ်ဦးစစ်ဆေးခြင်း tool ကိုဒေါင်းလုတ်လုပ်သို့မဟုတ် add-on တစ်ခု install လုပ်မရကြပါဘူး။ အဲဒီအစား, သူတို့သင်စာမျက်နှာဒြပ်စင် right-click လုပ်ပြီး Element ကိုစစ်ဆေးရန်သို့မဟုတ်စုံစမ်းရန်ကိုရွေးချယ်ကြကုန်အံ့။ သို့သော်ထိုလုပ်ငန်းစဉ်သည်သင်၏ browser မှာအနည်းငယ်ကွဲပြားခြားနားပါလိမ့်မယ်။
Chrome မှာ Element တွေကိုစစ်ဆေးခြင်း
Google Chrome ၏လတ်တလောဗားရှင်းကိုသင်က၎င်း၏ built-in Chrome DevTools ကိုအသုံးပြုဖို့အားလုံးသောနည်းလမ်းအနည်းငယ်အတွက်စာမျက်နှာစစ်ဆေးခြင်းကုန်အံ့:
- စာမျက်နှာ (သို့မဟုတ်ကွက်လပ်ဧရိယာ) တွင်တစ်ခုခုကို right-click နဲ့ရှေးခယျြကိုစုံစမ်းရန်
- + I ကိုကီးဘုတ် shortcut ကိုပုကို Ctrl + Shift Enter
- အဆိုပါနောက်ထပ် Tools များဝင်ရောက်ဖို့ Chrome မီနူးကိုသုံးပါ> Developer တွေ tools တွေကို option ကို
အဆိုပါ Chrome DevTools (ထိုစာမျက်နှာပြန်လည်သည်အထိ) သင်အလွယ်တကူနဲ့တူသောအရာတို့ကိုကူးယူသို့မဟုတ်ပြင်ဆင်ရန်က HTML လိုင်းများသို့မဟုတ်လုံးဝ element တွေကိုဖုံးကွယ်သို့မဟုတ် delete ဘူးကြကုန်အံ့။
DevTools စာမျက်နှာ၏ဘက်မှာဖွင့်လှစ်သည်နှင့်တပြိုင်နက်, သင်ကနေရာယူထားရဲ့ရှိရာ, အားလုံးစာမျက်နှာ၏ဖိုင်များကိုရှာဖွေမှု, စာမျက်နှာထဲက pop, တိကျသောစာမေးပွဲအဘို့အစာမကျြနှာကနေ select လုပ်ပါ element တွေကိုပြောင်းလဲပစ်ဖိုင်တွေနဲ့ URLs များကိုကူးယူနှင့်ပင်တစည်းကိုစိတ်ကြိုက်နိုင်ပါတယ် settings ကို၏။
Firefox မှာ Element တွေကိုစစ်ဆေးခြင်း
Chrome ကလိုပဲ, Firefox ကိုစစ်ဆေးရေးကိုခေါ်င်း၏ tool ကိုဖွင့်လှစ်ရန်အချိန်အနည်းငယ်ကွဲပြားခြားနားတဲ့နည်းလမ်းတွေရှိပါတယ်:
- စာမကျြနှာပျေါမှာအလွတ်ဧရိယာကို right-click နှိပ်ပြီးသို့မဟုတ် Element တစ်ခုရဲ့ရွေးကောက်သဖြင့်, Element ကိုစုံစမ်းရန်ကို select
- Ctrl + Enter + T ကိုဒါမှမဟုတ်ကီးဘုတ်နှင့်အတူကို Ctrl + Shift + I ကို Shift
- Firefox ရဲ့ menu ကနေ, ရေးသားသူ> စစ်ဆေးရေးကိုကလစ်နှိပ်ပါ
- Tools menu ကနေ, Web Developer ကို click> စစ်ဆေးရေး
သငျသညျ Firefox မှာအမျိုးမျိုးသောဒြပ်စင်အပေါ်သင့်ရဲ့ mouse ကိုရွှေ့သကဲ့သို့, စစ်ဆေးရေး tool ကိုအလိုအလျောက်ဒြပ်စင်ရဲ့ source code ကိုသတင်းအချက်အလက်ကိုရှာ။ Element တစ်ခုရဲ့နှငျ့ "On-the-fly ရှာဖွေရေး" ကိုနှိပ်ပါရပ်တန့်ပါလိမ့်မယ်သင်စစ်ဆေးရေးပြတင်းပေါက်ကနေဒြပ်စင်ဆနျးစစျနိုငျသညျ။
လူအပေါင်းတို့သည်ထောက်ခံထိန်းချုပ်မှုကိုရှာဖွေ Element တစ်ခုရဲ့ right-click လုပ်ပါ။ သင်, HTML ကိုအဖြစ်ပြင်ဆင်ရန်နဲ့တူသောအရာတို့ကိုစာမကျြနှာပွုပါအတွင်းပိုင်းသို့မဟုတ်အပြင်ဘက်က HTML code အားလုံးကို copy လုပ်သို့မဟုတ် paste, ပြပွဲ DOM ဂုဏ်သတ္တိများ, စခရင်ပုံဒါမှမဟုတ် node ကို delete, အလွယ်တကူသစ်ကို attribute တွေ apply, စာမျက်နှာ၏ CSS ကိုအပေါငျးတို့သတွေ့မြင်နှင့်ထို့ထက် ပို. နိုင်ပါတယ်။
Opera မှာ Element တွေကိုစစ်ဆေးခြင်း
ဒါကြောင့် Chrome ၏ရန်တူညီရဲ့ DOM စစ်ဆေးရေး tool ကိုဖွင့်နှင့်အတူအော်ပရာလွန်းဒြပ်စင်စစ်ဆေးခြင်းနိုင်ပါတယ်။ ဒီနေရာတွင်ကဘယ်လိုသွားရမလဲင်:
- ကီးဘုတ် shortcut ကို Ctrl + Shift + I ကိုသုံးပါ
- Menu ကိုမှသွားလာရန်> ပိုမိုထဲက Tools> Show ကိုရေးသားသူ menu ကို, ပြီးတော့ Menu ကို> Developer> Developer Tools များမှတဆင့် menu ကိုဖွင့်လှစ်
- စာမျက်နှာပေါ်မဆိုဒြပ်စင်ပေါ်တွင် right-click menu ကနေရွေးချယ်ဒြပ်စင်ကိုစုံစမ်းရန်
က Internet Explorer အတွက် Element တွေကိုစစ်ဆေးခြင်း
အလားတူပြုစုသူကိရိယာများကိုခေါ်ဒြပ်စင် tool ကိုစစ်ဆေးခြင်းက Internet Explorer အတွက်ရရှိနိုင်ပါသည်:
- ကီးဘုတ်ပေါ်စာနယ်ဇင်း F12
- အဆိုပါထဲက Tools> F12 ရေးသားသူ Menu ကို option ကို (သင် Tools menu ကိုမမြင်ရကြပါလျှင် Alt + X ကိုဝင်တိုက်) ကိုသုံးပါ
- စာမကျြနှာပေါ်မှာ Right-click နှိပ်ပြီး Element ကိုစုံစမ်းရန်ကိုကလစ်နှိပ်ပါ
IE ကိုသငျသညျ၎င်းငျး၏ HTML နဲ့ CSS ကိုအသေးစိတျကိုမြင်ရဖို့မဆိုစာမျက်နှာဒြပ်စင်ပေါ်တွင်နှိပ်ပါပေးနိုင်ပါတယ်သောဤအသစ်အမီနူးထဲမှာကို Select လုပ်ပါဒြပ်စင် tool ကိုရှိပါတယ်။ သင်တို့သည်လည်းအလွယ်တကူသင် DOM Explorer ကို tab ကိုမှတဆင့် browsing နေစဉ်တွင်မီးမောင်းထိုးပြဒြပ်စင်ကို enable / disable နိုင်ပါတယ်။
အထက်ပါ browser များတွင်အခြားဒြပ်စင်စစ်ဆေးရေး tools များကဲ့သို့ပင်က Internet Explorer, သင်သည်မိတ္တူဖြတ်ပေးနိုင်ပါတယ်နှင့်ငါးပိဒြပ်စင်အဖြစ်ပြင်ဆင်ရန်အတွက် HTML ကို, attribute တွေ, ပူးတွဲစတိုင်များနှင့်အတူမိတ္တူဒြပ်စင်များနှင့်ထို့ထက် ပို. ထည့်ပါ။