Toolverse
All skills

website-preview

by missing-semester

Take screenshots and interact with the rendered Jekyll website

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
17

About this skill

Take screenshots and interact with the rendered Jekyll website

How to use

  1. Upewnij się, że serwer Jekyll działa na porcie 4000. Sprawdź komendą curl do http://localhost:4000/ – powinna zwrócić kod 200. Jeśli serwer nie działa, uruchom go w tle poleceniem bundle exec jekyll serve --host 0.0.0.0 i czekaj kilka sekund na zbudowanie strony.

  2. Sprawdź, czy ChromeDriver jest uruchomiony – szukaj pliku /tmp/chromedriver_port. Jeśli go nie ma, uruchom ChromeDriver skryptem ./browser.sh chromedriver, który automatycznie znajdzie Chrome i uruchomi sterownik na wolnym porcie.

  3. Zacznij sesję przeglądarki poleceniem ./browser.sh start http://localhost:4000/ – otwiera to lokalną witrynę w automatyzowanej przeglądarce.

  4. Wybierz tryb wyświetlania – użyj ./browser.sh dark dla trybu ciemnego, ./browser.sh light dla jasnego, ./browser.sh mobile dla widoku mobilnego lub ./browser.sh desktop dla pulpitu. Tryb pozostaje aktywny do zmiany.

  5. Zrób zrzut ekranu poleceniem ./browser.sh screenshot /tmp/preview.png – plik zapisze się w /tmp. Możesz robić wiele zrzutów w różnych trybach bez restartowania sesji.

  6. Zamknij sesję poleceniem ./browser.sh stop. Po każdej zmianie CSS, SCSS lub HTML w edytorze powtórz kroki 4–5, aby zweryfikować efekt wizualnie.

Related skills