Jak używać
- Wklej fragment HTML lub cały dokument do pola kodu albo przeciągnij na nie plik .html.
- Włącz „Podgląd na żywo”, aby widzieć zmiany podczas edycji.
- Na ekranie szerszym niż 768 px w opcji „Widok” wybierz „Telefon 375” lub „Tablet 768”, aby sprawdzić stronę w węższym oknie.
- Na ekranie szerszym niż 768 px w opcji „Układ” wybierz „Obok siebie”, aby porównać kod z podglądem.
Przykłady
Karta produktu w widoku Telefon 375
<article style="max-width:320px;margin:16px auto;padding:16px;border:1px solid #ccc;border-radius:8px;font-family:sans-serif"> <h2>Kubek ceramiczny</h2> <p>Ręcznie wykonany w Bolesławcu. Pojemność: 300 ml.</p> <strong>49,90 zł</strong> </article>
Rozmiar: 257 B · Elementy: 4 · Zasoby zewnętrzne: 0
Błąd w skrypcie
<h2>Podsumowanie zamówienia</h2> <script> przeliczKoszyk(); </script>
Rozmiar: 70 B · Elementy: 2 · Zasoby zewnętrzne: 0 Konsola (1): Uncaught ReferenceError: przeliczKoszyk is not defined (linia 3:1)
FAQ
Czy mogę wyświetlić podgląd strony HTML po wpisaniu adresu URL?
Sam adres URL zostanie wyświetlony jako tekst; narzędzie nie pobierze strony. Do sprawdzenia jej źródła użyj narzędzia „Pokaż kod źródłowy strony”.
Jakie pliki mogę otworzyć w podglądzie HTML?
Obsługiwane są pliki .html, .htm, .xhtml, .svg i .txt. Pliki większe niż 5 MB są odrzucane.
Dlaczego w podglądzie nie widać obrazków lub stylów CSS?
Ścieżki względne, np. img/logo.png lub style.css, nie zostaną wczytane, jeśli w kodzie nie ma znacznika base z atrybutem href. Użyj pełnych adresów URL albo ustaw adres bazowy. Zasoby z innych serwerów nie wczytają się też wtedy, gdy włączysz opcję „Blokuj zasoby zewnętrzne”.
Czy mój kod HTML jest wysyłany na serwer?
Narzędzie renderuje HTML w Twojej przeglądarce, nie wysyła go na serwer i nie zapisuje między wizytami. Zewnętrzne obrazy, czcionki, arkusze stylów i skrypty mogą jednak łączyć się ze swoimi serwerami, które zobaczą Twój adres IP, chyba że włączysz „Blokuj zasoby zewnętrzne”.