Google Chrome में Web page Source Code HTML, CSS, JavaScript कैसे देखें

जब मैंने पहली बार वेब डिजाइनर के रूप में अपना करियर शुरू किया, तो मैंने अन्य वेब डिज़ाइनर के काम की Analysis करके बहुत कुछ सीखा, जिसकी मैंने Appreciate की मैं इसमें अकेला नहीं हूँ. चाहे आप किसी Web Industry या अनुभवी अनुभवी व्यक्ति के लिए नए हों, कई बार आप अपने Career के दौरान ऐसा करते हैं, Various webpages के HTML source को देखते हुए.

उन लोगों के लिए जो वेब डिज़ाइन के लिए नए हैं, Site के Source code को देखने के लिए कुछ चीजें कैसे की जाती हैं, यह देखने के सबसे आसान तरीकों में से एक है, ताकि आप उस काम से सीख सकें और अपने काम में कुछ कोड या Techniques का उपयोग शुरूआत कर सकें.

आज, कोई भी Web Developer काम कर रहा है, ख़ासकर वे जो Industry के शुरुआती दिनों में हैं, और यह एक Safe Bet है कि वे आपको बताते हैं कि उन्होंने Web pages के source को देखकर HTML सीखा है, उन्होंने उन्हें किससे देखा और नफरत की Web design पुस्तकें पढ़ने या Professional conferences में भाग लेने के अलावा, site के Source code को देखने के लिए शुरुआती लोगों के लिए HTML सीखने का एक शानदार तरीका है.

सीखना मजेदार है और इंटरनेट पर आपको पसंद होने वाले वेबपृष्ठ के बारे में सीखना और मजेदार होना चाहिए. 

आपको अपने HTML या CSS books की खोज करने की ज़रूरत नहीं है. Chrome जैसे Modern browser web page का Analysis करने के लिए बहुत ही आसान और Probable Tool बशर्ते करते हैं. यह एक कौशल है जो Web Page की Anatomy का Analysis करने के लिए बहुत जरूरी है.

इस articles में हम Google Chrome Web browser का उपयोग करके Web Page के source code HTML को देखने के Step-by-step उदाहरण पर चर्चा करेंगे क्या आप तैयार है. तो चलिए देखते है.

View Webpage Source Code HTML, CSS, JavaScript in Google Chrome

नीचे दी गई Lists के According Step by Step discuss करेंगे जो समझ ने में आसान रहे.

1. Viewing HTML, Inline and Internal CSS Styles
2. Viewing external stylesheets on a webpage
3. Chrome shortcut to view page source
4. Using developer tools
5. Getting mobile CSS
6. Finding a pretty print view of minified CSS and JavaScript
7. Editing webpage online

1. Viewing HTML, Inline and Internal CSS Styles

किसी Web Page की HTML content, inline and internal styles को देखने के लिए, Chrome browser में Web Page खोलें.

Page पर किसी भी जगह पर Right-click करें और नीचे दी गई ScreenShot में दिखाए गए की तरह "View Page Source" विकल्प का चुनने की जरूरत है.

और आप को ऐसा नहीं करना तो Short key का भी इस्तेमाल कर सकते है आपको Ctrl + U key Press कर सकते है.

"View Page Source" विकल्प चुनने के बाद यह एक नई विंडो खुल जाएगा जो उस वेबपृष्ठ पर उपयोग किए गए HTML content रूप में दिखने को मिलेगा.

जैसा कि आप नीचे दिए गए Screenshot में देख सकते हैं, Chrome ब्रेक और Blank space के बिना एक ही Line में सभी Source code दिखाता है.

2. Viewing External Stylesheets

किसी Web Page पर उपयोग की जाने वाली बाहरी Style sheets को खोजने के लिए, स्रोत कोड में “link” tags को देखें. Style sheets में Defined सभी Style को देखने के लिए ".css" के साथ End होने वाले link पर क्लिक करें.

एक Website बाहरी Stylesheets का एक अलग format में उपयोग कर सकती है, Mostly CSS files version number या ".css? Ver1.3" जैसे Additional text के साथ End हो जाएंगी. कभी-कभी ".min.css" जैसे End होने वाली CSS file का minified version भी तेज Page loading के लिए उपयोग किया जा सकता है.

हालांकि Link source code से related के रूप में दिखाए जाते हैं, फिर भी उस पर Click करने से complete URL (complete URL with domain name) के साथ Source style sheet खुल जाएगा.

3. Chrome Shortcut to View Page Source Code

किसी भी पेज URL में Prefix “view-source:” जोड़कर आप Chrome browser के Address bar से सीधे किसी पेज का source code देख सकते हैं. इस तरह आप Right click करके Protected pages के Source code को भी देख सकते हैं.

यदि पेज में proper 301 redirect हैं तो दर्ज किए गए URL automatic रूप से content लाने के लिए  Redirect हो जाएगा. 

जैसे उदाहरण के लिए, “view-source:yoursite.com” दर्ज करे अपने browser में, automatically रूप से “view-source:https://www.yoursite.com” पर redirect किया जा सकता है.

4. Viewing Source Code with Developer Tools

हमें ऊपर विधि को देखा किसी भी Personal element को Web Page से जोड़ने के बिना source HTML / CSS कोड प्रदान करेगी. source CSS code view के साथ किसी particular element के लिए उपयोग की जाने वाली styles को ढूंढना एक कठिन काम हो सकता है.

