Просмотр HTML-кода

Предпросмотр на правой панели близко отражает то, как ваш код будет выглядеть в браузере. Если что-то выглядит неожиданно, проверьте, правильно ли закрыты HTML-теги.

Вставляемый вами HTML помещается внутрь iframe, изолированного атрибутом 'sandbox'. Эта изоляция позволяет коду выполняться, блокируя при этом доступ к остальной части сайта, файлам cookie или другим вкладкам — это значит, что даже ненадёжный код можно безопасно протестировать.

• Вы вставляете свой HTML (который также может включать CSS/JavaScript) в поле кода.
• При нажатии 'Обновить предпросмотр' код передаётся в изолированный iframe.
• Iframe отображает код в среде, изолированной от основной страницы, благодаря атрибуту 'sandbox'.
• Результат отображается визуально в области предпросмотра справа.
• Отредактируйте код и снова нажмите кнопку, чтобы обновить предпросмотр.

Когда вы вставляете фрагмент iframe для встраивания или простой эксперимент с HTML/CSS, результат мгновенно появляется на правой панели, что позволяет проверить, как это будет выглядеть, перед добавлением на живой сайт.

• Протестируйте, как код встраивания (например, виджет iframe) будет выглядеть на вашем сайте, прежде чем публиковать его здесь.
• Предпросмотр не обновляется автоматически при каждом изменении — не забывайте нажимать 'Обновить предпросмотр' после редактирования кода.
• Поскольку область предпросмотра изолирована, любые скрипты в вашем коде не могут повлиять на остальную часть страницы или прочитать её.

В процессе веб-разработки, чтобы увидеть, как фрагмент HTML или код встраивания будет выглядеть на реальном сайте, обычно сначала нужно добавить код в рабочую среду — это может отнимать время и, в случае некорректного кода, испортить внешний вид сайта. Этот инструмент устраняет этот риск, позволяя тестировать код в изолированной среде.

В основе этого инструмента лежит функция iframe 'sandbox', предлагаемая браузерами. Эта функция полностью изолирует содержимое внутри iframe от определённого набора разрешений; по умолчанию не предоставляется никаких возможностей, кроме выполнения скриптов — нет доступа к родительской странице, нет отправки форм, нет открытия новых окон.

Этот выбор дизайна намеренный: предоставить пространство, где пользователи могут тестировать даже код, которому они не доверяют, при этом защищая реальный сайт (а также файлы cookie и данные сеанса пользователя). Многие профессиональные платформы для обмена кодом (например, инструменты в стиле CodePen) следуют тому же принципу изоляции.

Предпросмотр не обновляется автоматически при каждом изменении кода; вместо этого он запускается вручную кнопкой 'Обновить предпросмотр'. Это сохраняет плавную производительность и даёт пользователю контроль над тем, когда код действительно выполняется, вместо случайного выполнения до завершения.

Этот инструмент полезен для тестирования виджетов встраивания, быстрой проверки идеи HTML/CSS, безопасного изучения кода, предоставленного в отчёте об ошибке, или просто для наблюдения за тем, как отображается HTML, в рамках процесса обучения.