Отладка сбоев в CSS в Android

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

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

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

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

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

Solutions Collecting From Web of "Отладка сбоев в CSS в Android"

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

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

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 Developer Tools, похоже, работает с надстройками!

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

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

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

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

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

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

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

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

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

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

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

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

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

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