Вставьте HTML и смотрите предпросмотр на любой ширине экрана. Затем форматируйте, сжимайте или проверяйте на ошибки.
Нажмите «Проверить», чтобы увидеть количество элементов, структуру заголовков и список проблем в разметке.
Вывод консоли из предпросмотра отображается здесь, когда разрешен запуск скриптов.
Шаблон письма, фрагмент из тикета, выгруженный отчёт: иногда нужно просто увидеть, как выглядит кусок HTML. Вставьте его, и он отображается по мере ввода, в изолированной рамке, с выбранной шириной экрана. Рядом с предпросмотром его можно отформатировать, сжать, запустить его скрипты с консолью и увидеть список того, что действительно не так в разметке.
Вставленный HTML может содержать скрипты, формы и ссылки, которые писали не вы. Предпросмотр работает в iframe с атрибутом sandbox и собственным непрозрачным источником (origin), поэтому ничто внутри не может прочитать cookie этого сайта или вашу сессию, отправить что-то от вашего имени или увести эту страницу на другой адрес. Скрипты остаются выключенными, пока вы их не включите.
Разметка читается стандартным 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 для Windows отображает письма движком 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, так что оставьте Запускать скрипты выключенным. Перед настоящей рассылкой отправьте тестовое письмо в клиенты, которыми пользуются ваши читатели.
Безопаснее, чем открывать его напрямую. Открыть файл загружает его в редактор в вашем браузере, и на сервер ничего не уходит, пока вы не нажмете Проверить. Предпросмотр идет в изолированном фрейме, где скрипты и отправка форм выключены, поэтому страница не может выполнить код, отправить форму или получить доступ к cookie этого сайта. Изображения и стили с полным адресом http(s) все же загружаются, так что отправитель может узнать, что файл открыли. Сначала прочитайте код, не включайте Запускать скрипты и никогда не вводите пароль на присланной странице.
Кнопка «Открыть файл» всегда читает файл как UTF-8 и игнорирует тег <meta charset> внутри него. Страница, сохранённая в Windows-1251 или KOI8-R (так часто делают старые редакторы и выгрузки в Windows), хранит русские буквы байтами, которые не являются допустимым UTF-8, поэтому каждая из них показывается как символ замены �. Откройте файл в редакторе, пересохраните его в UTF-8 (Блокнот: «Сохранить как», кодировка UTF-8; VS Code: нажмите на кодировку в строке состояния, затем Save with Encoding) и откройте здесь снова. Или откройте файл в браузере, просмотрите исходный код и вставьте его сюда: браузер уже раскодировал его по charset самой страницы.
Песочница никогда не разрешает отправку форм и всплывающие окна, даже с включённым «Запускать скрипты», поэтому кнопка отправки ничего не отправляет, а ссылки с target="_blank" и вызовы window.open() блокируются. Так вставленная страница не может отправить данные или открыть другие сайты. Обычные ссылки открываются внутри окна предпросмотра, а сайты, запрещающие встраивание во фрейм, показываются пустыми или с отказом. Чтобы проверить форму, посмотрите её action, method и поля в исходном коде; «Проверить» также показывает каждую ссылку target="_blank" без rel="noopener". Настоящую отправку проверяйте на своём сервере разработки.