Nawet najbardziej utalentowani specjaliści od tworzenia stron internetowych popełniają błędy od czasu do czasu. Wiesz, kodowanie to skomplikowana sprawa. Zawsze istnieje ryzyko, że coś pójdzie nie tak zaraz po tym, jak myślisz, że projekt jest wykonany.
Testowanie witryny, która została już zakodowana i działa w przeglądarce, trudno nazwać nadmierną chęcią bezpiecznego grania. Nie spiesz się i sprawdź kod HTML, CSS lub JavaScript, aby zapewnić pełną kompatybilność ze wszystkimi przeglądarkami i dobry rendering na wszystkich popularnych rozmiarach ekranu.
Tak naprawdę, technologie webowe ciągle rozwijają się, więc teraz łatwiej jest debugować swoją stronę i przetestować jej układ, tak jak to było powiedzmy rok wcześniej. Coraz więcej nowych, zaawansowanych narzędzi do debugowania pojawia się każdego dnia.
W tym artykułu są zebrane najlepsze narzędzia do debugowania. Korzystając z nich będziesz mógł zobaczyć, jak Twoja witryna wygląda i działa w różnych przeglądarkach i na różnych urządzeniach. Wymienione poniżej narzędzia do debugowania pokażą także błędy w kodzie, a także identyfikując potencjalne problemy.
* * *
Narzędzia do sprawdzania poprawności kodu
Narzędzie Debug tool wyświetla dane wyjściowe wygenerowane przez sesję debugowania dla aplikacji. Jeśli debugujesz wiele aplikacji, wyświetla dane wyjściowe każdego w zakładce nazwanej po odpowiedniej konfiguracji run/debug.
* * *
To rozszerzenie umożliwia użytkownikom łatwe sprawdzanie poprawności stron za pomocą walidatora HTML W3C. Jest bardzo proste w użyciu. Wystarczy kliknąć przycisk, a strona zostanie zbadana.
* * *
Chcesz sprawdzić język znaczników swoich dokumentów webowych? Użyj tego narzędzia do sprawdzania poprawności znaczników dokumentów napisanych w HTML, XHTML, SMIL, MathML i innych.
* * *
Narzędzie służy do sprawdzania dokumentów arkuszy stylów kaskadowych (CSS) i (X)HTML. Także można skorzystać z usługi premium W3C Validator Suite™. Sprawdza całą witrynę i ocenia jej zgodność ze standardami W3C, aby zidentyfikować słabe strony witryny.
* * *
To narzędzie służy do sprawdzania poprawności dokumentów HTML z paska adresu. Wszystko jest proste. Wystarczy kliknąć w ikonę na pasku adresu, aby potwierdzić aktualny dokument bez opuszczania strony. Liczba błędów pojawi się w końcówce narzędzia, a ich szczegóły będą widoczne na karcie konsoli narzędzi programistycznych Chrome.
* * *
Sprawdzenie responsywności układu
Wprowadź adres URL witryny w polu w lewym górnym rogu strony i zobacz, jak będzie renderowana na ekranach różnych urządzeń.
* * *
Z pomocą tego narzędzia do debugowania możesz zobaczyć, jak Twoja strona będzie wyglądała na ekranach najpopularniejszych urządzeń.
* * *
Kontrola wsparcia przeglądarki
Użyj serwisu Ghostlab, aby upewnić się, że wszyscy Twoi użytkownicy mają jednakowo dobre UX bez zwględu na system operacyjny, przeglądarkę lub smartfon, z którego korzystają. Ghostlab synchronizuje przewijanie, klikanie, przeładowuje i wprowadza dane wejściowe dla wszystkich podłączonych klientów. Oznacza to, że testujesz nie proste ładowanie strony, ale stronę pod względem wygody użytkownika.
* * *
Wielu programistów uważa ten serwis za najlepszą w swoim rodzaju. z jego pomocą będziesz mógł zobaczyć główne błędy w różnych wersjach IE.
* * *
IE Tab for Chrome to rozszerzenie przeglądarki umożliwiające korzystanie z Internet Explorera do wyświetlania stron internetowych w zakładce. Jest to przydatne, gdy strona wymaga funkcji Internet Explorer. Na przykład możesz użyć karty IE do wyświetlania stron, które wymagają formantów ActiveX, testowania stron internetowych z silnikiem renderującym IE i tak dalej.
* * *
Live, Web-Based Browser Testing
W skrócie, narzędzie zapewnia natychmiastowy dostęp do wszystkich przeglądarek stacjonarnych lub mobilnych. Przetestuj na żywo i pożegnaj się z konfiguracją wirtualną lub urządzeniami.
* * *
Automated testing in the cloud for CI
To narzędzie pasuje do przeprowadzania wszystkich testów na jednej potężnej platformie. Czy są to zautomatyzowane testy w różnych przeglądarkach.
* * *
Przetestuj swoją witrynę za darmo w dziesiątkach przeglądarek i uzyskaj natychmiastowe wyniki. Uzyskaj dostęp do ponad 1000 kombinacji przeglądarek, systemów operacyjnych i wtyczek.
* * *
Wprowadź adres URL swojej witryny w odpowiednim polu, wybierz przeglądarkę i sprawdź ich kompatybilność. Usługa obejmuje 7-dniowy bezpłatny okres próbny.
* * *
Za pomocą tego narzędzia możesz komunikować się z przeglądarkami na żywo tak, jakby były zainstalowane na Twoim komputerze. Usługa nie korzysta z emulatorów lub fałszywych przeglądarek. Natychmiast uzyskasz dostęp do najnowszych przeglądarek. Browserling jest obsługiwany przez HTML5 <canvas> i JavaScript, więc nie musisz instalować niczego innego. Możesz odwrócić serwer proxy lokalnego hosta lub serwera lokalnego w Browserling za pomocą tuneli ssh. Wszystkie połączenia między Tobą a przeglądarką są szyfrowane za pomocą protokołu SSL, dlatego przeglądanie jest całkowicie anonimowe. Bezpłatny plan jest dostępny.
* * *
Nie są wymagane żadne instalacje. Wystarczy kliknąć, aby uruchomić i przetestować dowolną przeglądarkę natychmiast online.
* * *
Narzędzie jest stosowane do automatycznych testów zgodności. Testuje i zgłasza błędy na różnych stronach przeglądarki oraz błędy skryptów w Twojej witrynie.
* * *
Litmus jest właściwym narzędziem do testowania jednej przeglądarki. Zapewnia przeglądanie stron w wielu przeglądarkach oprócz podglądu poczty e-mail. Podaj adres URL, a zobaczysz jak wygląda w popularnych przeglądarkach internetowych
* * *
Umożliwia szybsze testowanie, ponieważ symulatory przeglądarek i urządzeń mobilnyche są zapakowane w szybką desktop aplikację. Możesz przetestować swój produkt na różnych na urządzeniach mobilnych (iOS, Android, BlackBerry) w jednej aplikacji. Narzędzie pozwala łatwo znaleźć problemy ze zgodnością, zaobaczyć problemy ze wspieraniem przeglądarki bezpośrednio w kodzie i przetestować do 4 przeglądarek i urządzeń mobilnych na raz.
* * *
Narzędzie TestingBot umożliwia testowanie w przeglądarce za pomocą Selenium w chmurze. Ten serwis pomaga testować witryny w różnych przeglądarkach, automatycznie lub ręcznie, 24 godziny na dobę. Bezpłatny okres próbny jest dostępny!
* * *
Narzędzia do debugowania CSS i JS
To jest narzędzie do sprawdzania jakości kodu JavaScript. Mówiąc prościej, podkreśla problemy w programach JavaScript. Jest to lepsze narzędzia, aniż sprawdzanie kodu przez przeglądarki, ponieważ program jest skoncentrowany na jakości kodu, a przeglądarki nie.
* * *
Wprowadź swój CSS do pola wejściowego i zobacz, czy wymaga poprawy.
* * *
Online Javascript Compression Tool
Jest to webowy kompresor JavaScript, który umożliwia kompresję i minimalizowanie plików JavaScript. Zazwyczaj zmniejsza pliki o 30-90%. Takie pliki JavaScript są idealne w środowiskach produkcyjnych. Większość redukcji rozmiaru pliku uzyskuje się poprzez usunięcie komentarzy i dodatkowych białych znaków, które nie są potrzebne.
* * *
Tutaj znajdziesz cały zestaw narzędzi do dostosowania, minimalizowania, formatowania lub kompresowania wielu różnych formatów plików.
Ten artykuł został przetłumaczony z angielskiego. Orygimał można znaleźć tutaj: Do You Make Mistakes in Your Code? Use Web Debugging Tools and Resources for Testing Layouts.
* * *
P.S. Czy zawsze testujesz utworzone strony? Czy wykorzystujesz te narzędzia do debugowania? Napisz swoją opinię o nich w sekcji komentarzy!