आपको किसी ट्यूटोरियल में एक CSS ट्रिक मिलती है और आप उसे काम करते देखना चाहते हैं। कोई क्लाइंट एक HTML ईमेल टेम्पलेट भेजता है और पूछता है कि हेडर टूटा हुआ क्यों दिखता है। आप वेब डेवलपमेंट सीख रहे हैं और समझना चाहते हैं कि JavaScript की एक लाइन क्या करती है। इनमें से किसी के लिए कोड एडिटर, लोकल सर्वर या प्रोजेक्ट फ़ोल्डर की ज़रूरत नहीं है। ज़रूरत है एक ऐसी जगह की जहाँ कोड पेस्ट करके नतीजा तुरंत देख सकें।
यह गाइड बताती है कि HTML, CSS और JavaScript ऑनलाइन कैसे टेस्ट करें, जो दिखे उसे कैसे डीबग करें, अलग-अलग साइज़ पर लेआउट कैसे जाँचें, और प्रीव्यू की सुरक्षा ज़्यादातर लोगों की सोच से ज़्यादा क्यों मायने रखती है।
कोड के छोटे टुकड़ों को अलग से टेस्ट क्यों करें
बड़े पेजों में बहुत कुछ चल रहा होता है: frameworks, global styles, दूसरी स्क्रिप्ट और कैशिंग। जब कुछ ग़लत दिखता है, तो यह बताना मुश्किल हो सकता है कि समस्या अभी जोड़े गए snippet में है या कहीं और। snippet को एक ख़ाली प्रीव्यू में कॉपी करने से बाक़ी सब हट जाता है। अगर वह वहाँ काम करता है, तो समस्या आपके पेज के बाक़ी हिस्से के साथ टकराव में है। अगर वह वहाँ भी फ़ेल होता है, तो बग ख़ुद snippet में है।
"अलग करें और टेस्ट करें" वाली यह आदत घंटों बचाती है, और इसी वजह से डेवलपर फ़ोरम पर मदद माँगने से पहले छोटे उदाहरण बनाते हैं।
आपका पहला लाइव प्रीव्यू
- Live HTML Viewer खोलें। यह एक छोटे उदाहरण से शुरू होता है: एक heading, एक पैराग्राफ़ और एक बटन।
- कोड एडिट करें। टाइप करना रोकने के एक पल बाद प्रीव्यू अपडेट होता है; सेव या रिफ़्रेश करने के लिए कुछ नहीं है।
- JavaScript चलते देखने के लिए प्रीव्यू में बटन पर क्लिक करें: यह एक मैसेज लॉग करता है और एक alert दिखाता है।
- उदाहरण की जगह अपना snippet पेस्ट करें।
आप सब कुछ एक ही जगह लिख सकते हैं: HTML elements, style block या style attributes में CSS, और script block या onclick जैसे event attributes में JavaScript। उदाहरण के लिए:
<style>
.card { max-width: 320px; padding: 1.5rem; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); font-family: sans-serif; }
.card button { background: #3b82f6; color: #fff; border: 0; padding: .6rem 1rem; border-radius: 8px; }
</style>
<div class="card">
<h2>Pro plan</h2>
<p>Everything you need to grow.</p>
<button onclick="console.log('Clicked at', new Date().toLocaleTimeString())">Choose plan</button>
</div>बिल्ट-इन console से डीबग करें
जब JavaScript गड़बड़ करे, तो console आपका सबसे अच्छा दोस्त है। उसे खोलने के लिए प्रीव्यू के ऊपर console बटन पर क्लिक करें। यह दिखाता है:
- आपकी स्क्रिप्ट के console.log, console.info और console.warn मैसेज।
- Errors, जिनमें uncaught errors उनकी लाइन और कॉलम के साथ शामिल हैं।
यह देखने के लिए console.log कॉल जोड़ें कि आपका कोड हर क़दम पर क्या कर रहा है: कोई फ़ंक्शन चलता है या नहीं, किसी variable में क्या है, if statement की कौन सी शाखा ली गई। console से JavaScript डीबग करने पर हमारी गाइड error मैसेज पढ़ना और क्लासिक बग और गहराई से बताती है। बिना पेज वाली सिर्फ़ JavaScript के लिए JavaScript Compiler एक बड़ा console देता है जो पढ़ने में आसान है।
अलग-अलग साइज़ पर लेआउट टेस्ट करें
जो लेआउट पतले प्रीव्यू पैनल में बिल्कुल सही दिखता है, वह पूरी चौड़ाई पर टूट सकता है, और इसका उल्टा भी। जाँचने के दो तरीक़े:
- फ़ुल स्क्रीन: प्रीव्यू को फैलाकर पूरी स्क्रीन भर दें।
- नया टैब: प्रीव्यू को उसके अपने टैब में खोलें, फिर ब्राउज़र विंडो का साइज़ बदलकर देखें कि लेआउट फ़ोन की चौड़ाई से चौड़े डेस्कटॉप तक कैसे बदलता है।
याद रखें कि CSS media queries विंडो की चौड़ाई (viewport) के हिसाब से बदलती हैं, आपकी स्क्रीन के साइज़ के हिसाब से नहीं। स्क्रीन रिज़ॉल्यूशन बनाम viewport साइज़ पर हमारी गाइड यह फ़र्क़ समझाती है, और Screen Resolution Checker आपके डिवाइस के लिए दोनों वैल्यू दिखाता है।
sandboxed प्रीव्यू क्यों मायने रखता है
जब आप किसी ट्यूटोरियल, फ़ोरम के जवाब या किसी की भेजी फ़ाइल से कोड पेस्ट करते हैं, तो आप किसी और का कोड चला रहे होते हैं। बिना सुरक्षा वाले प्रीव्यू में वह कोड उस वेबसाइट के हिस्से के रूप में चलेगा जिस पर आप हैं, और उस साइट की cookies और स्टोर किए डेटा तक उसकी पहुँच होगी। कोई ख़तरनाक snippet वह डेटा पढ़ सकता है या कहीं और भेज सकता है। यह self-XSS नाम की एक असली तकनीक है, और इसीलिए ब्राउज़र console चेतावनी देते हैं कि जो कोड आप नहीं समझते उसे पेस्ट न करें।
Live HTML Viewer आपका कोड अपने अलग origin वाले sandboxed frame के अंदर चलाता है। स्क्रिप्ट चल सकती हैं, alert दिखा सकती हैं और pop-up खोल सकती हैं, लेकिन वे साइट की cookies या local storage नहीं पढ़ सकतीं। Open in New Tab विकल्प भी वही sandbox इस्तेमाल करता है, इसलिए आप जहाँ भी देखें, कोड अलग-थलग रहता है।
इसकी क़ीमत यह है कि cookies या localStorage पर निर्भर कोड प्रीव्यू में जान-बूझकर काम नहीं करेगा। अगर आपको वे फ़ीचर टेस्ट करने हैं, तो लोकल प्रोजेक्ट इस्तेमाल करें।
HTML ईमेल टेस्ट करना
HTML ईमेल एक ख़ास मामला है। ईमेल ऐप HTML और CSS का सिर्फ़ एक सीमित हिस्सा सपोर्ट करते हैं: लेआउट अक्सर टेबल से बनाए जाते हैं, स्टाइल inline होने चाहिए, और कई आधुनिक CSS फ़ीचर अनदेखे हो जाते हैं। ब्राउज़र प्रीव्यू दिखाता है कि ईमेल ब्राउज़र में कैसा दिखता है, जो टूटे टैग, ग़ायब इमेज और साफ़ लेआउट समस्याओं के लिए काम की पहली जाँच है, लेकिन यह गारंटी नहीं देता कि हर ईमेल ऐप उसे कैसे दिखाएगा। किसी कैंपेन से पहले हमेशा उन मुख्य ऐप में ख़ुद को टेस्ट ईमेल भेजें जो आपके दर्शक इस्तेमाल करते हैं।
आम ग़लतियाँ जो प्रीव्यू पकड़ता है
- बिना बंद टैग। एक ग़ायब closing div बाक़ी पेज को ग़लत container में निगल सकता है।
- CSS property नामों में टाइपिंग ग़लतियाँ, जिन्हें ब्राउज़र चुपचाप अनदेखा कर देते हैं।
- Script errors जो उनके बाद का सब कुछ चलने से रोक देते हैं; console लाइन दिखाता है।
- ग़लत path वाली इमेज। आपके प्रोजेक्ट के relative paths प्रीव्यू में मौजूद नहीं होंगे; इमेज टेस्ट करने के लिए पूरे URL इस्तेमाल करें।
- तय चौड़ाई जो फ़ोन पर horizontal scrolling करवाती है।
CSS सीखने का एक तेज़ तरीक़ा
अगर आप सीख रहे हैं, तो लाइव प्रीव्यू पढ़ने को प्रयोग में बदल देता है। एक तरीक़ा जो अच्छा काम करता है:
- एक छोटे उदाहरण से शुरू करें, जैसे अंदर कुछ टेक्स्ट वाला एक बॉक्स।
- एक बार में एक property बदलें और नतीजा देखें: display को block से flex करें, फिर justify-content: center आज़माएँ, फिर gap: 1rem।
- देखने से पहले अनुमान लगाएँ। बोलें कि आप क्या होने की उम्मीद करते हैं, फिर जाँचें। ग़लत अनुमान ही वह जगह है जहाँ सीख होती है।
- जान-बूझकर तोड़ें। कोई closing टैग हटाएँ या कोई property ग़लत लिखें और देखें कि ब्राउज़र कैसी प्रतिक्रिया देता है, ताकि बाद में आप लक्षण पहचान सकें।
- कुछ ऐसा फिर से बनाएँ जो आपको पसंद हो। जिस वेबसाइट की आप तारीफ़ करते हैं, उससे कोई बटन, कार्ड या navigation bar चुनें और उसे शुरू से बनाएँ।
रोज़ दस मिनट ऐसा करने से सिर्फ़ डॉक्यूमेंटेशन पढ़ने से कहीं बेहतर CSS की समझ बनती है।
अक्सर पूछे जाने वाले सवाल
क्या बाहरी libraries इस्तेमाल कर सकते हैं?
प्रीव्यू सामान्य HTML चलाता है, इसलिए पूरे URL की ओर इशारा करने वाले script और link टैग किसी भी पेज की तरह लोड होते हैं, sandbox की शर्तों के साथ।
क्या मेरा कोड सेव होता है?
नहीं। यह सिर्फ़ आपके ब्राउज़र टैब में रहता है। पेज बंद करने से पहले उसे कॉपी कर लें।
localStorage काम क्यों नहीं करता?
पेस्ट किए कोड को इस साइट के डेटा से अलग रखने के लिए sandbox storage तक पहुँच रोकता है।
क्या इंटरनेट से कोड पेस्ट करना सुरक्षित है?
sandbox काफ़ी हद तक सीमित करता है कि कोड क्या कर सकता है, लेकिन जिन स्रोतों पर आपको भरोसा नहीं उनके कोड से फिर भी सावधान रहें, ख़ास तौर पर ऐसी किसी भी चीज़ से जो आपसे लॉग इन करने या फ़ाइलें डाउनलोड करने को कहे।
क्या यह फ़ोन पर काम करता है?
हाँ, हालाँकि कोड एडिट करना कंप्यूटर पर कहीं आसान है।
snippets को अलग से टेस्ट करना सीखने, प्रोटोटाइप बनाने और डीबग करने का सबसे तेज़ तरीक़ा है। अपना कोड Live HTML Viewer में पेस्ट करें, console खोलें, पूरे साइज़ पर जाँचें, और जब कोड कहीं और से आए तो sandbox को ध्यान में रखें।
