Microsoft zapowiada SuperPreview do testowania przeglądarki IE

Testowanie przeglądarek to gorący i frustrujący problem zarówno wśród projektantów stron internetowych, jak i programistów. W większości przypadków programiści projektują dla jednej docelowej przeglądarki, a gdy skończą, zaczynają poprawiać projekt, aby był kompatybilny z innymi przeglądarkami.

Istnieje wiele sposobów na przetestowanie witryny przed jej uruchomieniem - można na przykład zainstalować kilka przeglądarek i systemów operacyjnych, uruchomić maszyny wirtualne o różnych konfiguracjach lub skorzystać z usługi hostowania obrazów, w ramach której dla danej wersji przeglądarki i systemu operacyjnego tworzony jest zrzut ekranu, który można wykorzystać do celów porównawczych.

Od dziś dostępny jest nowy sposób testowania kompatybilności przeglądarek opracowany przez firmę Microsoft i noszący nazwę SuperPreview. W tym artykule przedstawię krótką charakterystykę SuperPreview, a także porównam i wymienię alternatywne systemy testowania projektów stron WWW.

Przegląd

SuperPreview to nowa, bezpłatna, samodzielna aplikacja Microsoftu (wciąż w wersji beta), która umożliwia sprawdzenie, jak Twoje strony będą wyglądały w różnych wersjach Internet Explorera, dzięki czemu migracja z IE6 do 7 i 8 będzie znacznie łatwiejsza niż dotychczas, bez konieczności uruchamiania maszyny wirtualnej do uruchamiania IE6 lub posiadania osobnego komputera przeznaczonego do uruchamiania IE6. Zostanie również wydana wersja płatna, która będzie obsługiwać przeglądarki inne niż IE. W tej recenzji omówię tylko wersję bezpłatną. Należy wspomnieć, że jest to bardzo wczesne wydanie przedpremierowe, więc w przyszłości powinno pojawić się więcej funkcji i poprawek.

Dostępność

Wersja beta SuperPreview zostanie ogłoszona dzisiaj na konferencji Mix09 i będzie dostępna do pobrania za darmo dla ogółu społeczeństwa wkrótce potem. [AKTUALIZACJA] Oprogramowanie zostało wydane dzisiaj przed konferencją MIX09 i wcześniej niż pierwotnie oczekiwano i jest już dostępne: Pobierz Microsoft SuperPreview

Zostałem poproszony przez Microsoft o przetestowanie wczesnej wersji beta i przez ostatnie kilka dni współpracowałem z zespołem programistów, przekazując im swoje uwagi i sugestie.

Wersja premierowa SuperPreview dla Internet Explorera będzie dostępna latem 2009 roku.

Dostępna jest również pełna wersja, która zawiera obsługę Firefoksa i Safari. Jest to wersja płatna, która będzie częścią Expression Web 3. Będziesz miał możliwość włączenia jej z poziomu Expression Web lub jako samodzielnej wersji. Przewidywana data premiery to lato 2009 roku.

SuperPreview

SuperPreview to całkiem fajny pomysł i po raz pierwszy widzę, żeby tego typu funkcje testowania w przeglądarce były dostępne jako samodzielna aplikacja, a nie jako usługa hostowana. Po prostu wpisujesz adres URL (lub plik lokalny), który chcesz przetestować, a program pokazuje podgląd w dwóch wersjach IE jednocześnie, w podzielonym oknie. Program posiada wbudowany silnik renderujący IE6 i wymaga posiadania IE7 lub IE8, aby móc je porównać.

Poważną wadą jest to, że przynajmniej w tej chwili nie ma konkretnych planów wydania wersji dla komputerów Mac, choć być może zostanie ona dodana w przyszłości. Musiałem przetestować ją na moim komputerze Mac przy użyciu programu Parallels, co spowodowało kilka błędów, takich jak powolny czas reakcji i migotanie niektórych ekranów ładowania. Ponadto interfejs użytkownika jest moim zdaniem dość nieatrakcyjny i niezbyt przyjazny dla użytkownika, choć twierdzą, że poprawią to w ostatecznym wydaniu.

Ponadto nie ma jeszcze dostępnego rozwiązania hostowanego, które byłoby szczególnie przydatne dla użytkowników komputerów Mac, którzy nie mogą zainstalować IE do celów testowych.

Kluczowe cechy:

• Tryby wskaźnika: Umożliwia klikanie poszczególnych sekcji strony w celu ich porównania. Nazwa znacznika HTML sekcji, jej klasa lub nazwa ID, rozmiar i atrybuty pozycji są wyświetlane na pasku stanu.
• Przeglądanie obrazów: Porównaj kompilację programu Photoshop z przeglądarką podstawową, aby upewnić się, że wszystko w niej jest zgodne z oryginalnym projektem.
• Podświetlanie DOM: Można zaznaczyć określone elementy DOM, aby zobaczyć, w których miejscach występują różnice w wyrównaniu między przeglądarkami. Wyświetlane są pozycje renderowanych elementów i ich właściwości CSS.
• Prowadnice pozycjonowania/linijki: Użyj linijki, aby zmierzyć różnice w układzie między przeglądarkami. Gdy ustawisz linijkę w oknie jednej przeglądarki, linijka w drugiej przeglądarce przesuwa się wraz z nią.
• Widoki układu: Wyświetlanie obok siebie w poziomie lub w pionie albo w trybie nakładania.
• Powiększenie: wybór poziomu powiększenia.
• Wiele rozdzielczości: Nie jest jeszcze dostępne w tym wydaniu beta, ale zostanie uwzględnione w przyszłych wydaniach.
• Wyświetlanie miniatur: W dolnej części każdego panelu wyświetlana jest miniatura z miniaturową mapą całej witryny, dzięki czemu można szybko kliknąć inny obszar strony.

