Web ကိုဒီဇိုင်နာများ, developer များနှင့်စမ်းသပ်သူများအဘို့ integrated toolsets
Web ကိုရယူရန်ရှာဖွေနေသည့်နေ့စဉ်အသုံးပြုသူအာရုံစိုက်အများဆုံး browser ကိုထုတ်လုပ်သူများအပြင်, သူတို့လည်းသူတို့အအသုံးပြုသူများအလက် browser များသို့အစွမ်းထက် tools များပေါင်းစပ်ခြင်းဖြင့်ရယူသုံးနေကြသော app များနှင့်ဆိုက်များတည်ဆောက်ကူညီသူက Web developer များ, ဒီဇိုင်နာများနှင့်အရည်အသွေးအာမခံချက်ပညာရှင်များမှဖြည့်တင်း သူတို့ကိုယ်သူတို့။
သွားကြောင်းတစ်ခုတည်းသော programming နဲ့စမ်းသပ်ခြင်း tools တွေကိုသင်တစ်ဦးစာမျက်နှာရဲ့ source code ကိုနှင့်ပိုပြီးဘာမျှမကြည့်ရှုရန်ခွင့်ပြုခဲ့တဲ့ဘရောက်ဇာအတွင်းတွေ့ရှိခဲ့ရှိရာရက်ပေါင်းဖြစ်ကြသည်။ ယနေ့ browser များသင်သည်သင်၏ကုဒ်ကြောင်းကိုသေချာ, ကွပ်မျက်ခြင်းနှင့်ဒီဘာဂင် JavaScript ကိုသတင်းအတိုအထွာများစစ်ဆေးနှင့်တည်းဖြတ် DOM ဒြပ်စင်ပိတ်ဆို့မှုများခွဲခြားသတ်မှတ်ပေးရန်သင့် app သို့မဟုတ်စာမျက်နှာဝန်အဖြစ် Real-time ကွန်ရက်အသွားအလာစောင့်ကြည့်, CSS ကို performance ကိုခွဲခြားစိတ်ဖြာနဲ့တူသောအရာတို့ကိုကျင့်ကိုကျင့်အားဖြင့်တစ်ဦးသိပ်နက်ရှိုင်းငုပ်ယူကြကုန်အံ့ အလွန်အကျွံမှတ်ဉာဏ်သို့မဟုတ်အလွန်များအသုံးချဖို့မဟုတ်ဘူး CPU ကို သံသရာနှင့်အများကြီးပို။ တစ်ဦးစမ်းသပ်ရှုထောင့်ကနေ, သင် app တစ်ခုသို့မဟုတ် web page ကိုတုံ့ပြန်မှုဒီဇိုင်းနှင့် built-in ရေး Simulator ၏မှော်မှတဆင့်ကွဲပြားခြားနားသော browser များရှိသကဲ့သို့ကောင်းစွာအဖြစ်ကွဲပြားခြားနားသောထုတ်ကုန်များနှင့်ပလက်ဖောင်းများပေါ်တွင်အပြစ်ပေးမည်ဟုဘယ်လိုမျိုးပွားနိုင်ပါတယ်။ အကောင်းဆုံးအစိတ်အပိုင်းကိုသင့် browser ကိုစွန့်ခွာရန်မလိုဘဲဤအရာအားလုံးလုပျနိုငျသောကွောငျ့ဖွစျသညျ!
အောက်ကလဲ tutorial အများအပြားလူကြိုက်များက်ဘ်ဘရောက်ဇာတွင်ဤဆော့ဖ်ဝဲရေးသူ tools တွေကိုဝင်ရောက်ဖို့ဘယ်လောက်အားဖြင့်သင်တို့သွားလာရကြ၏။
Google Chrome က
Chrome ၏ developer ကိရိယာများ, စွမ်းဆောင်ရည်ဆိုင်ရာကိစ္စရပ်များဖော်ထုတ်အန်းဒရွိုက်သို့မဟုတ် running ရှိသူများအပါအဝင်ကွဲပြားခြားနားသော device ကိုဖန်သားပြင်တူအောင်ဖန်တီးရန်သင့်အားတည်းဖြတ်ရန်ခွင့်ပြုနဲ့ဒီဘာဂ်ကုဒ်, စာရင်းစစ်တစ်ဦးချင်းစီအစိတ်အပိုင်းများ ကို iOS , နှင့်အခြားအသုံးဝင်သောလုပ်ဆောင်ချက်များကိုလုပ်ဆောင်။
- သုံးအလျားလိုက်လိုင်းနှင့်အတူမှတ်သားခြင်းနှင့် browser ၏ညာဘက်အပေါ်ထောင့်တွင်တည်ရှိသည်, Chrome ၏ main menu ကိုခလုတ်ကိုကလစ်နှိပ်ပါ။
- drop-down menu ကပေါ်လာသောအခါ, ပို tools တွေကို option ကိုကျော်သင့်ရဲ့ mouse ကို cursor ပျံဝဲ။
- တစ်ဦးက sub-menu ကိုယခုပေါ်လာသငျ့သညျ။ ရေးသားသူ tools တွေကိုအမည်တပ်ထားသောထို option ကိုရွေးပါ။ သင်တို့သည်လည်းဤ menu item တခုကို၏အရပျ၌အောက်ပါကီးဘုတ် shortcut ကိုအသုံးပွုနိုငျ: Chrome OS ကို / Windows ကို (CTRL + SHIFT + I ကို), Mac OS X မှာ (ALT (Optional) + COMMAND + I ကို)
- ဒီဥပမာစခရင်ပုံမှာပြထားတဲ့အတိုင်း Chrome ကိုပြုစုသူကိရိယာများ interface ကိုယခုပြသရပါမည်။ Chrome ကသင့်ရဲ့ version ကိုပေါ် မူတည်. သင်မြင်သောကနဦး layout ကိုဒီနေရာမှာတင်ပြတရာမှအနည်းငယ်ကွဲပြားပါလိမ့်မယ်။ ပုံမှန်အားဖြင့်အောက်ဆုံးသို့မဟုတ်မျက်နှာပြင်၏ညာလက်ဘက်ဖြစ်စေပေါ်မှာတည်ရှိဆော့ဖ်ဝဲရေးကိရိယာများ, ၏အဓိကအချက်အချာအောက်ပါ tabs များပါရှိသည်။
ဒြပ်စင်: စစ်မှန်သောအချိန်၌သင်တို့၏အပြောင်းအလဲများများ၏သက်ရောက်မှုကိုမြင်လျှင်, On-the-fly CSS ကိုနဲ့ HTML ကုဒ်အဖြစ်ပြင်ဆင်ရန် CSS ကိုစစ်ဆေးခြင်းနိုင်စွမ်းပေး။
console: Chrome ၏ JavaScript ကို console ကိုတိုက်ရိုက်အမိန့်ပေး entry ကိုအဖြစ်အဖြေရှာတဲ့ဒီဘာဂင်များအတွက်ခွင့်ပြုပါတယ်။
သတင်းရင်းမြစ်: သင်တစ်ဦးအစွမ်းထက်သော graphical interface မှတစ်ဆင့် JavaScript ကိုကုဒ် Debugging ခွင့်ပြုသည်။
Network မှ: ပြီးပြည့်စုံတောင်းဆိုမှုကိုနှင့်တုန့်ပြန်ခေါင်းစီးအဖြစ်အဆင့်မြင့်အချိန်ကိုက်မက်ထရစ်အပါအဝင်တက်ကြွ application သို့မဟုတ်စာမျက်နှာပေါ်တွင်အသီးအသီးဆက်စပ်စစ်ဆင်ရေးအကြောင်းကိုအမျိုးအစားနှင့် display တွေအသေးစိတ်အချက်အလက်များ။
Timeline ကို: အဖြစ်မကြာမီတစ်စာမျက်နှာသို့မဟုတ် app ကိုဝန်တောင်းဆိုမှုကိုအစပျိုးနေသည်အဖြစ် browser ကိုအတွင်းရာအရပ်ကိုကြာသောလှုပ်ရှားမှု In-depth ကိုခွဲခြမ်းစိတ်ဖြာဘို့ကခွင့်ပြုသည်။ - ဤအကဏ္ဍများအပြင်, သငျသညျကိုလညျး Timeline ကို tab ကို၏ညာဘက်မှတည်ရှိသော >> အိုင်ကွန်မှတဆင့်အောက်ပါ tools တွေကိုရယူနိုငျပါသညျ။
ပရိုဖိုင်းကို: CPU ကိုပရိုဖိုင်းနှင့်များကိုပုံ ထား. ပရိုဖိုင်ကဏ္ဍများသို့ဆင်း Broken, တက်ကြွစွာ application သို့မဟုတ်စာမျက်နှာ၏ပြည့်စုံမှတ်ဉာဏ်အသုံးပြုမှုနှင့်ယေဘုယျကွပ်မျက်အချိန်ပေးပါသည်။
လုံခြုံရေး: ပေါ်လွင်ချက်များလက်မှတ်ပြဿနာတွေနဲ့တက်ကြွစာမျက်နှာသို့မဟုတ် application ကိုနှင့်အတူအခြားလုံခြုံရေး-related ဆိုင်ရာကိစ္စရပ်များ။
အရင်းအမြစ်များ: သင် cookies များကိုဒေသခံသိမ်းဆည်းခြင်း, app ကို cache ကိုများနှင့်လက်ရှိ web page ကိုသို့မဟုတ် application ကိုအသုံးပြုတဲ့အခြားဒေသခံဒေတာသတင်းရင်းမြစ်စစ်ဆေးခြင်းနိုင်ပါတယ်နေရာအရပ်ဖြစ်၏။
စာရင်းစစ်: တစ်စာမျက်နှာသို့မဟုတ် application ရဲ့ဝန်အချိန်နှင့်အထွေထွေစွမ်းဆောင်မှုပိုကောင်းအောင်နည်းလမ်းများကမ်းလှမ်း။ - device Mode ကိုသင်ကထိုကဲ့သို့သော iPad, iPhone နဲ့ Samsung ရဲ့ Galaxy အဖြစ်အများအပြားလူသိများတဲ့ Android နှင့် iOS မော်ဒယ်အပါအဝင်တစ်ဒါဇင်ကျော်ကိရိယာတွေထဲကပေါ်တွင်ပေါ်လာလိမ့်မယ်အဖြစ်နီးပါးအတိအကျကပြန်ဆိုသော Simulator ကိုအတွက်တက်ကြွစွာစာမျက်နှာကိုကြည့်ရှုဖို့ခွင့်ပြုပါတယ်။ သင်တို့သည်လည်းသင့်ရဲ့အထူးသဖြင့်ဖွံ့ဖြိုးရေးလုပ်ငန်းသို့မဟုတ်စမ်းသပ်ခြင်းလိုအပ်ချက် fit မှထုံးစံမျက်နှာပြင်ဆုံးဖြတ်ချက်တွေအတုယူဖို့စွမ်းရည်ကိုပေးအပ်ထားတယ်။ အပေါ်နဲ့ off စက်ပစ္စည်း Mode ကို toggle ရန်, Element တွေကို tab ကို၏လက်ဝဲတိုက်ရိုက်တည်ရှိသည်မိုဘိုင်းဖုန်းရဲ့ icon ကို select လုပ်ပါ။
- သင်တို့သည်လည်း Menu ခလုတ်ကိုသုံးဒေါင်လိုက်-ထားရှိစက်ကကိုယ်စားပြုနှင့်ဖျောပွ tabs များ၏ဝေးညာဘက်အခြမ်းတွင်တည်ရှိသောပေါ်တွင်ပထမဆုံးကလစ် နှိပ်. သင့်ဆော့ဖ်ဝဲ tool များ၏ကြည့်နှင့်ခံစားစိတ်ကြိုက်နိုင်ပါတယ်။ ဒီ Drop-down menu ကိုအတွင်းကနေ, သင်က, dock ကိုနေရာပြပွဲသို့မဟုတ်ကွဲပြားခြားနားသောကိရိယာများအဖြစ်ကောင်းစွာကဲ့သို့သောကိရိယာစစ်ဆေးရေးအဖြစ်ပစ်လွှတ်ပိုပြီးအဆင့်မြင့်ပစ္စည်းများကိုဖုံးကွယ်ထားနိုင်ပါတယ်။ သင်က dev tools တွေ interface ကိုသူ့ဟာသူဤအပိုင်း၌တွေ့ setting များကိုမှတဆင့်မြင့်မားစိတ်ကြိုက်ကြောင်းကိုရှာဖွေပါလိမ့်မယ်။
Mozilla Firefox ကို
Firefox ကိုရဲ့ Web Developer တွေအပိုင်းဒီဇိုင်နာများ, developer များနှင့်ထိုကဲ့သို့သောစတိုင်အယ်ဒီတာနှင့် pixel-ပစ်မှတ်ထား eyedropper အဖြစ်ရောနှောစမ်းသပ်သူများအဘို့ tools များပါဝင်သည်။
အကြံပြုထားစာဖတ်ခြင်း: အဆိုပါထိပ်တန်း 25 Greasemonkey နှင့် Tampermonkey အသုံးပြုသူ Scripts
- သုံးအလျားလိုက်လိုင်းကကိုယ်စားပြု Firefox ကိုဖွင့် main menu ကိုခလုတ်ပေါ်တွင် Click နှင့် browser ကို window ၏ညာဘက်ထောင့်တွင်တည်ရှိသည်။
- drop-down menu ကပေါ်လာသောအခါ, ရေးသားသူအမည်တပ်ထားသောအိုင်ကွန်ကိုရွေးပါ။ အဆိုပါ Web Developer menu ကိုယခုအောက်ပါ options များပါဝင်တဲ့, ပြသရပါမည်။ သငျသညျအမြားဆုံးမီနူးပစ္စည်းများကိုသူတို့နှင့်အတူဆက်နွယ် keyboard shortcuts တွေကိုရှိသည်သတိထားမိပါလိမ့်မယ်။
ပြရန်သို့မဟုတ်ပုံမှန်အားဖြင့် browser ကို window ၏အောက်ခြေတွင် positioned ပြုစုရေးကိရိယာများကို interface, ဖုံးကွယ်: Tools များဖွင့်ပိတ်ရန်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ (ALT (Optional) + COMMAND + I ကို), ကို Windows (CTRL + SHIFT + I ကို)
စစ်ဆေးရေး: သင်စစ်ဆေးခြင်းနှင့် / သို့မဟုတ်တက်ကြွစွာစာမျက်နှာပေါ်တွင်အဖြစ်ဝေးလံခေါင်သီဒီဘာဂင်ကနေတစ်ဆင့်တစ်ဦးခရီးဆောင်စက်ပစ္စည်းပေါ်ရှိ CSS ကိုနဲ့ HTML ကုဒ် tweaks ရန်ခွင့်ပြုသည်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ (ALT (Optional) + COMMAND + C ကို), ကို Windows (CTRL + SHIFT + C)
Web ကို Console: လုံခြုံရေးသတိပေးချက်များ, ကွန်ယက်တောင်းဆိုမှုများ, CSS ကိုမက်ဆေ့ခ်ျများ, နှင့်ပိုပြီးအပါအဝင် Logged အချက်အလက်များ၏တစ်ဦးကွဲပြားခြားနား set ကိုသင်တက်ကြွစွာစာမျက်နှာအတွင်း JavaScript ကိုအသုံးအနှုန်းတွေ execute လုပ်ခွင့်ပြုအဖြစ်ပြန်လည်သုံးသပ်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ (ALT (Optional) + COMMAND + K) ကို Windows (CTRL + SHIFT + K)
debugger: အဆိုပါ JavaScript ကို debugger သငျသညျကိုအတိအကျရှာရန်နှင့် DOM node များ, အနက်ရောင်လက်ဝှေ့ပြင်ပအရင်းအမြစ်နှင့်ပိုပြီးစစ်ဆေး, breakpoints အား setting များကချွတ်ယွင်း fix ပေးနိုင်ပါတယ်။ ယင်းစစ်ဆေးရေးနှင့်အတူအမှုသည်အတိုင်း, ဒီ feature လည်းဝေးလံခေါင်သီဒီဘာဂင်ထောက်ခံပါတယ်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ (ALT (Optional) + COMMAND + S ကို), ကို Windows (CTRL + SHIFT + S ကို)
စတိုင်အယ်ဒီတာ: သင်အသစ်များကို Stylesheets ဖန်တီးတက်ကြွစွာ web page ကိုသူတို့နှင့်အတူထည့်သွင်းခြင်းသို့မဟုတ်လက်ရှိစာရွက်များကိုတည်းဖြတ်နှင့်သင့်အပြောင်းအလဲများကိုကလစ်တစ်ချက်နှိပ်ရုံနဲ့ browser မှာဆပ်ဘယ်လိုစမ်းသပ်ဖို့ကခွင့်ပြုသည်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ, Window (SHIFT + F7)
performance: တက်ကြွစွာစာမျက်နှာရဲ့ကွန်ယက်ကိုစွမ်းဆောင်ရည်, frame rate ကိုဒေတာ, JavaScript ကိုကွပ်မျက်အချိန်နှင့်ပြည်နယ်, ဆေးသုတ် Flash ကို, ပြီးအများကြီးပိုတဲ့အသေးစိတ်ပျက်ပြားပေး။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ, Window (SHIFT + F5)
Network မှ: သက်ဆိုင်တဲ့နည်းလမ်း, ဇာစ်မြစ်ဒိုမိန်း, အမျိုးအစား, အရွယ်အစား, နှင့်အချိန်ကြာနှင့်အတူ browser ကိုအားဖြင့်အစပျိုး Lists မချင်းစီကွန်ရက်ကတောင်းဆိုချက်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ (ALT (Optional) + COMMAND + Q), ကို Windows (CTRL + SHIFT + Q ကို)
ရေးသားသူ Toolbar ကို: တစ်ဦးအပြန်အလှန် command line ကိုစကားပြန်ဖွင့်မည်။ အားလုံးရရှိနိုင်ပညတ်တော်တို့ကိုနှင့်၎င်းတို့၏လျော်သော syntax များစာရင်းကိုများအတွက်စကားပြန်သို့အကူအညီနဲ့ရိုက်ထည့်ပါ။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ, Window (SHIFT + F2)
WebIDE: Firefox OS သုံးပြေးတစ်ဦးအမှန်တကယ် device ကိုမှတဆင့်ဒါမှမဟုတ် Firefox OS သုံး Simulator မှတဆင့် Web apps တွေမှာဖန်တီး execute လုပ်နိုင်စွမ်းပေး။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ, Window (SHIFT + F8)
Browser ကို Console: အက Web Console (အထကျကိုကြည့်ပါ) ကဲ့သို့တူညီသောလုပ်ဆောင်နိုင်စွမ်းကိုပေး။ သို့သော်ပြန်လာသောအားလုံးဒေတာ (အပါအဝင်တစ်ခုလုံးကို Firefox ကိုလျှောက်လွှာအဘို့ဖြစ်၏ extensions တွေကို ရုံတက်ကြွ web page ကိုဆန့်ကျင်အဖြစ်နဲ့ browser-Level လုပ်ဆောင်ချက်များကို) ။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ (SHIFT + COMMAND + J), Window (CTRL + SHIFT + J ကို)
တုံ့ပြန်မှုဒီဇိုင်းကြည့်ရန်: သင်ချက်ချင်း Tablet နှင့်စမတ်ဖုန်းများအပါအဝင်မျိုးစုံ devices တွေကိုတုမှကွဲပြားခြားနားသောဆုံးဖြတ်ချက်များ, အပြင်အဆင်များနှင့်မျက်နှာပြင်အရွယ်အစားအတွက် web page ကိုကြည့်ရှုရန်ခွင့်ပြုသည်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ (ALT (Optional) + COMMAND + M), ကို Windows (CTRL + SHIFT + M က)
Eyedropper: တစ်ဦးချင်းစီကိုရှေးခယျြ pixels ကိုများအတွက် hex အရောင်ကုဒ်ဖေါ်ပြရန်ဖြစ်ပါသည်။
Scratchpad : တဲ့ pop-ထွက် Firefox ကိုပြတင်းပေါက်အတွင်းကနေ JavaScript ကိုကုဒ်၏အတိုအထွာပေါင်းစည်းခြင်းနှင့် execute, သင်, ပြင်ဆင်ရန်ရေးရန်ခွင့်ပြုသည်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ, Window (SHIFT + F4)
စာမျက်နှာရင်းမြစ်: မူရင်း browser ကို-based ဆော့ဖ်ဝဲရေးကိရိယာတခု, ဒီ option ကိုရိုးရှင်းစွာတက်ကြွစွာစာမျက်နှာများအတွက်ရရှိနိုင် source code ကိုဖော်ပြပေးမှာဖြစ်ပါတယ်။ Keyboard ကိုဖြတ်လမ်း: Mac OS X မှာ (COMMAND + U), ကို Windows (CTRL + ဦး)
နောက်ထပ် Tools များရယူပါ: Mozilla ၏တာဝန်ရှိသူတဦးကပေါ်က်ဘ်ရေးသားသူရဲ့ Toolbox ကိုစုစည်းဖွင့်လှစ် Add-ons တွေကို ထိုကဲ့သို့သော Firebug နှင့် Greasemonkey အဖြစ်တစ်ဒါဇင်လူကြိုက်များ extension များအကြောင်းကို featuring, site ကို။
မိုက်ကရိုဆော့ဖ Edge / Internet Explorer ကို
လေ့ပု F12 ပြုစုသူကိရိယာများအဖြစ်ရည်ညွှန်း, Internet explorer, IE11 နှင့် Microsoft Edge အတွက် dev toolset ၏အစောပိုင်းဗားရှင်းကတည်းက interface ကိုဖြန့်ချိသောကီးဘုတ်ဖြတ်လမ်းတစ်ခုရှိခိုး၏အလွန်အသုံးအုပ်စုတစ်စုကမ်းလှမ်းနေဖြင့်စတင်ဖွဲ့စည်းချိန် မှစ. ရှည်လျားသောလမ်းရောက်လာပြီ မော်နီတာ, debugger, emulator နှင့် On-the-fly compiler နဲ့။
- သုံးစက်အားဖြင့်ကိုယ်စားပြုနောက်ထပ်လုပ်ဆောင်ချက်များမီနူးပေါ်တွင် Click နှင့် browser ကို window ၏ညာဘက်ထောင့်တွင်တည်ရှိသည်။ drop-down menu ကပေါ်လာသောအခါ, ထို option ကိုရွေးပါ F12 ရေးသားသူ Tools များတံဆိပ်ကပ်။ ငါပြီးသားဖော်ပြခဲ့တဲ့အတိုင်း, သင်လည်း F12 ကီးဘုတ်ဖြတ်လမ်းကနေတဆင့် tools တွေကိုရယူနိုငျပါသညျ။
- ဖွံ့ဖြိုးတိုးတက်ရေး interface ကိုယခုပုံမှန်အားဖြင့် browser ကို window ၏အောက်ခြေတွင်, ပြသရပါမည်။ အောက်ပါ tools တွေကိုသူတို့ရဲ့သက်ဆိုင်ရာ tab ကိုခေါငျးစဉျအောကျကလစ်နှိပ်ခြင်းသို့မဟုတ်ပူးတှဲကီးဘုတ် shortcut ကိုအသုံးပြုခြင်းအားဖြင့်တစ်ဦးချင်းစီသုံးစွဲနိုင်, ရရှိနိုင်ပါသည်။
DOM Explorer ကို: သင်သွားရအဖြစ်ပြုပြင်ထားသောရလဒ်များကို rendering, သင်တက်ကြွစွာစာမျက်နှာကို Stylesheets နဲ့ HTML edit လုပ်ခွင့်ပြုသည်။ အော်တိုပြီးဆုံးကုဒ်ဘယ်မှာသက်ဆိုင်သောမှ IntelliSense လုပ်ဆောင်နိုင်စွမ်းကိုအသုံးချ။ Keyboard ကိုဖြတ်လမ်း: (CTRL + 1)
console: တစ်ခုဘက်ပေါင်းစုံ API မှတစ်ဆင့်ကောင်တာ, တိုင်မား, ခြေရာတွေနှင့်စိတ်ကြိုက်မက်ဆေ့ခ်ျများအပါအဝင် debugging သတင်းအချက်အလက်များတင်ပြနိုင်စွမ်းပေး။ ဒါ့အပြင်သင်တစ်ဦးတက်ကြွက်ဘ်စာမျက်နှာသို့ကုဒ်ထိုးသွင်းခြင်းနှင့်အမှန်တကယ်အချိန်အတွက်တစ်ဦးချင်းစီ variable တွေကိုပေးရန်တာဝန်ပေးတန်ဖိုးများပြုပြင်မွမ်းမံပေးနိုင်ပါတယ်။ Keyboard ကိုဖြတ်လမ်း: (CTRL + 2)
debugger: သင် breakpoints အားသတ်မှတ်ထားကြောင့် ပေး. စီရင်နေချိန်တွင်လိုအပ်ခဲ့လျှင်လိုင်းအားဖြင့်လိုင်းကသင့် code ကို Debugging ခွင့်ပြုသည်။ Keyboard ကိုဖြတ်လမ်း: (CTRL + 3)
Network မှ: Lists မ protocol ကိုအသေးစိတ်အကြောင်းအရာအမျိုးအစား, bandwidth ကိုအသုံးပြုမှုနှင့်ပိုပြီးအပါအဝင်စာမျက်နှာဝန်နှင့်ကွပ်မျက်စဉ်အတွင်း browser ကိုအားဖြင့်အစပျိုးတစ်ဦးချင်းစီကွန်ရက်ကတောင်းဆိုချက်။ Keyboard ကိုဖြတ်လမ်း: (CTRL + 4)
performance: သင်စာမျက်နှာဝန်ကြိမ်နှင့်အခြားလှုပ်ရှားမှုများအရှိန်မြှင့်ကူညီပေးဖို့ဘောင်နှုန်း, CPU ကိုအသုံးချနှင့်အခြားစွမ်းဆောင်ရည်-related မက်ထရစ် Details ။ Keyboard ကိုဖြတ်လမ်း: (CTRL + 5)
မှတ်ဉာဏ်: သင်ခွဲထုတ်ကူညီပေးနှင့်ကွဲပြားခြားနားသောအချိန်ကြားကာလထံမှရိုက်ချက်တွေနဲ့အတူနေတဲ့မှတ်ဉာဏ်အသုံးပြုမှုအချိန်ဇယားပြသခြင်းဖြင့်လက်ရှိက်ဘ်စာမျက်နှာပေါ်တွင်အလားအလာမှတ်ဥာဏ်ယိုစိမ့်ပြင်ပေး။ Keyboard ကိုဖြတ်လမ်း: (CTRL + 6)
အတုယူ: သင်တက်ကြွစွာစာမျက်နှာစမတ်ဖုန်း, တက်ဘလက်များနှင့်အခြားစက်ပစ္စည်းများကိုအတုခိုးပြီး, အမျိုးမျိုးသောဆုံးဖြတ်ချက်တွေနဲ့မျက်နှာပြင်အရွယ်အစားအတွက်ဆပ်မယ်လို့ဘယ်လောက်ပြပါ။ ဒါ့အပြင်အသုံးပြုသူအေးဂျင့်နဲ့စာမျက်နှာ orientation ကိုပြုပြင်မွမ်းမံအဖြစ်တစ်ဦးလတ္တီနှင့်လောင်ဂျီတွဒ်ရိုက်ထည့်ခြင်းဖြင့်ကွဲပြားခြားနားသော geolocation တူအောင်ဖန်တီးနိုင်စွမ်းပေးပါသည်။ Keyboard ကိုဖြတ်လမ်း: (CTRL + 7) - အခြား tools တွေကိုမဆိုအတွင်းနေစဉ် Console အဖော်ပြရန်ဖွံ့ဖြိုးတိုးတက်ရေးအတွက် tools တွေကိုမျက်နှာပြင်ရဲ့အထက်ညာဖက်ထောင်တည်ရှိသောကြောင့်အတွင်းပိုင်းတစ်ဦးညာဘက် bracket ကအတူစတုရန်းခလုတ်ကိုပေါ်တွင်ကလစ်လုပ်ပါ။
- ဒါကြောင့်သီးခြားပြတင်းပေါက်ဖြစ်လာနိုင်အောင်, ပြုစုရေးကိရိယာများ interface ကို undock ရန်, နှစ်ဦးကိုတန်းဒေသတွေစတုဂံဖြင့်ကိုယ်စားပြုခလုတ်ကိုကလစ်နှိပ်ပါသို့မဟုတ်အောက်ပါကီးဘုတ်ဖြတ်လမ်းကိုအသုံးပြုဖို့: CTRL + P ကို။ သငျသညျ CTRL + P ကိုတစ်စက္ကန့်အချိန်ကိုနှိပ်ခြင်းဖြင့်၎င်းတို့၏မူလတည်နေရာအတွက် tools တွေကိုပြန်နေရာချလို့ရပါတယ်။
Apple က Safari က (OS X ကိုသာ)
Safari ကရဲ့ကွဲပြားခြားနား dev toolset သူတို့ရဲ့ဒီဇိုင်းနှင့် programming ကိုလိုအပ်ချက်တစ်ခုက Mac အသုံးချသောကြီးမားသော developer အသိုင်းအဝိုင်းထင်ဟပ်။ အစွမ်းထက် console နဲ့ရိုးရာသစ်ထုတ်လုပ်ရေးနှင့်ဒီဘာဂင် features တွေတစ်ခုလွယ်ကူသော-to-အသုံးပြုမှုကိုတုံ့ပြန်မှုဒီဇိုင်း mode ကိုနှင့်သင့်ကိုယ်ပိုင်ဘရောက်ဇာကို extensions တွေကိုလည်းထောက်ပံ့ပေးနေကြသည်ကိုဖန်တီးရန်တစ် tool ကိုအပြင်၌။
- သင့်ရဲ့မျက်နှာပြင်၏ထိပ်မှာတည်ရှိပါတယ် browser ကိုမီနူးထဲမှာ Safari ကအပေါ်ကိုကလစ်နှိပ်ပါ။ drop-down menu ကပေါ်လာသောအခါ, Preferences ကိုရွေးချယ်ပါ။ သင်တို့သည်လည်းဤ menu item တခုကို၏အရပျ၌အောက်ပါကီးဘုတ် shortcut ကိုအသုံးပွုနိုငျ: COMMAND + ကော်မာ (,)
- Safari ကရဲ့ Preferences ကို interface ကိုယခုသင့် browser window ကို overlaying, ပြသရပါမည်။ အဆိုပါခေါင်းစဉ်၏ဝေးညာဘက်ခြမ်းပေါ်မှာတည်ရှိအဆင့်မြင့်အိုင်ကွန်ပေါ်တွင်ကလစ်နှိပ်ပါ။
- အဆိုပါအဆင့်မြင့်ဦးစားပေးယခုမြင်နိုင်ဖြစ်သင့်သည်။ ဤမျက်နှာပြင်၏အောက်ခြေတွင်သည့် option တစ်ခုဖြစ်သည် Show ကိုတစ်ဦး 'check box' ဖြင့်လိုက်ပါသွားမီနူးဘားအတွက်မီနူးကိုတိုးကပ်ထားပါတယ်။ သေတ္တာထဲတွင်ပြသထားခြင်းမရှိစစ်ဆေးမှုများအမှတ်အသားလည်းမရှိလြှငျ, အဲဒီမှာဦးတည်းနေရာတခါပေါ်မှာကလစ်လုပ်ပါ။
- အထက်လက်ဝဲလက်ထောင့်၌တွေ့ '' x ကို '' အနီရောင်ပေါ်တွင်နှိပ်ခြင်းအားဖြင့် Preferences ကို interface ကိုပိတ်လိုက်ပါ။
- ယခုသင် Bookmarks နဲ့ Windows ကြားကတည်ရှိထုတ်လုပ်မည်အမည်ရှိ browser ကို Menu ထဲမှာသစ်တစ်ခု option ကိုသတိထားမိသင့်ပါတယ်။ ဒီ menu ကိုကို item ပေါ်တွင်ကလစ်နှိပ်ပါ။ တစ်ဦးက Drop-down menu ကိုယခုအောက်ပါ options များပါဝင်တဲ့, ပြသရပါမည်။
အတူပွင့်လင်း 's Page: သင်လက်ရှိသင့် Mac ပေါ်မှာ install လုပ်ထားတဲ့အခြား browsers တွေထဲကတစ်ခုအတွက်တက်ကြွစွာ web page ကိုဖွင့်လှစ်ရန်ခွင့်ပြုသည်။
User Agent: သင်အများအပြားက Chrome, Firefox နဲ့ Internet Explorer ဗားရှင်းအဖြစ်သင့်ကိုယ်ပိုင်ထုံးစံ string ကိုသတ်မှတ်အပါအဝင်တစ်ဒါဇင် Pre-defined အသုံးပြုသူအေးဂျင့်တန်ဖိုးများကိုကျော်ထံမှ select လုပ်ခွင့်ပြုသည်။
Enter တုံ့ပြန်မှုဒီဇိုင်း Mode ကို : ကအမျိုးမျိုးသော devices များပေါ်နှင့်ကွဲပြားခြားနားသောမျက်နှာပြင်ဆုံးဖြတ်ချက်တွေမှာပေါ်လာလိမ့်မယ်အဖြစ်လက်ရှိစာမျက်နှာကိုပြန်ဆို။
Show ကို Web ကိုစစ်ဆေးရေး: Elements, ကွန်ယက်, အရင်းအမြစ်, Timeline, Debugger, သိုလှောင်ရေး, Console: ပုံမှန်အားဖြင့်သင့်ရဲ့ browser ကိုမျက်နှာပြင်၏အောက်ခြေတွင်ချထားအောက်ပါကဏ္ဍများပါဝင်သော, Safari ရဲ့ dev tools တွေအတွက်အဓိက interface ကိုစတင်။
Show ကိုမှားယွင်းနေသည် Console: စ dev tools တွေကိုတိုက်ရိုက်အမှားများကိုပြသသော Console အ tab ကိုမှ interface ကို, သတိပေးချက်များနှင့်အခြားရှာဖွေမှတ်တမ်းဒေတာလွှတ်တင်။
Show ကို 's Page ရင်းမြစ်: စာရွက်စာတမ်းကအမြိုးအစားတက်ကြွစွာစာမျက်နှာ source code ကိုဖော်ပြပေးသောအရင်းအမြစ်များ tab ကို, ဖွင့်မည်။
Show ကို 's Page အရင်းအမြစ်များ: အ Show ကို' s Page အရင်းအမြစ် option ကိုကဲ့သို့တူညီသော function ကိုလုပ်ဆောင်တယ်။
Show ကိုအတိုအထွာအယ်ဒီတာ: On-the-fly ဟာသူ့ရဲ့ output ကိုအစမ်းကြည့်, သင် CSS ကိုနဲ့ HTML code ကိုရိုက်ထည့်နိုင်ပါတယ်တဲ့ဝင်းဒိုးအသစ်ဖွင့်လှစ်။
Show ကိုတိုးချဲ့တည်ဆောက်: CSS ကို, HTML ကိုနှင့် JavaScript ကိုအတူ Safari က extensions တွေကိုဖန်တီးသို့မဟုတ်တည်းဖြတ်ရန်နိုင်စွမ်းပေး။
Show ကို Timeline ကိုမှတ်တမ်းတင်: အ Timeline tab ကိုဖွင့်လှစ်ခြင်းနှင့်ကွန်ယက်ကိုတောင်းဆိုမှုများ, layout ကိုများနှင့် rendering သတင်းအချက်အလက်အဖြစ်အမှန်တကယ်အချိန်အတွက် JavaScript ကိုသေဒဏ်စီရင်ပြသစတင်ခဲ့သည်။
အချည်းနှီးသော Caches: လက်ရှိတွင်သင့် hard drive ထဲမှာသိမ်းထားတဲ့ခံရတစ်ခုလုံးကို cache ကိုဖျက်ခံရမည်။
Caches Disable: အားလုံးအကြောင်းအရာတစ်ခုချင်းစီစာမျက်နှာဝန်ပေါ်မှာ server ကနေထုတ်ယူကြောင်းဒါကြောင့်ယာယီသိမ်းဆည်းရာမှ Safari ကရပ်လိုက်နိုင်သည်။
Images ကို Disable: အားလုံးက်ဘ်စာမျက်နှာများပေါ်တွင် rendering ကနေပုံရိပ်တွေကိုကာကွယ်ရန်။
Styles ကို Disable: တစ်စာမျက်နှာ loaded သောအခါ CSS ကိုဂုဏ်သတ္တိများလျစ်လျူရှု။
JavaScript ကို disable: အားလုံးစာမျက်နှာများပေါ်တွင် JavaScript ကိုကွပ်မျက်ကန့်သတ်။
Extensions Disable: အားလုံး installed တားမြစ်ထား extensions တွေကို browser ကိုအတွင်းပြေးမှ။
ဆိုက်ကို-တိကျတဲ့ Hack Disable: Safari ကအတိအလင်းတက်ကြွစွာက်ဘ်စာမျက်နှာကိုတိကျတဲ့ပြဿနာ (s) ကိုကိုင်တွယ်ရန်ပြုပြင်လိုက်ပါက အကယ်. ဤပြုပြင်မွမ်းမံမိတ်ဆက်ခံရဖို့ကြိုတင်ရှိသည်မယ်လို့အဖြစ်, ဤ option စာမျက်နှာဝန်ဒါကြောင့်သူတို့အအပြောင်းအလဲများကိုပိတ်ဆို့ပါလိမ့်မယ်။
ဒေသခံဖိုင်မှတ်တမ်းကန့်သတ် Disable: လုံခြုံရေးအကြောင်းပြချက်များအတွက် default အနေဖြင့်ကန့်သတ်ကြောင်းလုပ်ဆောင်ချက်တစ်ခု, browser ကိုသင့်ဒေသခံ disk တွေအပေါ်ဖိုင်များကိုအသုံးပြုခွင့်ရှိသည်အားခွင့်ပြုပါ။
Cross-မူလအစကန့်သတ် Disable: ဤကန့်သတ် XSS နှင့်အခြားအလားအလာအန္တရာယ်များကိုကာကွယ်တားဆီးဖို့ default အနေဖြင့်အရပျ၌ထားရသည်။ သို့သော်သူတို့ကမကြာခဏယာယီဖှံ့ဖွိုးတိုးတရည်ရွယ်ချက်များအတွက်ပိတ်ထားခံရဖို့လိုအပ်ပါတယ်။
စမတ်ရှာရန် Field မှ JavaScript ကိုခွင့်ပြုပါ: enabled အခါ Javascript နှင့်အတူ URL များကိုရိုက်ထည့်ပါနိုင်စွမ်းပေးပါသည်: လိပ်စာဘားသို့တိုက်ရိုက်ထည့်သွင်း။
လုံခြုံမှုမရှိသောအဖြစ် SHA-1 လက်မှတ်ပြုမူဆက်ဆံ: အကိုအသုံးပြုပြီး SSL ကိုလက်မှတ်များ တွင် SHA-1 algorithm ကို ကျယ်ပြန့်၏-date ဖြစ်အောင်ထွက်များနှင့်အားနည်းချက်ဖြစ်စဉ်းစားနေကြသည်။