यह क्या करता है
यह प्लेग्राउंड फ़्रंट-एंड प्रयोगों के लिए एक छोटा ऑनलाइन कोड एडिटर है। सिंटैक्स हाइलाइटिंग वाले तीन टैब में HTML, CSS और JavaScript लिखें और टाइप करते ही प्रीव्यू अपडेट होता है, CodePen या JSFiddle की तरह लेकिन बिना अकाउंट के। एक बिल्ट-इन कंसोल console.log() का आउटपुट और एरर आपके JavaScript की लाइन नंबर के साथ दिखाता है, इसलिए आप developer tools खोले बिना डीबग कर सकते हैं। इससे यह फ़ोन या किसी और के कंप्यूटर पर भी काम का बन जाता है।
इसका इस्तेमाल CSS लेआउट आज़माने, किसी सहकर्मी के लिए बग दोहराने, Stack Overflow का स्निपेट टेस्ट करने, किसी नए सीखने वाले को सिखाने, या तेज़ी से प्रोटोटाइप बनाने के लिए करें।
कैसे इस्तेमाल करें
- HTML, CSS और JS टैब में टाइप करें, या एक छोटे काउंटर डेमो से शुरू करने के लिए उदाहरण दबाएँ। टैब पर बिंदु का मतलब है कि उसमें कोड है।
- टाइप करना रोकने के 0.6 सेकंड बाद प्रीव्यू अपने-आप चलता है। भारी स्क्रिप्ट के लिए ऑटो-रन बंद करें और तैयार होने पर चलाएँ या Ctrl+Enter दबाएँ।
- लॉग, चेतावनियों और एरर के लिए कंसोल देखें; सबसे नई लाइन हमेशा सबसे ऊपर होती है। ऑब्जेक्ट, ऐरे, Map, Set और DOM एलिमेंट छोटे, पढ़ने लायक रूप में दिखाए जाते हैं।
- किसी को कोड भेजने के लिए शेयर करें। ZIP डाउनलोड करें
index.html,style.cssऔरscript.jsको अलग-अलग फ़ाइलों के रूप में सेव करता है, जो असली प्रोजेक्ट में सीधे इस्तेमाल हो सकती हैं; HTML डाउनलोड करें सब कुछ एकindex.htmlफ़ाइल के रूप में सेव करता है, जो किसी भी ब्राउज़र में खुलती है।
आपका कोड इसी ब्राउज़र में रखा जाता है, इसलिए वापस आने पर भी मौजूद रहता है। Tab कुंजी दो स्पेस से इंडेंट करती है।
उदाहरण
HTML:
<button id="go">Click me</button>JavaScript:
document.querySelector('#go').addEventListener('click', () => {
console.log('clicked at', new Date().toLocaleTimeString())
})हर क्लिक कंसोल में एक लाइन जोड़ता है। अगर आप कोई नाम गलत लिखते हैं, तो कंसोल लाल ReferenceError दिखाता है, साथ में JS टैब की वह लाइन जहाँ यह हुआ।
यह कैसे काम करता है
तीनों पैन को एक HTML डॉक्यूमेंट में जोड़ा जाता है और sandbox attribute वाले iframe में लोड किया जाता है, इसलिए कोड इस साइट की cookies या storage नहीं पढ़ सकता। फ़्रेम में जोड़ी गई एक छोटी स्क्रिप्ट console कॉल और न पकड़े गए एरर पेज तक भेजती है, और कुछ भी आपके डिवाइस से बाहर नहीं जाता।
अक्सर पूछे जाने वाले सवाल
› क्या मेरा कोड किसी सर्वर पर अपलोड या सेव होता है?
नहीं। कोड आपके ब्राउज़र में चलता है और सिर्फ़ इसी ब्राउज़र के local storage में सेव होता है ताकि अगली बार भी मौजूद रहे। शेयर लिंक कोड को लिंक के अंदर ही रखता है; सर्वर पर कुछ भी स्टोर नहीं होता।
› क्या यहाँ कोड चलाना सुरक्षित है?
प्रीव्यू एक sandboxed iframe में चलता है जिसकी इस साइट, उसके storage या आपके दूसरे टैब तक पहुँच नहीं है। स्क्रिप्ट फिर भी वह सब कर सकती हैं जो एक सामान्य वेब पेज कर सकता है, जैसे alert दिखाना या दूसरी वेबसाइटों से रिक्वेस्ट करना, इसलिए सिर्फ़ वही कोड चलाएँ जिसे आप समझते हैं।
› क्या मैं npm पैकेज या लाइब्रेरी इस्तेमाल कर सकता हूँ?
हाँ, HTML पैन में cdnjs, jsDelivr या unpkg जैसे CDN से script या stylesheet टैग जोड़ें, जैसे किसी लाइब्रेरी की .min.js फ़ाइल की ओर इशारा करने वाला script टैग। सादे ES modules script type="module" और पूरे CDN URL के साथ काम करते हैं।
› क्या मैं पूरा HTML पेज पेस्ट कर सकता हूँ?
हाँ। अगर HTML पैन में doctype, html, head या body टैग वाला पूरा डॉक्यूमेंट है, तो आपकी CSS उसके head में और आपका JavaScript बंद होने वाले body टैग से पहले जोड़ा जाता है।
› शेयर लिंक कैसे काम करते हैं?
टूल के ऊपर का शेयर करें बटन तीनों पैन को लिंक में # चिह्न के बाद रख देता है। जो भी इसे खोलता है उसे वही कोड दिखता है। लंबे प्रोग्राम लंबे लिंक बनाते हैं, इसलिए बड़े प्रोजेक्ट्स के लिए ZIP डाउनलोड करें या HTML डाउनलोड करें इस्तेमाल करें।