कैसे इस्तेमाल करें
- ऊपर के buttons से HTML, CSS और JavaScript editors के बीच switch करके code लिखें।
- Typing रोकने पर preview अपने-आप update होती है, या auto run बंद करके Run दबाएँ।
- Console में output/errors जाँचें और page save करने के लिए Download HTML दबाएँ।
विकल्पों की जानकारी
- Sandbox
- Preview isolated sandbox में चलता है, जो site के cookies/storage नहीं पढ़ सकता और dialogs नहीं खोल सकता।
- Console
- console.log, warn और error output तथा line numbers सहित uncaught errors दिखाती है; latest 200 entries रखती है।
- Download
- तीनों parts को एक HTML file में जोड़ता है, styles style tag और script body के अंत में।
पेज कैसे जोड़ा जाता है
तीनों एडिटर एक दस्तावेज़ में इसी क्रम में जोड़े जाते हैं। «HTML डाउनलोड करें» दबाने पर भी यही लेआउट मिलता है, सिवाय इसके कि प्रीव्यू के नीचे वाले पेज पर कंसोल आउटपुट भेजने वाली छोटी स्क्रिप्ट डाउनलोड से बाहर रहती है।
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>स्क्रिप्ट आपके HTML के बाद आती है, इसलिए आप पेज लोड होने का इंतज़ार किए बिना सीधे document.getElementById इस्तेमाल कर सकते हैं। HTML एडिटर में आप सिर्फ़ वही लिखते हैं जो body के अंदर आता है, html, head या body टैग खुद नहीं। प्रीव्यू एक iframe है जिसे सिर्फ़ स्क्रिप्ट चलाने की अनुमति है, इसीलिए alert डायलॉग और इस साइट की कुकी तक पहुँच ब्लॉक हैं।
अक्सर पूछे जाने वाले सवाल
क्या external libraries उपयोग कर सकता हूँ?
हाँ। HTML editor में jsDelivr जैसे CDN को point करने वाला script या link tag जोड़ें।
alert क्यों नहीं दिखता?
Sandbox dialogs block करता है, इसलिए alert और confirm कुछ नहीं करते। console.log उपयोग करें।
क्या code save होता है?
नहीं, save या upload नहीं। Page बंद करने से पहले HTML download करें।
प्राइवेसी
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपकी फ़ाइलें और टेक्स्ट आपके डिवाइस पर ही प्रोसेस होते हैं और हमारे सर्वर पर कभी अपलोड नहीं होते।