တိုင်း Browser ကိုတစ်ဦးက Web Page ကို၏ရငျးမွစျ Code ကို View ကိုဘယ်လို

သငျသညျကိုဖတ်ရှုနေသောဝဘ်စာမျက်နှာကိုအခြားအမှုအရာ, source code ကိုအနက်ဖွင့်ထားခြင်းဖြစ်ပါသည်။ သောသတင်းအချက်အလက်သင်၏ဝဘ်ဘရောက်ဇာကိုဒေါင်းလုဒ်င်နှင့်သင်အခုဖတ်နေနေကြတယ်ဆိုတာကိုသို့ဘာသာပြန်ပေးသည်။

အများစုက web browsers တွေနေပါစေသင်သည်ပေါ်မှာဆိုရင် device ကိုအဘယ်အမျိုးအစားလိုအပ်မျှအပိုဆောင်း software နှင့်ဝဘ်စာမျက်နှာ၏ source code ကိုကြည့်ဖို့နိုင်စွမ်းသည်။

တချို့ကတောင်မှလွယ်ကူ peruse မှအောင်, အဆင့်မြင့်လုပ်ဆောင်နိုင်စွမ်းနဲ့ဖွဲ့စည်းပုံမှာမပူဇော် HTML ကို စာမျက်နှာပေါ်နှင့်အခြား programming ကိုကုဒ်။

အဘယ်ကြောင့်သင်ကသူနဲ့သက်ဆိုင်တဲ့ Source Code ကိုကြည့်ရှုပါစေချင်ပါ့မလား

သင်တစ်ဦးစာမျက်နှာရဲ့ source code ကိုကြည့်ဖို့လိုပေမည်အဘယ်ကြောင့်အများအပြားအကြောင်းပြချက်ရှိပါတယ်။ သင်တစ်ဦးကို web developer ဆိုရင်, ဖြစ်ကောင်းသင်သည်အခြားပရိုဂရမ်မာရဲ့အထူးသဖြင့်စတိုင်သို့မဟုတ်အကောင်အထည်ဖော်မှုမှာအဖုံးများအောက်တွင်တစ်ဦး peek ယူချင်ပါတယ်။ ဒီတစ်ခါလည်းသင်အရည်အသွေးကိုအာမခံချက်ရောက်နေနှင့်တဲ့ web စာမျက်နှာ၏အချို့အစိတ်အပိုင်းတစ်ခုကလမ်းကို rendering သို့မဟုတ်ပြုမူသည်ကိုအဘယ်ကြောင့်သိရှိနိုင်ရန်ဖို့ကြိုးစားနေကြတယ်။

သင်တို့သည်လည်းသင့်ရဲ့ကိုယ်ပိုင်စာမကျြနှာ code ရန်နှင့်အချို့သောအစစ်အမှန်ကမ္ဘာဥပမာရှာနေကြသည်ကိုဘယ်လိုလေ့လာသင်ယူဖို့ကြိုးစားနေတဲ့အစပြုသူဖြစ်နိုင်ပါတယ်။ ဟုတ်ပါတယ်, သင်တို့သည်ဤအမျိုးအစားမဆိုထဲသို့ကျရုံသက်သက်သိချင်စိတ်ထဲကအရင်းအမြစ်ကြည့်ရှုရန်မလိုချင်ကြဘူးကြောင်းတတ်နိုင်သမျှပါပဲ။

အောက်တွင်ဖော်ပြထားသောရွေးချယ်မှုသင့်ရဲ့ browser မှာ source code ကိုကြည့်ရှုရန်မည်သို့ညွှန်ကြားချက်ဖြစ်ကြသည်။

Google Chrome က

Chrome OS ကို, Linux MacOS, Window: ပေါ်အပြေး

CTRL + ဦး (MacOS ပေါ်တွင် COMMAND + option + U): Chrome ရဲ့ Desktop version ကိုစာမျက်နှာရဲ့ source code ကိုကြည့်ရှုဘို့သုံးကွဲပြားခြားနားသောနည်းလမ်းများအောက်ပါကီးဘုတ် shortcut ကိုအသုံးပြုခြင်းအားဖြင့်ပထမဦးဆုံးနှင့်အများဆုံးအရိုးရှင်းဆုံးပေးထားပါတယ်။

