प्रत्येक ब्राऊझरमध्ये वेब पृष्ठाचा स्त्रोत कोड कसा पहावा

आपण वाचत असलेले वेब पृष्ठ, इतर गोष्टींमधील, स्त्रोत कोडमध्ये बनलेले आहे. हीच माहिती आपल्या वेब ब्राऊजरची माहिती आहे आणि आपण सध्या काय वाचत आहात हे भाषांतरित आहे.

बहुतेक वेब ब्राऊझर वेब पृष्ठाचा स्रोत कोड पाहण्याची क्षमता प्रदान करतात ज्यात कोणतेही अतिरिक्त सॉफ्टवेअर आवश्यक नाही, आपण कोणत्या प्रकारचे डिव्हाइस आहात हे महत्त्वाचे नाही

काहींना प्रगत कार्यक्षमता आणि मांडणी देतात, जेणेकरुन ते पृष्ठावर एचटीएमएल व इतर प्रोग्रामिंग कोड वापरणे सोपे होते.

आपण सोर्स कोड पाहू इच्छिता का?

पृष्ठाचे स्त्रोत कोड पाहण्याची बर्याच कारणे आहेत. आपण एक वेब डेव्हलपर असल्यास, कदाचित आपण दुसर्या प्रोग्रामरच्या विशिष्ट शैली किंवा अंमलबजावणीवरील कव्हरच्या खाली डोकावून पाहू इच्छित आहात. कदाचित आपण गुणवत्तेची आश्वासने बाळगता आहात आणि वेब पृष्ठाचा एखादा विशिष्ट भाग ज्या पद्धतीने सादर करत आहे त्या पद्धतीने वागणे किंवा ती वागणे हे जाणून घेण्याचा प्रयत्न करीत आहेत.

आपण आपल्या स्वत: च्या पृष्ठांना कसे कोड करावे ते जाणून घेण्याचा प्रयत्न करीत आहोत आणि काही वास्तविक जगाची उदाहरणे शोधत आहात अशी सुरुवात देखील होऊ शकते. अर्थात, हे शक्य आहे की आपण यापैकी कोणत्याही श्रेणीमध्ये न पडता आणि केवळ प्रामाणिक जिज्ञासातून स्त्रोत पाहू इच्छिता.

पसंतीच्या आपल्या ब्राउझरमध्ये स्त्रोत कोड कसे पाहावे याबद्दल खाली सूचीबद्ध केले आहे.

गुगल क्रोम

चालू आहे: Chrome OS, Linux, MacOS, Windows

Chrome ची डेस्कटॉप आवृत्ती, खालील कीबोर्ड शॉर्टकट वापरून प्रथम आणि सर्वात सोपी पृष्ठाच्या स्रोत कोड पाहण्यासाठी तीन वेगवेगळ्या पद्धती ऑफर करते: CTRL + U (MacOS वर COMMAND + OPTION + U )