Przykłady:

Pasek narzędzi przedstawiający różne prowadnice i linijki

Prowadnice i linijki z podświetleniem DOM pokazują różnice w renderowaniu w IE6 i IE7

Wybieranie przeglądarek lokalnych, zdalnych lub obrazów (zrzut ekranu pełnej wersji z obsługą przeglądarek innych niż IE)

Zalety:

• Nie trzeba instalować IE6.
• Porównanie obok siebie i wybór widoków układu.
• Możliwość porównania kompilacji Photoshopa z podstawową przeglądarką.
• Prowadnice i linijki do mierzenia różnic w pozycjonowaniu między przeglądarkami.
• Tryb nakładki pokazuje, czy istnieje wiele rozbieżności.
• Podświetlanie DOM jest przydatne do szybkiego wyszukiwania i identyfikowania różnic.
• Możliwość powiększania.
• Bezpłatna dla podglądów w przeglądarce IE.
• Wyświetlanie stron PHP i ASPX (pod warunkiem, że w systemie jest zainstalowane PHP).
• Obsługuje wszystko to, co obsługuje rodzima przeglądarka, w tym Ajax i JavaScript.

Wady:

• Obecnie działa z IE8 w trybie emulacji IE7, co jest podobno w około 90% dobre. Pracują nad tym, aby renderowanie IE7 i IE8 było w pełni wbudowane.
• Nie ma jeszcze wersji dla komputerów Mac.
• Opcja rozdzielczości nie jest obecnie dostępna w wersji beta.
• Wersja darmowa porównuje tylko różne wersje Internet Explorera, a wersja płatna porównuje tylko przeglądarki zainstalowane przez użytkownika.
• Nieatrakcyjny interfejs użytkownika i ikony (przynajmniej w wersji beta).
• W trybie nakładki nie można rozpoznać, która przeglądarka jest która.
• Nie jest jeszcze dostępne rozwiązanie hostowane.
• Brak wsparcia dla ActiveX (w tym Flash).
• Brak możliwości porównania z przeglądarkami dla komputerów Mac.
• Nie można klikać łączy w celu poruszania się po witrynie.
• Powolny czas odświeżania/ładowania (przynajmniej w systemie XP na komputerze Mac z Parallels).
• Podgląd miniatur jest bezużyteczny w przypadku bardzo długich stron WWW.

Inne metody testowania

Popularną metodą testowania witryny (poza instalacją kilku przeglądarek i systemów operacyjnych) jest korzystanie z usługi hostingu, która wykonuje zrzuty ekranu strony internetowej oglądanej w różnych przeglądarkach i systemach operacyjnych. Oto kilka najpopularniejszych z nich:

BrowserShots

Obsługa wielu przeglądarek, technologii Java, Flash, Javascript i rozdzielczości ekranu. Łatwy w użyciu i bezpłatny.

Zdjęcie przeglądarki

Obsługuje wiele przeglądarek i wersji, a także systemy Windows, Mac i Linux. Od 800×600 do 1024×768. Cena: 15 dolarów za jednorazowe użycie lub 150 dolarów za domenę/rok za nieograniczone użycie

CrossBrowserTesting

Obsługa wielu przeglądarek i systemów operacyjnych. Płacisz za minutę użytkowania. Wymaga Javy. Darmowa wersja próbna.

Browsercam

Obsługuje dowolną przeglądarkę i system operacyjny. Zawiera JavaScript, formularze DHTML i bardziej dynamiczne funkcje. Opcja zdalnego dostępu i tworzenia stron mobilnych. Od 19,95 USD za jeden dzień użytkowania do przechwytywania przeglądarek.

BrowsrCamp

Testowanie przeglądarki MAC OS X przy użyciu zrzutów ekranu. Rozdzielczość od 800 px do 1600. Bezpłatnie dla zrzutów ekranu z Safari 3.1.2. Usługa płatna od 3 USD za dzień.

NetRendered

Sprawdza, jak strona internetowa jest renderowana przez Internet Explorer 7, 6 lub 5.5. Darmowy.

Litmus

Sprawdza każdą przeglądarkę i każdą platformę oraz zawiera funkcję śledzenia błędów. 50 testów miesięcznie jest bezpłatnych, ale tylko dla IE7 i Firefoksa 2. Obsługa 23 przeglądarek zaczyna się od 24 dolarów za dzień.

Na koniec można zainstalować wiele przeglądarek lub użyć maszyn wirtualnych do dalszych testów.

Oprogramowanie wirtualne:

Umożliwia zainstalowanie wielu systemów operacyjnych na tym samym komputerze

• VMWare
• Microsoft Virtual PC

Więcej informacji:

http://www.thesitewizard.com/webdesign/multiplebrowsers.shtmlhttp://css-discuss.incutio.com/?page=BrowserTesting

Zastrzeżenie od redaktora WDD: Ten wpis jest osobistą recenzją SuperPreview. Nie otrzymałem żadnego wynagrodzenia od firmy Microsoft ani żadnej innej firmy za recenzję tego produktu lub innych. Wyrażone tu opinie są wyłącznie moimi własnymi.

Napisz poniżej, jakich innych systemów używasz do testowania swoich witryn na różnych przeglądarkach i w różnych wersjach.