ဖိလိုက်တဲ့အခါ, ဒီဖြတ်လမ်းတက်ကြွစွာစာမျက်နှာများအတွက် HTML ကိုများနှင့်အခြားကုဒ်ပြသသစ်တစ်ခုကို browser tab ကိုဖွင့်လှစ်။ ဒါဟာအရင်းအမြစ်ကရိုးရှင်းတဲ့ compartmentalize နှင့်သင်ရှာနေတာကိုရှာဖွေစေသည်တဲ့ထုံးစံ၌ color-coded နှင့်စနစ်တကျဖြစ်ပါတယ်။ သင်တို့သည်လည်းဝဘ်စာမျက်နှာရဲ့ဘယ်ဖက်ခြမ်းမှဖြည့်တွဲ Chrome ၏ address bar မှာအောက်ပါစာသား, ရိုက်ထည့်ခြင်းဖြင့်ရှိရနိုင် URL ကို အမြင်-Source: များနှင့်သော့ချက် Enter နှိပ် (ဆိုလိုသည်မှာအမြင်-Source: https: // www ။ ) ။

တတိယနည်းလမ်း Chrome ၏မှတဆင့်ဖြစ်ပါတယ် developer tools များ သငျသညျစာမျက်နှာ၏ကုဒ်သို့ပိုမိုနက်ရှိုင်းငုပ်ယူအဖြစ်စမ်းသပ်ခြင်းနှင့်ဖွံ့ဖြိုးရေးရည်ရွယ်ချက်များအတွက် On-the-fly က tweaks ဖို့ခွင့်ပြုထားတဲ့။ CTRL + SHIFT + I ကို (MacOS ပေါ်တွင် COMMAND + option + I ကို): အဆိုပါဆော့ဖ်ဝဲရေးသူ tools တွေ interface ကိုဒီကီးဘုတ် shortcut ကိုအသုံးပြုခြင်းအားဖြင့်ဖွင့်လှစ်ခြင်းနှင့်ပိတ်ထားနိုင်ပါတယ်။ သင်တို့သည်လည်းအောက်ပါလမ်းကြောင်းယူခြင်းအားဖြင့်သူတို့ကိုဖွင့်နိုင်ပါ။

1. အထက်ညာဖက်ထောင်တည်ရှိသော Chrome ၏ main menu ကိုခလုတ်ပေါ်တွင် Click နဲ့သုံးဒေါင်လိုက်-aligned အစက်ကကိုယ်စားပြု။
2. drop-down menu ကပေါ်လာသောအခါ, ပို tools တွေကို option ကိုကျော်သင့်ရဲ့ mouse ကို cursor ပျံဝဲ။
3. အဆိုပါ sub-menu ကိုပုံပေါ်သည့်အခါရေးသားသူ tools များပေါ်ကလစ်နှိပ်ပါ။

အန်းဒရွိုက်
Android အတွက် Chrome မှာဝဘ်စာမျက်နှာရဲ့အရင်းအမြစ်ကိုကြည့်ရှုခြင်းက၎င်း၏လိပ်စာ (သို့မဟုတ် URL) ၏ရှေ့မှအောက်ပါစာသားကို appending ကတင်ပြသကဲ့သို့ရိုးရှင်းတဲ့ဖြစ်ပါသည်: အမြင်-Source: ။ ဒီဥပမာတစ်ခုမြင်ကွင်းကို-Source လိမ့်မယ်: https: // www ။ ။ ဆိုတဲ့မေးခွန်းကိုအတွက်စာမျက်နှာကနေ HTML ကိုများနှင့်အခြားကုဒ်ချက်ချင်းတက်ကြွစွာ window တွင်ပြသပါလိမ့်မည်။

iOS အတွက်
သင့်ရဲ့ iPad, iPhone, iPod touch တွင် Chrome ကိုသုံးပြီး source code ကိုကြည့်ရှုစရာဇာတိနည်းလမ်းများရှိပါသည်နေစဉ်, အရိုးရှင်းဆုံးနှင့်ထိရောက်မှုအရှိဆုံးဖြစ်သော View Source app ကိုအဖြစ် Third-party ဖြေရှင်းချက်အသုံးချဖို့ဖြစ်ပါတယ်။

App Store မှာ $ 0.99, View Source စာမျက်နှာ၏ URL ကိုရိုက်ထည့်ရန်သင့်အားပြ (သို့မဟုတ်မိတ္တူ / တစ်ခါတစ်ရံယူဖို့အတွက်အရိုးရှင်းဆုံးလမ်းကြောင်းဖြစ်သည့် Chrome ၏လိပ်စာဘား, ကနေ paste) နှင့်ကန့်အဘို့အမရရှိနိုင်ပါ။ HTML ကိုများနှင့်အခြား source code ကိုဖေါ်ပြခြင်းအပြင်, app ကိုလည်းတစ်ဦးချင်းစီစာမျက်နှာပိုင်ဆိုင်မှုပြသရန်ကြောင်း tabs များ, အစာရွက်စာတမ်း Object ကိုမော်ဒယ် (DOM) အဖြစ်စာမျက်နှာအရွယ်အစားရှိပြီး cookies တွေကို နှင့်အခြားစိတ်ဝင်စားဖွယ်အသေးစိတ်အချက်အလက်များကို။

မိုက်ကရိုဆော့ဖ Edge

Windows ကို: ပေါ်အပြေး

အဆိုပါ Edge browser ကိုသငျသညျ, ရှုမြင်ခွဲခြမ်းစိတ်ဖြာနှင့်ပင်၎င်း၏မှတဆင့်လက်ရှိစာမျက်နှာရဲ့ source code ကို manipulate ပေးနိုင်ပါတယ် ပြုစုသူကိရိယာများ interface ကို။ F12 သို့မဟုတ် CTRL + ဦး: ဤနေရာလေးကို toolset ဝင်ရောက်ဖို့သင်တို့သည်ဤ keyboard shortcuts တွေကိုတစ်ဦးကိုသုံးနိုင်သည်။ သငျသညျအစား mouse ကိုပိုနှစ်သက်လိုပါက, Edge ရဲ့ menu ကို button ကို click (သုံးစက်အထက်ညာဖက်ထောင်တွင်တည်ရှိသည်) နှင့် list ကနေ F12 ရေးသားသူ 'Tools' option ကိုရွေးပါ။

အဆိုပါ dev tools တွေကိုပထမဦးဆုံးအကြိမ်အဘို့အပြေးနေကြပြီးနောက်, Edge ကို browser ရဲ့ Context Menu က (Right-ကိုနှိပ်ခြင်းအားဘယ်နေရာမှာမဆိုတစ်ဦးဝဘ်စာမျက်နှာအတွင်းအားဖြင့်လက်လှမ်း) နှစ်အပိုဆောင်းရွေးချယ်စရာကထပ်ပြောသည်: အ dev ၏ Debugger သောအဘို့ကိုဖွင့်လှစ်သောဒြပ်စင်များနှင့်ကြည့်ရန်အရင်းအမြစ်ကိုစုံစမ်းရန်အဆုံးစွန် source code ကိုနှင့်အတူလူနေထူထပ် tools တွေကိုအင်တာဖေ့စ။

Mozilla Firefox ကို

Linux ကို, MacOS, Window: ပေါ်အပြေး

Firefox ကို၏ desktop ကိုဗားရှင်းအတွက်စာမျက်နှာရဲ့ source code ကိုကြည့်ရှုရန်သငျသညျက HTML နှင့်တက်ကြွသောဝဘ်စာမျက်နှာအခြားကုဒ််သစ်တစ်ခု tab ကိုဖွင့်လှစ်ပါလိမ့်မယ်အရာ, သင့်ကီးဘုတ်ပေါ်က Ctrl + ဦး (MacOS ပေါ်တွင် COMMAND + U) ကိုနှိပ်နိုင်ပါတယ်။

အမြင်-Source: တိုက်ရိုက်စာမျက်နှာ၏ URL ကိုရဲ့ဘယ်ဘက်မှ Firefox ကိုရဲ့လိပ်စာဘားထဲသို့အောက်ပါစာသား, စာရိုက်, တူညီတဲ့ source ကိုအစားလက်ရှိ tab ကိုဖွင့်ပြပါစေမည် (ဆိုလိုသည်မှာအမြင်-Source: https: ။ : // www) ။

စာမျက်နှာရဲ့ source code ကိုဝင်ရောက်ဖို့နောက်ထပ်နည်းလမ်းအောက်ပါအဆင့်တွေကိုယူနေဖြင့်လက်လှမ်း, Firefox ကိုဖွင့် developer tools များအားဖွငျ့ဖွစျသညျ။

1. သင့် browser window ၏ညာဘက်ထောင့်တွင်တည်ရှိသော main menu ကိုခလုတ်ပေါ်တွင် Click နဲ့သုံးအလျားလိုက်လိုင်းကကိုယ်စားပြု။
2. pop-ထွက် menu ကိုပုံပေါ်သောအခါ, ရေးသားသူ "လိမ်ဖဲ့ခြင်း" icon လေးပေါ်ကလစ်နှိပ်ပါ။
3. အဆိုပါ Web Developer Context Menu ကယခုမြင်နိုင်ဖြစ်သင့်သည်။ အဆိုပါစာမျက်နှာရင်းမြစ် option ကိုရွေးချယ်ပါ။

Firefox ကိုလည်းသင်ကလွယ်ကူသောကိစ္စများခွဲထုတ်ဖို့အောင်, စာမျက်နှာ၏တစ်ဦးအထူးသဘို့ source code ကိုကြည့်ရှုနိုင်တယ်။ အဲဒီလိုလုပ်ဖို့, ပထမဦးဆုံးသင့်ရဲ့ mouse ကိုအတူစိတ်ဝင်စားသောဧရိယာကိုမီးမောင်းထိုးပြ။ ထို့နောက်ဘရောက်ဇာကိုဖွင့်အခြေအနေတွင် menu ကနေကြည့်ရန်ရွေးချယ်ရေးရင်းမြစ် right-click လုပ်ပြီးရွေးပါ။

အန်းဒရွိုက်
အမြင်-Source: Firefox ကို၏အန်းဒရွိုက်ဗားရှင်း၏ source code ကိုကြည့်ရှုခြင်းအောက်ပါစာသားကိုအတူဝဘ်စာမျက်နှာရဲ့ URL prefixing ဖြင့်အောင်မြင်မှုများအတွက်ဖြစ်ပါတယ်။ အမြင်-Source: https: // www ဥပမာအားဖြင့်, သင်ဘရောက်ဇာရဲ့လိပ်စာဘားမှာအောက်ပါစာသားကိုတင်ပြချင်ပါတယ်များအတွက် HTML ကို source ကိုကြည့်ရှုရန်။ ။

iOS အတွက်
သင့်ရဲ့ iPad, iPhone, iPod touch တွင်ဝဘ်စာမျက်နှာ source code ကိုကြည့်ရှုဘို့ငါတို့အကြံပြုနည်းလမ်း $ 0.99 များအတွက် App Store မှာရရှိနိုင်, View ရင်းမြစ် app ကိုတဆင့်ဖြစ်ပါတယ်။ Firefox ကိုနှင့်တိုက်ရိုက်ပေါင်းစည်းမဟုတ်နေစဉ်, သင်အလွယ်တကူ HTML နဲ့မေးခှနျးအတှကျအတွက်စာမျက်နှာနဲ့ဆက်စပ်သည်အခြားကုဒ်မိတ်ဆက်နိုင်ရန်အတွက် app ကိုစ browser ကနေတစ်ဦး URL ကိုကော်ပီကူးခြင်းနှင့် paste နိုင်ပါတယ်။

Apple က Safari က

iOS နှင့် MacOS ပေါ်တွင်အပြေး

iOS အတွက်
ရရှိနိုင် App Store မှာ $ 0.99 အဘို့ - iOS အတွက် Safari ကပုံမှန်အားဖြင့်စာမျက်နှာအရင်းအမြစ်ကြည့်ရှုရန်စွမ်းရည်များမပါဝင်ပါသော်လည်း, Browser ကို View Source App နဲ့မဟုတ်ဘဲချောမွေ့စွာပေါင်းစပ်ထားဘူး။

အဆိုပါဝေမျှမယ်ခလုတ်ကိုအပေါ် Safari ကဘရောက်ဇာများနှင့်ထိပုတ်ပါရန်ဤ Third-party app ကိုပြန်လာ install လုပ်ပြီးနောက်, မျက်နှာပြင်၏အောက်ခြေတွင်ပေါ်တွင်တည်ရှိပြီးနှင့်စတုရန်းနှင့်တစ်ခုတက်မြှားခြင်းဖြင့်ကိုယ်စားပြုသည်။ အဆိုပါ iOS ကိုဝေမျှမယ်စာရွက်ယခုသင့် Safari က window ၏အောက်ပိုင်းတစ်ဝက် overlaying, မြင်နိုင်ဖြစ်သင့်သည်။ ညာဘက် scroll နှင့် View Source button ကို select လုပ်ပါ။

တက်ကြွစွာစာမျက်နှာရဲ့ source code ကိုတစ် color-coded, စနစ်တကျကိုယ်စားပြုမှုကိုသင်တို့အားယခုစာမျက်နှာပိုင်ဆိုင်မှု, script များနှင့်ပိုပြီးကြည့်ရှုရန်ခွင့်ပြုတော်မူသောအခြားအ tabs များနှင့်အတူပြသရပါမည်။

MacOS
Safari က၏ desktop ကိုဗားရှင်းအတွက်စာမျက်နှာ၏ source code ကိုကြည့်ရှုရန်, သင်ပထမဦးဆုံးက၎င်း၏ထုတ်လုပ်မည် menu ကိုဖွင့်ဖို့လိုတယ်။ အောက်ကအဆင့်များကဤအရာ၌ဝှက်ထားသော menu ကိုသက်ဝင်နှင့်စာမျက်နှာရဲ့ HTML ကို source ကိုပြသအားဖြင့်သင်တို့သွားလာရကြ၏။

1. မျက်နှာပြင်ရဲ့ထိပ်ပိုင်းမှာတည်ရှိပါတယ် browser ကိုမီနူးထဲမှာ Safari ကအပေါ်ကိုကလစ်နှိပ်ပါ။
2. drop-down menu ကပေါ်လာသောအခါ, Preferences ကို option ကိုရွေးပါ။
3. Safari ကရဲ့ Preferences ကိုယခုမြင်နိုင်ဖြစ်သင့်သည်။ ထိပ်တန်း၏ဝေးညာဘက်ခြမ်းပေါ်မှာတည်ရှိအဆင့်မြင့်အိုင်ကွန်ပေါ်တွင်ကလစ်နှိပ်ပါ။
4. Advanced အပိုင်း၏အောက်ခြေကိုဦးတည်ထားတဲ့ဗလာ checkbox ကိုလိုက်ပါ menu bar ထဲကအတွက်မီနူးကိုတိုးတစ်ခု option ကိုတံဆိပ်ကပ်ပြရန်ဖြစ်ပါသည်။ ဒါကြောင့်တစ်ဦးစစ်ဆေးမှုများအမှတ်အသားနေရာတခါဤ box ပေါ်တွင်ကလစ်နှိပ်ပါနှင့်အထက်လက်ဝဲလက်ထောင့်၌တွေ့ '' x ကို '' အနီရောင်ပေါ်တွင်နှိပ်ခြင်းအားဖြင့် Preferences ကိုပြတင်းပေါက်ပိတ်ပါ။
5. မျက်နှာပြင်ရဲ့ထိပ်ပိုင်းမှာတည်ရှိပါတယ်ဖွံ့ဖြိုးတိုးတက်ရေးအတွက် menu ကိုအပေါ်ကိုကလစ်နှိပ်ပါ။
6. drop-down menu ကပေါ်လာသောအခါ, Show ကို 's Page အရင်းအမြစ်ကိုရွေးပါ။ သင်တို့သည်လည်းအစားအောက်ပါကီးဘုတ် shortcut ကိုအသုံးပွုနိုငျ: COMMAND + option + U ။

တေးသံစုံကဇါတ်

Linux ကို, MacOS, Window: ပေါ်အပြေး

CTRL + ဦး (MacOS ပေါ်တွင် COMMAND + option + U): အဆိုပါအော်ပရာ browser မှာတက်ကြွစွာဝဘ်စာမျက်နှာကနေ source code ကိုကြည့်ရှုရန်အောက်ပါကီးဘုတ် shortcut ကိုအသုံးပြုပါ။ သငျသညျအစားလက်ရှိ tab မှာအရင်းအမြစ် loading ပိုနှစ်သက်ချင်ပါတယ်လျှင်, လိပ်စာဘားအတွင်းစာမျက်နှာ၏ URL ကိုရဲ့ဘယ်ဘက်မှအောက်ပါစာသားကိုရိုက် Enter hit: အမြင်-Source: (ဆိုလိုသည်မှာအမြင်-Source: https: // www ။ ) ။

အော်ပရာရဲ့ Desktop version ကိုလည်းယင်း၏ဘက်ပေါင်းစုံ အသုံးပြု. HTML ကိုအရင်းအမြစ်, CSS ကိုများနှင့်အခြားဒြပ်စင်များကြည့်ရှုရန်သငျသညျခွင့်ပြု developer tools တွေ ။ CTRL + SHIFT + I ကို (MacOS ပေါ်တွင် COMMAND + option + I ကို): အောက်ပါကီးဘုတ်ဖြတ်လမ်း, ဒီ interface ကိုဖွင့်ဖို့ကို default အားဖြင့်သင့်အဓိက browser ကိုပြတင်းပေါက်၏ညာဘက်ခြမ်းတွင်ပေါ်လာပါလိမ့်မယ်အရာ, နှိပ်ပါ။

အော်ပရာရဲ့ developer toolset ကိုလည်းအောက်ပါအဆင့်တွေကိုယူနေဖြင့်လက်လှမ်းဖြစ်ပါတယ်။

1. သင့် browser window ၏အထက်လက်ဝဲလက်ထောင့်တွင်တည်ရှိသောအော်ပရာလိုဂိုပေါ်တွင်ကလစ်နှိပ်ပါ။
2. drop-down menu ကပေါ်လာသောအခါ, ပို tools တွေကို option ကိုကျော်သင့်ရဲ့ mouse ကို cursor ပျံဝဲ။
3. Show ကိုဆော့ဖ်ဝဲရေးသူ menu ပေါ်တွင်ကလစ်နှိပ်ပါ။
4. ထပ်အော်ပရာလိုဂိုပေါ်တွင်ကလစ်နှိပ်ပါ။
5. drop-down menu ကပေါ်လာသောအခါ, ရေးသားသူကျော်သင့်ရဲ့ cursor ပျံဝဲ။
6. အဆိုပါ sub-menu ကိုပုံပေါ်သည့်အခါပြုစုသူကိရိယာများအပေါ်ကိုကလစ်နှိပ်ပါ။

Vivaldi

အဆိုပါ Vivaldi browser ကိုအတွင်းစာမျက်နှာအရင်းအမြစ်ကြည့်ရှုရန်မျိုးစုံနည်းလမ်းတွေရှိပါတယ်။ အရိုးရှင်းဆုံးအသစ်တစ်ခု tab မှာတက်ကြွစွာစာမျက်နှာကနေ code ကိုတင်ဆက်သော CTRL + ဦးကီးဘုတ် shortcut ကိုမှတဆင့်ဖြစ်ပါတယ်။

အမြင်-Source: ကိုလည်းသင်ပစ္စုပ္ပန် tab မှာ source code ကိုဖော်ပြပေးထားတဲ့စာမျက်နှာ၏ URL ကို၏ရှေ့မှအောက်ပါစာသားကိုထပ်ထည့်နိုင်သည်။ ဒီဥပမာတစ်ခုမြင်ကွင်းကို-Source လိမ့်မယ် http: // www ။ ။

အထက်လက်ဝဲလက်ထောင့်ရှိ '' V ကို '' လိုဂိုပေါ်တွင်နှိပ်ခြင်းအားဖြင့်တွေ့ရှိရ - နောက်ထပ်နည်းလမ်း CTRL + + I ကိုပေါင်းစပ် SHIFT ဒါမှမဟုတ် browser ကိုဖွင့် Tools များ Menu ထဲမှာရေးသားသူ 'Tools' option မှတဆင့်နှိပ်ခြင်းဖြင့်သုံးစွဲနိုင်သည်ဘရောက်ဇာရဲ့ပေါင်းစည်း developer tools များအားဖွငျ့ဖွစျသညျ။ အဆိုပါ dev tools တွေကိုသုံးပြီးစာမျက်နှာရဲ့အရင်းအမြစ်တစ်ဦးပိုပြီး In-depth ကိုခွဲခြမ်းစိတ်ဖြာဘို့ခွင့်ပြုပါတယ်။