HTML पेस्ट करें और इसे किसी भी स्क्रीन चौड़ाई पर लाइव रेंडर होते देखें - फिर इसे व्यवस्थित करें, छोटा करें या समस्याओं के लिए जाँचें।
एलिमेंट की गिनती, हेडिंग आउटलाइन और मार्कअप में समस्याओं की सूची के लिए 'निरीक्षण करें' दबाएँ।
जब स्क्रिप्ट चलाने की अनुमति होती है, तो प्रीव्यू का कंसोल आउटपुट यहाँ दिखाई देता है।
कोई ईमेल टेम्पलेट, किसी टिकट से लिया गया स्निपेट, एक्सपोर्ट की गई रिपोर्ट: कभी-कभी बस यह देखना होता है कि HTML का कोई टुकड़ा कैसा दिखता है। उसे पेस्ट करें और वह टाइप करते-करते एक बंद फ्रेम के अंदर, आपकी चुनी स्क्रीन चौड़ाई पर रेंडर होता है। प्रीव्यू के साथ आप उसे साफ़-सुथरा कर सकते हैं, छोटा कर सकते हैं, कंसोल के साथ उसकी स्क्रिप्ट चला सकते हैं और मार्कअप में असल में क्या गलत है उसकी सूची देख सकते हैं।
पेस्ट किए गए HTML में ऐसी स्क्रिप्ट, फ़ॉर्म और लिंक हो सकते हैं जो आपने नहीं लिखे। प्रीव्यू एक sandbox iframe में अपने अलग opaque origin के साथ चलता है, इसलिए उसके अंदर की कोई चीज़ इस साइट की कुकी या आपका सेशन नहीं पढ़ सकती, आपकी ओर से कहीं कुछ सबमिट नहीं कर सकती और इस पेज को कहीं और नहीं ले जा सकती। स्क्रिप्ट तब तक बंद रहती हैं जब तक आप उन्हें चालू न करें।
यह मार्कअप को एक मानक HTML पार्सर से पढ़ती है और सिर्फ़ वही बताती है जो उसने देखा: खुले पर कभी बंद न हुए टैग, बिना खुले टैग के क्लोज़िंग टैग, बिना alt टेक्स्ट की इमेज, दोहराए गए id, बिना rel="noopener" के नया टैब खोलने वाले लिंक, छूटे हुए हेडिंग लेवल, http:// से लोड होने वाले रिसोर्स, और पूरे पेज में doctype, title, lang या viewport टैग का न होना।
यह गलतियां बताती है, स्टाइल नहीं। जिन क्लोज़िंग टैग को HTML मानक छोड़ने देता है, जैसे </p>, </li>, </td>, </tr> और </option>, वे कभी "बंद नहीं" की सूची में नहीं आते, और <br>, <img> और <input> जैसे खाली एलिमेंट को क्लोज़िंग टैग की ज़रूरत नहीं होती। खाली alt="" को alt टेक्स्ट माना जाता है, जो सजावटी इमेज के लिए सही है। target="_blank" वाला लिंक rel="noopener" या rel="noreferrer" के साथ पास होता है। <a href> में सादा http:// लिंक असुरक्षित नहीं गिना जाता; सिर्फ़ लोड होने वाले रिसोर्स गिने जाते हैं, जैसे इमेज, स्क्रिप्ट, स्टाइलशीट और iframe। हेडिंग लेवल में वापस ऊपर जाना (h4 से h2) ठीक है; सिर्फ़ नीचे की ओर एक लेवल छोड़कर कूदना (h2 से h4) बताया जाता है। doctype, title, lang और viewport की जांच तभी होती है जब पेस्ट किया गया हिस्सा पूरा पेज हो, यानी उसमें doctype या html, head या body टैग हो, इसलिए ईमेल ब्लॉक या CMS स्निपेट के नंबर इनके लिए नहीं कटते।
पहले फ़ोन चौड़ाई (375 px) पर देखें, क्योंकि बहुत लोग ईमेल फ़ोन पर खोलते हैं, फिर टैबलेट (768 px) और डेस्कटॉप (1280 px) पर। स्क्रिप्ट बंद रखें: ईमेल ऐप JavaScript नहीं चलाते, इसलिए बिना स्क्रिप्ट का प्रीव्यू पढ़ने वाले के अनुभव के ज़्यादा करीब है। इमेज के लिए https:// वाले पूरे URL इस्तेमाल करें, क्योंकि न प्रीव्यू और न पाने वाले का मेल ऐप आपके कंप्यूटर की फ़ाइलें देख सकता है। मिनिफाई सामान्य कमेंट हटा देता है, पर <!--[if से शुरू होने वाले कंडीशनल कमेंट रखता है, जैसे <!--[if mso]> ... <![endif]-->। यह <!--[if !mso]><!--> पैटर्न का <!--<![endif]--> क्लोज़र नहीं रखता, इसलिए इस पैटर्न वाले टेम्पलेट को मिनिफाई न करें, वरना Outlook उसके बाद का सब कुछ छिपा सकता है। प्रीव्यू ब्राउज़र का रेंडर है; क्लासिक Windows Outlook ईमेल को Word इंजन से दिखाता है, इसलिए बड़ी मेलिंग से पहले वहां खुद को एक टेस्ट भेजें।
प्रीव्यू, ब्यूटीफ़ाई और मिनिफ़ाई आपके ब्राउज़र में ही होते हैं। सिर्फ़ जांच रिपोर्ट मार्कअप को सर्वर पर भेजती है, जहां उसे पार्स करके उसी रिस्पॉन्स में जवाब दिया जाता है: डिस्क पर कुछ नहीं लिखा जाता, कुछ लॉग नहीं होता, और उपयोग के रिकॉर्ड में सिर्फ़ गिनती रहती है।
पेस्ट किया गया कोड भरोसेमंद नहीं होता, इसलिए स्क्रिप्ट डिफ़ॉल्ट रूप से बंद रहती हैं। "स्क्रिप्ट चलाएँ" पर टिक करें, प्रीव्यू JavaScript चालू करके फिर से लोड होगा, अब भी सैंडबॉक्स के अंदर, और कंसोल आउटपुट प्रीव्यू के नीचे दिखेगा।
प्रीव्यू पेस्ट किए गए टेक्स्ट से बनता है, आपके कंप्यूटर या सर्वर से नहीं, इसलिए images/logo.png जैसा रिलेटिव पाथ इसी साइट पर खोजा जाता है और नहीं मिलता। एब्सोल्यूट URL इस्तेमाल करें, या ऐसा <base href="..."> टैग जोड़ें जो फ़ाइलों की असली जगह की ओर इशारा करे।
यह सिर्फ़ टैग के बीच इंडेंटेशन दोबारा करता है और pre, textarea, script और style की सामग्री को नहीं छूता। इनलाइन एलिमेंट के बीच की खाली जगह कभी-कभी थोड़ी खिसक सकती है, इसलिए फ़ॉर्मेट करने के बाद प्रीव्यू देख लें।
जांच रिपोर्ट 1,000,000 अक्षरों तक स्वीकार करती है और ज़्यादा से ज़्यादा 200 समस्याएं दिखाती है। टाइपिंग सहज रहे, इसलिए 200,000 अक्षरों से ऊपर लाइव प्रीव्यू रुक जाता है; अपडेट करने के लिए रिफ़्रेश या Ctrl+Enter दबाएं।
हाँ। ईमेल का HTML पेस्ट करें या .html फ़ाइल खोलें, दोनों लेआउट देखने के लिए चौड़ाई फ़ोन (375 px) और डेस्कटॉप (1280 px) पर करें, और बिना alt टेक्स्ट वाली इमेज और बिना एन्क्रिप्शन वाले http:// से लोड होने वाले रिसोर्स ढूँढने के लिए निरीक्षण करें दबाएँ। प्रीव्यू आपके ब्राउज़र का इंजन इस्तेमाल करता है, जबकि हर ईमेल क्लाइंट का अपना इंजन होता है और कई CSS का कुछ हिस्सा छोड़ देते हैं। इसलिए यह मोटे तौर पर वही दिखाता है जो ब्राउज़र में खुला वेबमेल दिखाएगा, हर इनबॉक्स में ठीक वैसा नहीं। ईमेल क्लाइंट JavaScript नहीं चलाते, इसलिए स्क्रिप्ट चलाएँ बंद रखें। असली भेजने से पहले उन क्लाइंट पर एक टेस्ट ईमेल भेजें जो आपके पाठक इस्तेमाल करते हैं।
सीधे खोलने से ज़्यादा सुरक्षित है। फ़ाइल खोलें उसे आपके ब्राउज़र के एडिटर में लोड करता है, और जब तक आप निरीक्षण करें नहीं दबाते, सर्वर पर कुछ नहीं जाता। प्रीव्यू एक अलग सैंडबॉक्स फ़्रेम में चलता है जिसमें स्क्रिप्ट और फ़ॉर्म भेजना बंद रहता है, इसलिए पेज न कोड चला सकता है, न फ़ॉर्म भेज सकता है और न इस साइट की कुकीज़ तक पहुँच सकता है। पूरे http(s) पते वाली इमेज और स्टाइलशीट फिर भी लोड होती हैं, इसलिए भेजने वाले को पता चल सकता है कि फ़ाइल खोली गई। पहले कोड पढ़ें, स्क्रिप्ट चलाएँ बंद रखें और भेजे गए किसी पेज में कभी पासवर्ड न डालें।
फ़ाइल खोलें फ़ाइल को हमेशा UTF-8 के रूप में पढ़ता है और उसके अंदर के <meta charset> टैग को अनदेखा करता है। Windows-1252 या ISO-8859-1 में सेव किया गया पेज, जो पुराने Windows एडिटर और एक्सपोर्ट में आम है, é, ü और £ जैसे अक्षरों को ऐसे बाइट्स में रखता है जो मान्य UTF-8 नहीं हैं, इसलिए हर ऐसा अक्षर रिप्लेसमेंट कैरेक्टर � के रूप में दिखता है। फ़ाइल को अपने एडिटर में खोलें, उसे फिर से UTF-8 में सेव करें (Notepad: Save as, Encoding UTF-8; VS Code: स्टेटस बार में एन्कोडिंग पर क्लिक करें, फिर Save with Encoding) और यहाँ दोबारा खोलें। या फ़ाइल को अपने ब्राउज़र में खोलें, उसका सोर्स देखें और यहाँ पेस्ट करें, क्योंकि ब्राउज़र उसे पेज के अपने charset से पहले ही डिकोड कर चुका है।
सैंडबॉक्स कभी भी फ़ॉर्म सबमिट करने या पॉप-अप की अनुमति नहीं देता, स्क्रिप्ट चलाएँ चालू होने पर भी नहीं, इसलिए सबमिट दबाने से कुछ नहीं भेजा जाता और target="_blank" वाले लिंक तथा window.open() कॉल ब्लॉक हो जाते हैं। इससे पेस्ट किया गया पेज डेटा नहीं भेज सकता और दूसरी साइटें नहीं खोल सकता। सामान्य लिंक प्रीव्यू फ़्रेम के अंदर खुलते हैं, और जो साइटें फ़्रेम में दिखने से मना करती हैं वे वहाँ खाली या अस्वीकृत दिखती हैं। किसी फ़ॉर्म को जाँचने के लिए सोर्स में उसका action, method और फ़ील्ड पढ़ें; निरीक्षण करें हर उस target="_blank" लिंक की सूची भी देता है जिसमें rel="noopener" नहीं है। असली सबमिशन अपने डेवलपमेंट सर्वर पर टेस्ट करें।