Softonic

Przeglądarka wyrenderowanego HTML

Krok 1 / 2
Dalej

Wklej dowolny HTML (szablon e-maila, zeskrobany fragment strony, przykład z dokumentacji) i kliknij Renderuj, aby zobaczyć go narysowanego w izolowanej ramce iframe. Ramka działa w najsurowszej piaskownicy przeglądarki: skrypty się nie wykonują, formularze niczego nie wysyłają, a znacznik nie może ani nawigować, ani dotknąć otaczającej strony. To najszybszy sposób, by odpowiedzieć na pytanie “jak ten znacznik naprawdę wygląda”, bez stawiania serwera testowego.

Jak podejrzeć HTML

  1. 1

    Wklej swój HTML

    Umieść w polu źródła pełny dokument lub luźny fragment. To, co wkleisz, jest dokładnie tym, co zostanie wyrenderowane, tak jak zostało zapisane.

  2. 2

    Kliknij Renderuj

    Przeglądarka wpisuje Twój HTML do izolowanej ramki iframe i pokazuje wynik wprost na stronie.

  3. 3

    Przeczytaj podgląd

    Ramka rysuje Twój znacznik tak jak przeglądarka: nagłówki, tabele, listy, style wpisane w kod oraz SVG, wszystko się pojawia.

  4. 4

    Popraw i wyrenderuj ponownie

    Popraw źródło i renderuj tyle razy, ile chcesz, aby porównać, jak wygląda każda wersja.

Dlaczego ramka jest izolowana

Wklejony HTML może zawierać cokolwiek: znaczniki <script>, sztuczkę <img onerror="...">, formularz wysyłający dane gdzieś dalej albo <iframe> ładujący inną witrynę. Aby nic z tego nie dotknęło strony, podgląd jest wpisywany do <iframe sandbox> z pustym atrybutem sandbox, czyli w najsurowszym możliwym ustawieniu. W tym trybie przeglądarka blokuje jednocześnie wykonywanie skryptów, wysyłanie formularzy, wyskakujące okienka, nawigację na poziomie nadrzędnym oraz dostęp do tego samego źródła. Widzisz wynik wizualny, nie dając znacznikowi żadnej władzy.

Ponieważ skrypty nigdy nie działają, wszystko, co zależy od JavaScriptu (komponent webowy nawadniany przy ładowaniu, wykres rysujący sam siebie, framework montujący się w pustym <div>), pokazuje tylko swój statyczny znacznik, a nie wynik działania skryptów. To świadomy kompromis: bezpieczny, przewidywalny podgląd zamiast interaktywnego.

Co przeglądarka renderuje dobrze

Rodzaj treści Uwagi
HTML e-maila Układy oparte na tabelach i style wpisane w kod wyglądają tak, jak rysuje je większość klientów
Treść wpisu na blogu Nagłówki, listy, cytaty i obrazy pojawiają się zupełnie bez skryptów
Zeskrobany fragment Pokazuje, czy pobrany znacznik jest na tyle kompletny, by istnieć samodzielnie
Wbudowany SVG Rysuje się w dowolnym rozmiarze, wygodnie do sprawdzenia ikony
Znacznik statycznego komponentu Znacznik jest renderowany; jego zachowanie w JavaScripcie nie

Dobre zastosowania tego narzędzia

  • QA szablonów e-mail. Wklej eksport ze swojego edytora e-maili i zobacz układ, nie wysyłając sobie wiadomości testowej.
  • Szybka kontrola zeskrobanych danych. Pobrałeś trochę innerHTML ze strony: czy renderuje się z powrotem w coś sensownego? Jeśli nie, fragment jest zapewne niekompletny.
  • Przegląd Markdown na HTML. Przepuść tekst przez konwerter (narzędzie HTML na Markdown robi to w obie strony) i podejrzyj powstały HTML tutaj.
  • Nauka i nauczanie. Wklej przykład z dokumentacji i obserwuj dokładnie, jak przeglądarka go rozmieszcza.

Na co uważać

  • Adresy względne. Obrazy i arkusze stylów wskazywane ścieżką względną jak /assets/logo.png nie mają serwera, względem którego mogłyby się rozwiązać, więc się nie wczytają. Użyj bezwzględnego adresu https:// lub URI data:, jeśli chcesz, aby obraz się pojawił.
  • Zasoby zewnętrzne. Czcionki, arkusze stylów i obrazy ładowane z innych witryn zależą od tego, czy te witryny na to pozwalają; niektóre wysyłają nagłówki blokujące ładowanie wewnątrz ramki.
  • Brak skryptów. Jeśli Twój znacznik ożywa dopiero z JavaScriptem, podgląd pokazuje jego stan sprzed skryptów. Tak ma być, to nie błąd.

Najczęściej zadawane pytania

Tak. Podgląd działa w całkowicie izolowanej ramce iframe bez żadnych uprawnień, więc skrypty nie mogą się wykonać, a znacznik nie może sięgnąć otaczającej strony. Nawet złośliwy HTML może jedynie narysować sam siebie wewnątrz ramki.

Nie. Piaskownica całkowicie blokuje wykonywanie skryptów, więc znaczniki <script> i wpisane w kod procedury obsługi zdarzeń są ignorowane. Widzisz statyczny znacznik, i właśnie to czyni podgląd bezpiecznym.

Ścieżka względna nie ma się względem czego rozwiązać, a niektóre hosty wysyłają nagłówki uniemożliwiające wczytanie ich obrazów wewnątrz ramki. Użyj bezwzględnego adresu https:// albo osadź obraz jako URI data:.

Tak. Wklej cały dokument (doctype, <head>, <body> i wszystko) i wyrenderuje się tak, jak został zapisany. Luźny fragment też działa; resztę uzupełnia przeglądarka.

To narzędzie renderuje HTML, który wklejasz jako tekst; nigdy nie pobiera adresu URL. Masz dokładną kontrolę nad tym, co jest renderowane, co przydaje się przy szablonach e-mail, zeskrobanych fragmentach i szybkim debugowaniu.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Zbuduj plik .editorconfig z własnych reguł wcięć, końca linii i kodowania, a potem dodaj poprawną sekcję dla każdego języka w repozytorium: Python, Go, YAML, Makefile i więcej.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Narzędzie jest dostępne w innych językach