Usuwanie błędów w układach CSS w Androidzie

Question

Mamy istniejącą stronę internetową i poproszono mnie o przetestowanie jej zgodności z przeglądarkami mobilnymi.

Zainstalowałem Android SDK na moim komputerze stacjonarnym. Mogę wyświetlić moją lokalną witrynę w emulatorze i zidentyfikowałem wiele błędów w układzie strony, które występują w przeglądarce Androida.

Ale ponieważ żaden z tych problemów nie występuje w żadnej przeglądarce na komputerze, zmagałem się z tym, jak je usunąć. Na przykład w Firefoksie bardzo łatwo jest użyć Firebug, aby zobaczyć, jakie arkusze stylów zostały wprowadzone i dostosować je w locie, aby zobaczyć, jak wpływa na układ. Ale nie znalazłem sposobu na zrobienie czegoś podobnego na emulatorze Androida.

Pytanie brzmi: brakuje wersji próbnej + błąd, jak mam się dowiedzieć, co powoduje problemy z układem? Czy przeglądarka systemu Android (lub zestaw SDK Androida) ma jakieś narzędzia przydatne do debugowania CSS? Jeśli tak, jak z nich korzystać?

[EDIT] nie znalazłem rozwiązanie dla tego, więc Rzucam otwarte drzwi do łowców nagród ...

Answer 1

Weinre jest chyba najbliższe temu, co szukasz:

Jeśli to, co szukasz jest coś, co pozwala dostosować układ w czasie rzeczywistym powinna cię uszczęśliwić.

Answer 2

Być może już widziałem tego, ale strona SDK Dokumentacja ma jedne podstawowe informacje na temat rozwijania i debugowania aplikacji internetowych na Androida:

Web Apps Overview

Debugging Web Apps

nadzieję, że pomoże!

Answer 3

https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US

https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US

https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US

Znalazłem kilka opcji, które pojawiają się, że powinny one pracować dla Ciebie, jeśli emulator/symulator wystarczy przynajmniej na początek. Zaletą tego jest to, że narzędzia programistyczne Chrome działają z dodatkami!

Answer 4

Nie wiem, jak wykryć urządzenie mobilne, ale mogę wykryć klienta z agentem użytkownika. Z tego powodu mogę po prostu wysłać inny ciąg agenta użytkownika, aby przetestować CSS, który działa całkiem dobrze.

Dla przeglądarki Firefox używam User Agent Switcher. Dodatkowo korzystam z narzędzia Web Developer nie tylko do przeglądania wszystkich ustawień, ale także do opcji Resize, aby symulować szerokość rzutni.

Safari firmy Apple ma rozszerzenie programisty, a także jest przełącznikiem User-Agent. Możesz dodać własny ciąg agenta użytkownika.

Answer 5

Osobiście wolałbym robić to na rzeczywistym sprzęcie Android. W użyciu telefon z ekranem dotykowym różni się od nawet najbardziej dokładnego emulatora; takie rzeczy jak: gamma, gęstość pikseli, wydajność, interakcja dotykowa (czy twoje łącza są wystarczająco duże?), orientacja pionowa/pozioma, a nawet fakt, że trzymasz ją w dłoni, czyni ją zupełnie inną niż na komputerze. Jeśli chcesz sprawdzić, jak dobrze Twoja strona działa na urządzeniach mobilnych/Androidzie, zdobądź tanie, używane urządzenie do przetestowania!

Jeśli chodzi o debugowanie; Zawsze dołączam własną funkcję "log", która tworzy konsolę div #, jeśli firebug/konsola przeglądarki jest niedostępna. Działa to dość dobrze do debugowania na telefonie z zastrzeżeniem, że obejmuje część treści. Następnie możesz wydrukować bieżący styl obiektu z czymś takim, jak:

log(window.getComputedStyle(document.getElementById("myobj")); 

log(window.getComputedStyle(document.getElementById("myobj")); 

Uwaga: Powyższe elementy nie będą działać w IE.

Answer 6

znalazłem ten link do zdalnego debugowania w Androidzie:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

myślę, że to jest to, czego szukasz.