और अन्य Browsers की तरह, Google Chrome developer को Web Page पर किसी particular element से जुड़े CSS code तक पहुंच ने का प्रदान करने की Offer करता है.

किसी Web Page पर किसी भी element पर Right-click करें और नीचे दिए गए ScreenShot में दिखाए गए अनुसार Web Page के नीचे Developer Console खोलने के लिए “Inspect element” or “Inspect”  विकल्प चुनने की आवश्यकता है. आप menu path पर “Settings > More tools > Developer tools“ से Developer Console भी खोल सकते हैं. 

आप ऊपर देख सकते है की कंसोल को each section के तहत available Different tabs के साथ दो भागों में बांटा गया है. बाएं तरफ का  भाग “Elements” tab के नीचे किसी पेज की HTML content प्रदर्शित करता है और दाहिने तरफ भाग CSS tab नीचे दिखाता है. किसी भी CSS links पर क्लिक करने से बाएं हिस्से में style sheet “Sources” tab के नीचे खुल जाएगी.

और किसी particular element के CSS code को देखने के लिए, console के Top बाएं कोने पर “Arrow Box” चुनें और माउस होवर पर हाइलाइट किए जाने वाले किसी भी element पर क्लिक कर सकते है, यह automatically रूप से selected element से जुड़े CSS code को दिखाएगा.

5. Viewing Mobile CSS

और यह भी desktop and mobile devices पर किसी element के लिए Style Different हो सकती है, इसलिए developer console iPhone, iPad, Samsung Galaxy and Google Nexus जैसे अधिकांश लोकप्रिय उपकरणों में डिस्प्ले toggle करने का विकल्प प्रदान करता है. एक बार जब जरूरत डिवाइस dropdown से चुना जाता है, तो उस डिवाइस के लिए उस पेज पर available related CSS codes प्रदर्शित होते हैं.

आप नीचे ScreenShot में देख सकते है.

6. Pretty Print View of Minified CSS and JavaScript Files

आजकल वेबसाइटों पर CSS and JavaScript files के minify Versions का उपयोग करना आम है. यह अनावश्यक comments, spaces, line breaks को हटा देगा और फ़ाइल को .min.css या .min.js के रूप में बनाता है. वेबसाइट पर उपयोग की जाने वाली caching mechanism भी इसी तरह की जगह हटाने को करता है.

हालांकि यह पेज की गति को बेहतर बनाने के लिए भी उपयोग किया जाता है, CSS और scripts इस पेज source को देखने वाले लोगों के लिए Inappropriate हैं.

जब Chrome “Pretty Print” बटन का उपयोग करके इस समस्या को हल करता है जब आप “Pretty Print” बटन पर क्लिक करने से minify फ़ाइलों को एक Readable version में restore कर दिया जाएगा ताकि आप आसानी से इसे पार कर सकें.

यहां एक उदाहरण दिया गया है कि कैसे Script Developer Console पर दिखती है और “Sources” tab के Internal link की गई style sheet या स्क्रिप्ट देखें. and Click on the double bracelet brackets {}.

यह ध्यान दे की कुछ वेबपृष्ठ सामग्री प्रतिलिपि से बचने के लिए राइट-क्लिक करना बंद कर देता है, उस स्थिति में आप डेवलपर कंसोल मेनू विकल्प का उपयोग कर क्रोम में पृष्ठ स्रोत तक पहुंच सकते हैं.

7. Modifying Live and Previewing Changes Online

Chrome developer console का सबसे बड़ा लाभ live पेज पर चारों ओर खेलना और सीधे ब्राउज़र पर इसका पूर्वावलोकन करना है. आप CSS style को सीधे बदल सकते हैं या लाइव पेज पर प्रभाव देखने के लिए Developer Console को देख सकते हैं.

जैसे मैं आपको उदाहरण से बताता हुं, आप “body” element के “font-size” को बदल सकते हैं और font size परिवर्तन को appropriately रूप से alliance कर सकते हैं. यह एक बहुत ही उपयोगी विकल्प है और real user experience को प्रभावित किए बिना बहुत समय बचाता है और Otherwise आपको सही style खोजने के लिए repetition के आधार पर लाइव साइट में परिवर्तन करना पड़ सकता है.

यहां तक कि कलर picker Web developers में से एक है आप ऑनलाइन elements के रंगों का तुरंत preview कर सकते हैं आप RGB or HEX color codes  कॉपी कर सकते हैं और इसे अपने डिजाइन पर supporter के रूप में उपयोग कर सकते हैं.

HTML element पर राइट-क्लिक करें और ऑनलाइन content जोड़ने या हटाने के लिए सीधे “Edit as HTML” विकल्प का उपयोग करें.

तो यहाँ इस articles का अंत हो चूका है मेरी आशा थी कि इस लेख ने आपको Source code in chrome को देखने का तरीका समझने में मदद की है और आप को ये articles कैसा लगा ये हमे comment box में बताये.

याद रखें, Source code देखना बहुत सामान्य कार्य है और कोई भी उपयोगकर्ता आसानी से देख सकता है.

लेकिन developer console का उपयोग करने से आपको सीखने में बहुत समय लगता है, इसके अलावा Chrome every version पर सुविधाओं को updates करता रहेता है जो सीखने की process को Continuous
बना देता है. लेकिन वेब डिज़ाइन Concepts को समझने और Troubleshooting करने के लिए, यह बहुत ही रोचक और मजेदार होना चाहिए.