Мало кому известна возможность отладки на Android - это то, что вы можете отлаживать WebView внутри Android приложения, в реальном времени. Это можно сделать используя Chrome, установленный на вашем компьютере. Он позволяет изменять HTML и выполнять JavaScript в реальном времени, прямо в WebView вашего Android приложения.

WebView

Вы можете начать с простого WebView, которое показывает главную страницу Google.

<WebView Source="https://google.com" />

Эмулятор

Когда запустится эмулятор, вы увидите главную страницу Google. Далее все что вам нужно, чтобы ваше приложение работало, эмулятор был открыт, пока мы подключаем Chrome к WebView.

Главная страница Google

Chrome

Откройте Chrome на вашем компьютере и нажмите F12. Затем нажмите на три вертикальные точки и перейдите в раздел Дополнительные инструменты > Удаленные устройства. Как только вы это сделаете, в нижней части этого столбца появится окно с указанием устройств и настроек.

Переход к разделу устройств в Chrome

Выбор устройств

Сначала нажмите “Устройства”, затем выберите свое устройство. После этого вы увидите URL-адрес открытый во WebView и кнопку инспектирования. Нажмите эту кнопку.

Список доступных устройств

Инспектирование

После того, как вы нажали “Инспектировать”, вы увидите окно, которое покажет вам HTML-код WebView и предоставит все элементы управления WebView, которые вам были бы нужны при отладке или проверке веб-страницы в Chrome.

Инспектирование

Вы можете делать почти все, чтобы вы бы делали с обычной веб-страницей, в том числе:

  • Добавление или удаление HTML-элементов;
  • Запуск JavaScript;
  • Наведение указателем на элементы, чтобы увидеть их визуальное представление на устройстве / эмуляторе;
  • Просмотр визуальных индикаторов для каждого элемента.

Вывод

Это фантастический инструмент для отладки различных проблем в WebView. Это поможет вам сэкономить кучу времени, если вы пытаетесь добиться правильного расположения элементов и правильной работы скриптов, т.к. вам не понадобится после каждого изменения перезапускать приложение, чтобы увидеть результат.

Оригинал

Теги: xamarin forms, debug, c#, перевод