Как отлаживать CSS в собственном браузере Android?

Я создаю гибридное приложение с Cordova для Android. HTML5/CSS3 отображается правильно с Chrome для настольных компьютеров и Chrome для Android.

Однако через Кордову HTML5/CSS3 отображается с помощью собственного браузера (приложение под названием "Интернет" ). И кажется, что есть несколько проблем с интерпретацией CSS.

Firefox имеет Firebug, а в Chrome есть панель разработчика, доступная на рабочем столе для удаленной отладки. Знаете ли вы какой-либо аналогичный инструмент, который я мог бы использовать, чтобы эффективно отлаживать CSS для мобильного родного браузера?

Ответы

Ответ 2

Я пробовал использовать браузер Android 2.2, и он работает красиво

Чтобы настроить его,

sudo npm install -g weinre

// make it available to external (than just localhost)
weinre --boundHost -all-

// include this line (change to your IP address) to every page to be tested
<script src="http://xxx.xxx.x.xxx:8080/target/target-script-min.js#anonymous"></script>

Подробнее с этого сайта Удаленная отладка с weinre

Ответ 3

Просто, чтобы дать более свежий вариант.

Вы также можете использовать BrowserSync. В настоящее время Weinre уже интегрирован в это.

# Using a local.dev vhost
$ browser-sync start --proxy

# Using a local.dev vhost with PORT
$ browser-sync start --proxy local.dev:8001

# Using a localhost address
$ browser-sync start --proxy localhost:8001

# Using a localhost address in a sub-dir
$ browser-sync start --proxy localhost:8080/site1

http://www.browsersync.io/docs/command-line/

Ответ 4

Во-первых, я запускаю консоль Android Virtual Device с помощью $ android avd и запускаю настроенную эмуляцию Android v4.4.2 только с установленным родным браузером.

Затем я запустил свой Chrome v54.0 для рабочего стола в своем ноутбуке, откройте Google-Developer-Tools/Top-Right-Contextual-Menu/More-Tools/ Удаленные устройства.

Там я вижу свое виртуальное устройство в подключенном состоянии, поэтому я могу нажать кнопку Осмотреть на любой странице моего приложения Ionic2.

Это действие открывает новое плавающее окно Chrome Developer Tools, где я могу проверять CSS, HTML и Javascript так же, как и в моих веб-приложениях.

Надеюсь, это поможет кому-то.

Ответ 5

Это, кажется, задают в другом месте, но, возможно, не с конкретным вопросом. Независимо от того, я нашел этот ответ (Есть ли какая-то консоль отладки Firebug или JavaScript для Android?), чтобы помочь, но вместо использования Кордовы в сочетании с моим комментарий, используя Xamarin Android Player.