Отладка ошибок CSS в Android

У нас есть существующий веб-сайт, и меня попросили проверить его совместимость с мобильными браузерами.

Я установил Android SDK на свой настольный ПК. Я могу просмотреть свой сайт localhost в эмуляторе, и я определил ряд сбоев в макете страницы, которые происходят в браузере Android.

Но поскольку ни одна из этих проблем не возникает в любом настольном браузере, я изо всех сил пытаюсь их отладить. Например, в Firefox очень легко использовать Firebug, чтобы увидеть, какие таблицы стилей были appies и настроить их на лету, чтобы увидеть, как это влияет на макет. Но я не нашел способ сделать что-либо подобное на эмуляторе Android.

Вопрос в том, что до суда + ошибка, как мне решить, что вызывает эти проблемы с макетом? Есть ли в Android-браузере (или Android SDK) какие-либо инструменты, которые полезны для отладки CSS? Если да, то как их использовать?

[EDIT] Я не нашел для этого решения, поэтому я открываю двери охотникам за головами...

Ответ 1

Weinre, вероятно, ближе всего к тому, что вы ищете:

Если то, что вы ищете, это то, что позволяет вам настраивать макет в реальном времени, это должно сделать вас счастливым.

Ответ 2

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

Я нашел несколько вариантов, которые выглядят так, как будто они должны работать для вас, если эмулятор/симулятор будет достаточным или, по крайней мере, вы начнете. Преимущество этого заключается в том, что инструменты разработчика Chrome работают с надстройками!

Ответ 3

Лично я бы предпочел сделать это на самом Android-оборудовании. В использовании телефон с сенсорным экраном отличается от самого точного эмулятора; такие как гамма, плотность пикселей, производительность, сенсорное взаимодействие (ваши ссылки достаточно большие?), ориентация на портрете/пейзаж и даже тот факт, что вы держите его в руке, делает его совсем другим, чем у рабочего стола. Если вы хотите увидеть, насколько хорошо ваш сайт работает на мобильном /Android, получите дешевое подержанное устройство для тестирования!

Что касается отладки; Я всегда включаю свою собственную функцию "log", которая создает консоль div #, если пул firebug/browser недоступен. Это работает достаточно хорошо для отладки на телефоне с оговоркой, что он охватывает часть контента. Затем вы можете распечатать текущий стиль объекта с чем-то вроде

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

Примечание. Вышеупомянутое не будет работать в IE.

Ответ 4

Возможно, вы уже это видели, но на сайте документации SDK есть базовая информация о разработке и отладке веб-приложений на Android:

Обзор веб-приложений

Отладка веб-приложений

Надеюсь, что это поможет!

Ответ 5

Я не знаю, как вы обнаруживаете мобильное устройство, но я обнаруживаю клиента с помощью пользовательского агента. Из-за этого я могу просто отправить другую строку user-agent для проверки CSS, который работает достаточно хорошо.

Для Firefox я использую User Agent Switcher. Кроме того, я использую инструмент Web Developer не только для просмотра всех параметров, но и для параметра "Изменение размера" для имитации ширины окна просмотра.

Apple Safari имеет расширение разработчика и входит также в коммутатор User Agent. Вы можете добавить свою собственную строку User Agent.

Ответ 6

Я нашел эту ссылку для удаленной отладки в Android:

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

Я думаю, что это то, что вы ищете.