दाबल्यानंतर, हा शॉर्टकट सक्रिय पृष्ठासाठी HTML आणि इतर कोड प्रदर्शित करणारा एक नवीन ब्राउझर टॅब उघडतो. हे स्रोत रंग-कोडित आणि अशा पद्धतीने रचना केलेले आहे ज्यामुळे ते एकत्र करणे आणि आपण काय शोधत आहात हे शोधणे सोपे होते. आपण Chrome च्या अॅड्रेस बारमध्ये खालील मजकूर प्रविष्ट करून, वेब पृष्ठाच्या URL च्या डाव्या बाजूला जोडलेल्या आणि एन्टर की प्रविष्ट करून देखील मिळवू शकता: दृश्य-स्त्रोत: (अर्थात, दृश्य-स्रोत: https: // www .)

तिसरी पद्धत म्हणजे Chrome च्या विकसक उपकरणांद्वारे , ज्यामुळे आपल्याला पृष्ठाच्या कोडमध्ये अधिक सखोल जाण्याची तसेच ते ऑन-द-फ्लाईट चाचणी आणि विकास हेतूसाठी चिमटा करण्यास परवानगी देते. हा कीबोर्ड शॉर्टकट वापरून विकासक साधने इंटरफेस उघडला आणि बंद केला जाऊ शकतो: CTRL + SHIFT + I (MacOS वर COMMAND + OPTION + I ). आपण खालील मार्ग घेऊन त्यांना सुरू करू शकता.

1. वरच्या उजव्या-हाताच्या कोपर्यात असलेल्या Chrome च्या मुख्य मेनू बटणावर क्लिक करा आणि तीन अनुलंब-संरेखित बिंदूंद्वारे प्रस्तुत केले गेले आहे
2. जेव्हा ड्रॉप-डाउन मेनू दिसेल, तेव्हा आपला माउस कर्सर अधिक साधने पर्यायावर फिरवा.
3. उप-मेन्यू दिसेल तेव्हा, विकसक साधनांवर क्लिक करा.

Android
Android साठी Chrome मध्ये वेब पृष्ठाचा स्त्रोत पहाणे खालील मजकूरास त्याच्या पत्त्याच्या (किंवा URL) पुढील बाजूशी संलग्न करणे आणि सबमिट करणे तितकेच सोपे आहे: दृश्य-स्रोत:. याचे उदाहरण पाहू-स्रोत असेल: https: // www . प्रश्नातील पृष्ठावरून HTML आणि अन्य कोड सक्रिय विंडोमध्ये झटपट प्रदर्शित केले जातील.

iOS
आपल्या आयपॅड, आयफोन किंवा आयपॉड टचवर Chrome वापरून स्त्रोत कोड पाहण्याची कोणतीही मूळ पद्धती नसतात, तर सोर्सिंग अॅप्लिकेशन्ससारख्या तृतीय-पक्षाचा पर्याय वापरणे सर्वात सोपा आणि सर्वात प्रभावी आहे.

अॅप स्टोअरमध्ये $ 0.9 9 साठी उपलब्ध, स्त्रोत पहा आपल्याला पृष्ठाची URL प्रविष्ट करण्यासाठी सूचित करेल (किंवा Chrome च्या अॅड्रेस बारमध्ये कॉपी करा / पेस्ट करा जे कधी कधी सोपा मार्ग आहे) आणि असेच आहे. एचटीएमएल व इतर सोअर्स कोड दर्शविण्याव्यतिरिक्त, ऍपमध्ये टॅब्ज देखील असतात ज्यात वैयक्तिक पृष्ठ मालमत्ता, डॉक्युमेंट ऑब्जेक्ट मॉडेल (डीओएम), तसेच पृष्ठ आकार, कुकीज आणि इतर रुचिपूर्ण माहिती प्रदर्शित होतात.

मायक्रोसॉफ्ट एज

चालू आहे: विंडोज

एज ब्राउझर आपल्याला आपल्या विकसक साधनांच्या इंटरफेसद्वारे वर्तमान पृष्ठाचे स्त्रोत कोड पाहण्यास, तिचे विश्लेषण करण्यास आणि त्यास हे करू देतो. या सुलभ साधनास ऍक्सेस करण्यासाठी आपण या पैकी एखादा कीबोर्ड शॉर्टकट वापरू शकता: F12 किंवा CTRL + U. त्याऐवजी आपण माउस पसंत असल्यास, एडिज मेनू बटणावर क्लिक करा (वरील उजव्या हाताच्या कोपर्यात तीन बिंदु आहेत) आणि सूचीमधून F12 Developer Tools पर्याय निवडा.

डेव्ह टूल प्रथमच चालू झाल्यानंतर, एज दोन अतिरिक्त पर्याय ब्राउझरच्या संदर्भ मेनूमध्ये (वेब ​​पेजवर कुठेही उजवे-क्लिक करून उपलब्ध आहे) जोडते: घटक तपासणी करा आणि स्रोत पहा , नंतरचे जे डीबगरचे भाग उघडते साधने इंटरफेस स्त्रोत कोडसह पॉप्युलेट करतात.

Mozilla Firefox

चालू आहे: Linux, macOS, Windows

फायरफॉक्सच्या एका डेस्कटॉप वर्गात पान पहाण्यासाठी आपण आपल्या कीबोर्डवरील CTRL + U (मॅकओएस वर कमांड + यू ) दाबू शकता, जे एक्टिव वेब पेजसाठी एचटीएमएल आणि अन्य कोड असलेले नवीन टॅब उघडेल.

खालील मजकूरास पानाच्या URL च्या डाव्या बाजूला असलेल्या फायरफॉक्सच्या अॅड्रेस बारमध्ये टाईप केल्याने त्या स्त्रोतास त्याऐवजी वर्तमान टॅबमध्ये दर्शविले जाईल: दृश्य-स्त्रोत: (म्हणजेच, पहा-स्त्रोत: https: // www.) .

पृष्ठाच्या स्रोत कोडमध्ये प्रवेश करण्याचा दुसरा मार्ग म्हणजे फायरफॉक्सच्या विकसक उपकरणांद्वारे, खालील चरणांचे अनुसरण करून प्रवेशयोग्य.

1. आपल्या ब्राउझर विंडोच्या वरील उजवीकडील कोपर्यात असलेल्या मुख्य मेनू बटणावर क्लिक करा आणि तीन क्षैतिज ओळी दर्शविल्या
2. जेव्हा पॉप-आऊट मेनू दिसत असेल, तेव्हा विकसक "पाना" चिन्ह क्लिक करा.
3. वेब विकसक संदर्भ मेनू आता दृश्यमान असावा. पृष्ठ स्त्रोत पर्याय निवडा.

फायरफॉक्स तुम्हाला पृष्ठाच्या एका विशिष्ट भागासाठी सोर्स कोडदेखील पाहण्यास मदत करते, यामुळे अडचणी दूर करणे सोपे होते. असे करण्यासाठी, प्रथम आपल्या माउससह आपल्याला आवडणारी क्षेत्र प्रकाशित करा. पुढे, उजवे क्लिक करा आणि ब्राउझरच्या संदर्भ मेनूमधून दृश्य स्त्रोत निवडा.

Android
फायरफॉक्सच्या अँड्रॉइड वर्जन मध्ये स्त्रोत कोड बघणे खालील मजकूरासह वेब पेजच्या URL वर पूर्वप्रिक्स करणे प्राप्त होऊ शकते: view-source:. उदाहरणार्थ, आपल्यासाठी HTML स्त्रोत पाहण्यासाठी आपण ब्राउझरच्या अॅड्रेस बारमध्ये खालील मजकूर सबमिट कराल: दृश्य-स्रोत: https: // www. .

iOS
आपल्या iPad, iPhone किंवा iPod Touch वर वेब पृष्ठ स्त्रोत कोड पाहण्यासाठीची शिफारस केलेली पद्धत व्हॉइस स्रोत अॅपद्वारे, App Store मध्ये $ 0.99 साठी उपलब्ध आहे. फायरफॉक्समध्ये थेट एकीकृत न करता, आपण HTML आणि इतर प्रश्नातील पृष्ठाशी निगडीत इतर कोडचा अनावरण करण्यासाठी आपण ब्राउझरमधून एपीएलमध्ये URL कॉपी आणि पेस्ट करू शकता.

ऍपल सफारी

IOS आणि MacOS वर चालत आहे

iOS
जरी iOS साठी सफारी डीफॉल्टनुसार पृष्ठ स्त्रोत पाहण्याची क्षमता समाविष्ट करत नाही, तर ब्राउझर दृश्य स्त्रोत अॅपसह अखंडपणे समाकलित करत नाही - App Store $ 9 0.9 मध्ये उपलब्ध आहे.

या तृतीय-पक्ष अॅपला सफ़ारी ब्राउझरवर परत आल्यानंतर आणि सामायिक करा बटणावर टॅप करा, स्क्रीनच्या तळाशी असलेल्या आणि एका वर्गाद्वारे आणि वरच्या बाणावर प्रतिनिधित्व केले. आपल्या शेअरर विंडोच्या खालच्या अर्ध्यावर ओव्हरलायझ करताना, iOS शेअर शीट आता दृश्यमान असावी. उजवीकडे स्क्रोल करा आणि स्त्रोत पहा स्त्रोत निवडा.

सक्रिय पृष्ठाचा स्त्रोत कोडचा रंग-कोडित, संरचित प्रतिनिधित्व आता इतर पृष्ठांसह प्रदर्शित केला जाणे आवश्यक आहे ज्यामुळे आपल्याला पृष्ठ मालमत्ता, स्क्रिप्ट आणि अधिक पाहण्याची अनुमती मिळते.

macOS
Safari च्या डेस्कटॉप आवृत्तीमध्ये पृष्ठाचे स्त्रोत कोड पाहण्यासाठी, आपल्याला प्रथम त्याचा विकसक मेनू सक्षम करण्याची आवश्यकता आहे. खालील चरण आपण या लपविलेल्या मेनू सक्रिय करून आणि पृष्ठाच्या HTML स्त्रोता प्रदर्शित करण्याबद्दल चालतात.

1. स्क्रीनच्या शीर्षस्थानी असलेल्या ब्राउझर मेनूमध्ये Safari वर क्लिक करा.
2. जेव्हा ड्रॉप-डाउन मेनू दिसत असेल, पसंती पर्याय निवडा
3. सफारीची प्राधान्ये आता दृश्यमान असली पाहिजे. शीर्ष पंक्तीच्या उजव्या बाजूला असलेल्या प्रगत चिन्हावर क्लिक करा.
4. प्रगत विभागाच्या खालच्या बाजुला रिक्त चेकबॉक्ससह असलेल्या मेनूमधील शो विकसक मेनू लेबल असलेले एक पर्याय आहे. या बॉक्सवर एकदा चेक मार्क ठेवण्यासाठी त्यावर क्लिक करा आणि वरील डाव्या कोपऱ्यात सापडलेल्या लाल 'x' वर क्लिक करून प्राधान्ये विंडो बंद करा.
5. स्क्रीनच्या शीर्षस्थानी असलेल्या विकास मेनूवर क्लिक करा.
6. ड्रॉप-डाउन मेनू दिसत असताना, पृष्ठ स्त्रोत दर्शवा निवडा. आपण त्याऐवजी खालील कीबोर्ड शॉर्टकट देखील वापरू शकता: COMMAND + OPTION + U

ऑपेरा

चालू आहे: Linux, macOS, Windows

ऑपेरा ब्राउझरमधील सक्रिय वेब पृष्ठावरून स्रोत कोड पाहण्यासाठी खालील कीबोर्ड शॉर्टकट वापरा: CTRL + U (MacOS वर COMMAND + OPTION + U ). त्याऐवजी आपण वर्तमान टॅबमध्ये स्रोत लोड करण्यास प्राधान्य देत असल्यास, अॅड्रेस बारमध्ये पृष्ठाच्या URL च्या डावीकडे खालील मजकूर टाइप करा आणि एंटर दाबा: दृश्य-स्त्रोत: (म्हणजेच, दृश्य-स्रोत: https: // www. ).

ऑपेराची डेस्कटॉप आवृत्ती आपल्याला त्याच्या एकात्मिक विकासक साधनांचा वापर करून HTML स्रोत, CSS आणि इतर घटक पाहू शकते. हे इंटरफेस सुरू करण्यासाठी, जे आपल्या मुख्य ब्राउझर विंडोच्या उजवीकडील दिशेने दिसेल, खालील कीबोर्ड शॉर्टकट दाबा: CTRL + SHIFT + I (MacOS वर COMMAND + OPTION + I ).

खालील चरणांचे अनुसरण करून ऑपेराचे विकसक साधनसेट देखील प्रवेशयोग्य आहे.

1. आपल्या ब्राउझर विंडोच्या वरच्या डाव्या कोपर्यात असलेल्या ऑपेरा लोगोवर क्लिक करा.
2. जेव्हा ड्रॉप-डाउन मेनू दिसेल, तेव्हा आपला माउस कर्सर अधिक साधने पर्यायावर फिरवा.
3. विकसक मेनू दर्शवा वर क्लिक करा.
4. ऑपेरा लोगोवर पुन्हा क्लिक करा.
5. जेव्हा ड्रॉप-डाउन मेनू दिसत असेल, तेव्हा आपले कर्सर डेवलपरवर फिरवा.
6. उप-मेन्यू दिसेल तेव्हा, विकसक साधनांवर क्लिक करा.

विवाल्डी

विवाल्डी ब्राउझरमध्ये पृष्ठ स्त्रोत पहाण्याचे अनेक मार्ग आहेत. सर्वात सोपा CTRL + U कीबोर्ड शॉर्टकट द्वारे आहे, जे एका नवीन टॅबमध्ये सक्रिय पृष्ठावरून कोड प्रस्तुत करते.

आपण खालील मजकूरास पृष्ठाच्या URL च्या समोरच्या भागास जोडू शकता, जे वर्तमान टॅबमध्ये स्त्रोत कोड दर्शविते: दृश्य-स्त्रोत:. याचे उदाहरण पाहू-स्रोत असेल: http: // www. .

दुसरी पद्धत ब्राउझरच्या एकात्मिक विकसक उपकरणांद्वारे, CTRL + SHIFT + I संयोजन किंवा ब्राउझरच्या साधने मेनूमध्ये विकासक साधने पर्यायाद्वारे प्रवेश करण्यायोग्य द्वारे उपलब्ध आहे - वरील डाव्या कोपर्यात 'V' लोगोवर क्लिक करून आढळले आहे Dev साधनांचा वापर केल्याने पृष्ठाच्या स्रोताचे अधिक सखोल विश्लेषण करण्याची अनुमती मिळते.