کد HTML را جای‌گذاری کنید و رندر زنده آن را در هر عرض صفحهای ببینید - سپس آن را مرتب، فشرده یا اشکال‌یابی کنید.
برای مشاهده تعداد عناصر، ساختار تیترها و لیست مشکلات موجود در کد، روی بررسی کلیک کنید.
وقتی اجازه اجرای اسکریپتها داده شود، خروجی کنسولِ پیشنمایش در اینجا ظاهر میشود.
یک قالب ایمیل، تکه‌ای از یک تیکت، یک گزارش خروجی‌گرفته: گاهی فقط باید ببینید یک قطعه HTML چه شکلی دارد. آن را بچسبانید تا همزمان با تایپ، داخل یک قاب ایزوله و با عرض صفحهای که انتخاب می‌کنید نمایش داده شود. کنار پیشنمایش می‌توانید آن را مرتب یا فشرده کنید، اسکریپت‌هایش را با یک کنسول اجرا کنید و فهرستی از ایرادهای واقعی نشانهگذاری را ببینید.
HTML چسباندهشده ممکن است اسکریپتها، فرم‌ها و پیوندهایی داشته باشد که شما ننوشته‌اید. پیشنمایش در یک iframe با ویژگی sandbox و مبدأ مات مخصوص خودش اجرا میشود، پس هیچ چیز درون آن نمیتواند کوکیهای این سایت یا نشست شما را بخواند، از طرف شما چیزی ارسال کند یا این صفحه را به جای دیگری ببرد. اسکریپتها تا وقتی روشنشان نکنید خاموش می‌مانند.
نشانهگذاری را با یک تجزیه‌گر استاندارد HTML میخواند و فقط آنچه را دیده گزارش میکند: تگ‌هایی که باز شده و هرگز بسته نشده‌اند، تگ‌های بسته بدون تگ باز، تصاویر بدون متن alt، id تکراری، پیوندهایی که بدون rel="noopener" زبانه جدید باز می‌کنند، پرش در سطح سرتیترها، منابعی که با http:// بارگذاری میشوند و در یک صفحه کامل، نبود doctype، title، lang یا تگ viewport.
خطا را گزارش میکند، نه سبک نوشتن را. تگ‌های پایانی که استاندارد HTML اجازهٔ حذفشان را میدهد، مثل </p>، </li>، </td>، </tr> و </option>، هرگز بسته‌نشده فهرست نمیشوند و عناصر تهی مثل <br>، <img> و <input> تگ پایانی ندارند. alt="" خالی متن جایگزین حساب میشود که برای تصویر تزئینی درست است. پیوندی با target="_blank" با rel="noopener" یا rel="noreferrer" قبول است. پیوند ساده http:// در <a href> ناامن حساب نمیشود؛ فقط منابعی که بارگذاری میشوند مثل تصویر، اسکریپت، شیوه‌نامه و iframe. برگشتن به سطح بالاتر سرعنوان (از h4 به h2) اشکالی ندارد؛ فقط پرش رو به پایین که یک سطح را جا بیندازد (از h2 به h4) گزارش میشود. بررسی doctype، title، lang و viewport فقط وقتی انجام میشود که متن چسباندهشده یک صفحهٔ کامل باشد، یعنی doctype یا تگ html، head یا body داشته باشد؛ پس یک بخش ایمیل یا تکه‌ای از CMS برای آن‌ها نمره منفی نمی‌گیرد.
اول آن را با عرض تلفن همراه (375 px) ببینید، چون بسیاری ایمیل را روی گوشی باز می‌کنند، بعد با تبلت (768 px) و دسکتاپ (1280 px). اسکریپتها را خاموش بگذارید: برنامه‌های ایمیل JavaScript اجرا نمی‌کنند، پس پیشنمایش بدون اسکریپت به آنچه خواننده می‌بیند نزدیک‌تر است. برای تصویرها نشانی کامل با https:// بگذارید، چون نه پیشنمایش و نه برنامهٔ ایمیل گیرنده فایلهای رایانهٔ شما را نمی‌بینند. کوچک‌سازی توضیحات معمولی را حذف میکند اما توضیحات شرطی را که با <!--[if شروع میشوند نگه میدارد، مثل <!--[if mso]> ... <![endif]-->. بستهٔ <!--<![endif]--> در الگوی <!--[if !mso]><!--> را نگه نمی‌دارد؛ پس قالبی را که از آن استفاده میکند کوچک نکنید، وگرنه Outlook ممکن است همه چیز بعد از آن را پنهان کند. پیشنمایش، نمایش مرورگر است؛ Outlook کلاسیک ویندوز ایمیل را با موتور Word رسم میکند، پس پیش از ارسال گسترده یک ایمیل آزمایشی آنجا برای خودتان بفرستید.
پیشنمایش، زیباسازی و فشردهسازی در مرورگر شما انجام میشوند. فقط گزارش بررسی نشانهگذاری را به سرور میفرستد، جایی که تجزیه و در همان پاسخ برگردانده میشود: چیزی روی دیسک نوشته یا ثبت نمیشود و آمار استفاده فقط شمارشها را نگه میدارد.
اسکریپتها بهطور پیشفرض خاموشاند، چون کد چسباندهشده قابل اعتماد نیست. گزینه "اجرای اسکریپتها" را تیک بزنید تا پیشنمایش با JavaScript فعال، همچنان درون سندباکس، دوباره بارگذاری شود و خروجی کنسول زیر پیشنمایش ظاهر شود.
پیشنمایش از متن چسباندهشده ساخته میشود، نه از رایانه یا سرور شما، پس مسیر نسبیای مثل images/logo.png در این سایت جستوجو میشود و پیدا نمیشود. از URL مطلق استفاده کنید یا تگ <base href="..."> اضافه کنید که به محل واقعی فایلها اشاره کند.
فقط تورفتگی بین تگها را از نو تنظیم میکند و محتوای pre، textarea، script و style را دست نمیزند. فاصله بین عناصر درونخطی گاهی ممکن است کمی جابهجا شود، پس بعد از قالببندی پیشنمایش را بررسی کنید.
گزارش بررسی تا ۱٬۰۰۰٬۰۰۰ نویسه را میپذیرد و حداکثر ۲۰۰ مشکل را فهرست میکند. پیشنمایش زنده بالای ۲۰۰٬۰۰۰ نویسه متوقف میشود تا تایپ روان بماند؛ برای بهروزرسانی روی نوسازی بزنید یا Ctrl+Enter را فشار دهید.
بله. کد HTML ایمیل را بچسبانید یا فایل .html را باز کنید، عرض را روی تلفن همراه (375 px) و دسکتاپ (1280 px) بگذارید تا هر دو چیدمان را ببینید و روی بررسی بزنید تا تصاویر بدون متن جایگزین و منابعی که با http:// رمزنگاری‌نشده بارگذاری میشوند پیدا شوند. پیشنمایش از موتور مرورگر شما استفاده میکند، اما هر برنامه ایمیل موتور خودش را دارد و بسیاری بخشی از CSS را کنار می‌گذارند؛ پس تقریباً همان چیزی را نشان میدهد که یک وب‌میل در مرورگر نشان میدهد، نه دقیقاً آنچه هر صندوق ورودی نشان میدهد. برنامه‌های ایمیل JavaScript اجرا نمی‌کنند، پس اجرای اسکریپتها را خاموش بگذارید. پیش از ارسال واقعی، یک ایمیل آزمایشی به برنامه‌هایی که خوانندگانتان استفاده می‌کنند بفرستید.
از باز کردن مستقیم آن امنتر است. باز کردن فایل آن را در ویرایشگر داخل مرورگر شما بارگذاری میکند و تا روی بررسی نزنید چیزی به سرور فرستاده نمیشود. پیشنمایش در یک قاب ایزوله اجرا میشود که اسکریپتها و ارسال فرم در آن خاموش است، پس صفحه نمیتواند کد اجرا کند، فرمی بفرستد یا به کوکیهای این سایت دسترسی پیدا کند. تصاویر و استایلهایی که نشانی کامل http(s) دارند همچنان بارگذاری میشوند، پس فرستنده میتواند بفهمد فایل باز شده است. اول کد را بخوانید، اجرای اسکریپتها را خاموش بگذارید و هرگز در صفحهای که برایتان فرستادهاند رمز عبور وارد نکنید.
باز کردن فایل همیشه فایل را با UTF-8 میخواند و تگ <meta charset> داخل آن را نادیده میگیرد. صفحهای که با Windows-1256 ذخیره شده باشد، که در ویرایشگرها و خروجیهای قدیمی ویندوز رایج است، حروف فارسی را با بایتهایی نگه میدارد که 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" را فهرست میکند. ارسال واقعی را روی سرور توسعه خودتان آزمایش کنید.