Softonic

Просмотр отрендеренного HTML

Шаг 1 / 2
Далее

Вставьте любой HTML (шаблон письма, фрагмент выгруженной страницы, пример из документации) и нажмите «Отрендерить», чтобы увидеть его отрисованным в изолированном iframe. Фрейм работает в самой строгой песочнице браузера: скрипты не выполняются, формы ничего не отправляют, а разметка не может ни переходить по ссылкам, ни касаться окружающей страницы. Это самый быстрый способ ответить на вопрос «как эта разметка выглядит на самом деле», не поднимая тестовый сервер.

Как просмотреть HTML

  1. 1

    Вставьте свой HTML

    Поместите в поле источника полный документ или отдельный фрагмент. Что вставите, то и отрендерится, ровно как написано.

  2. 2

    Нажмите «Отрендерить»

    Просмотрщик записывает ваш HTML в изолированный iframe и показывает результат прямо на странице.

  3. 3

    Изучите предпросмотр

    Фрейм рисует вашу разметку так, как это сделал бы браузер: заголовки, таблицы, списки, встроенные стили и SVG: всё отображается.

  4. 4

    Поправьте и отрендерите снова

    Отредактируйте источник и рендерите сколько угодно раз, чтобы сравнить, как выглядит каждая версия.

Почему фрейм изолирован

Вставленный HTML может содержать что угодно: теги <script>, трюк <img onerror="...">, форму, которая куда-то отправляет данные, или <iframe>, загружающий другой сайт. Чтобы ничего из этого не коснулось страницы, предпросмотр записывается в <iframe sandbox> с пустым атрибутом sandbox: это самая строгая настройка из возможных. В этом режиме браузер одновременно блокирует выполнение скриптов, отправку форм, всплывающие окна, навигацию верхнего уровня и доступ к тому же источнику. Вы видите визуальный результат, не давая разметке никаких полномочий.

Поскольку скрипты никогда не выполняются, всё, что зависит от JavaScript (веб-компонент, гидратирующийся при загрузке, диаграмма, рисующая себя сама, фреймворк, монтирующийся в пустой <div>), показывает только свою статическую разметку, а не результат работы скриптов. Это осознанный компромисс: безопасный и предсказуемый предпросмотр вместо интерактивного.

Что просмотрщик рендерит хорошо

Тип содержимого Примечания
HTML письма Табличные макеты и встроенные стили отображаются так, как их рисует большинство клиентов
Тело записи блога Заголовки, списки, цитаты и изображения отображаются вовсе без скриптов
Выгруженный фрагмент Показывает, достаточно ли полна собранная разметка, чтобы существовать сама по себе
Встроенный SVG Рисуется в любом размере, что удобно для проверки значка
Разметка статичного компонента Разметка рендерится, а её поведение на JavaScript нет

Для чего этот инструмент хорош

  • QA шаблонов писем. Вставьте экспорт из своего редактора писем и посмотрите на макет, не отправляя себе тестовое сообщение.
  • Быстрая проверка выгруженных данных. Вы взяли немного innerHTML со страницы: рендерится ли он обратно во что-то осмысленное? Если нет, фрагмент, скорее всего, неполный.
  • Проверка Markdown → HTML. Пропустите текст через конвертер (инструмент «HTML в Markdown» делает это в обе стороны) и просмотрите здесь получившийся HTML.
  • Учёба и обучение. Вставьте пример из документации и посмотрите, как именно браузер его компонует.

На что обратить внимание

  • Относительные URL. У изображений и таблиц стилей, указанных относительным путём вроде /assets/logo.png, нет сервера, относительно которого они разрешаются, поэтому они не загрузятся. Используйте абсолютный URL https:// или URI data:, если нужно, чтобы изображение появилось.
  • Внешние ресурсы. Шрифты, таблицы стилей и изображения, загружаемые с других сайтов, зависят от того, разрешают ли это те сайты; некоторые отправляют заголовки, блокирующие загрузку внутри фрейма.
  • Никаких скриптов. Если ваша разметка оживает только с JavaScript, предпросмотр показывает её состояние до скриптов. Это ожидаемо, а не ошибка.

Часто задаваемые вопросы

Да. Предпросмотр выполняется в полностью изолированном iframe без каких-либо разрешений, поэтому скрипты не могут выполниться, а разметка не может добраться до окружающей страницы. Даже вредоносный HTML способен нарисовать только сам себя внутри фрейма.

Нет. Песочница полностью блокирует выполнение скриптов, поэтому теги <script> и встроенные обработчики событий игнорируются. Вы видите статическую разметку, и именно это делает предпросмотр безопасным.

Относительному пути не относительно чего разрешаться, а некоторые хосты отправляют заголовки, мешающие загрузке их изображений внутри фрейма. Используйте абсолютный URL https:// или встройте изображение как URI data:.

Да. Вставьте документ целиком (doctype, <head>, <body> и всё остальное), и он отрендерится как есть. Отдельный фрагмент тоже работает; остальное браузер дополнит сам.

Этот инструмент рендерит HTML, который вы вставляете как текст; он никогда не загружает URL. Вы точно контролируете, что рендерится, что удобно для шаблонов писем, выгруженных фрагментов и быстрой отладки.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер размера файлов

Преобразуйте значения между байтами, КБ, МБ, ГБ, ТБ и двоичными единицами IEC (KiB, MiB, GiB, TiB), свободно сочетая десятичные и двоичные единицы.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Инструмент доступен на других языках