Полная стратегия мобильной отладки H5

С быстрым развитием мобильных устройств,H5развитие также сталоF2Eнезаменимая способность. Наиболее важной частью мобильной разработки является овладение навыками отладки.Bugв бесформенном.

Статья впервые опубликована вблог Яртто, просьба указывать источник при перепечатке.

1. Резюме

Поскольку мобильная операционная система делится наiOSа такжеAndroidЕсть две фракции, поэтому навыки отладки в этой статье также будут различаться по разным системам. Найдите наиболее подходящий и эффективный способ сделать больше с меньшими затратами.

В статье будут перечислены различные решения, подходящие на данный момент для мобильной отладки, приходите и выбирайте своеЛучшие практикиБар!

2. iOS-устройства

Safari: инструмент отладки iphone, первый выбор для проверки ошибок и изменения стилей, нам нужно выполнить следующие настройки:

Настройки браузера: Safari — «Настройки» — «Дополнительно» — установите флажок «Показать «Разработка в строке меню»».
настройки iphone: Настройки-Safari-Дополнительно-Открыть веб-инспектор

Готово, на этот раз по телефонуSafariоткрытьH5страницы, мы можем увидеть через параметры разработки браузера:
safari1

Симулятор IOS: нет реальной машины, подходящей для отладкиWebviewа такжеH5Тематические страницы с частыми взаимодействиями.

Скачать первымXcode, запускаем проект, выбираем эмуляторiphonex, эмулятор будет открыт после компиляции следующим образом:

можно увидетьH5Он уже запущен в "оболочке", можете попробовать его вызватьWebviewМетод взаимодействует с «оболочкой». Для получения дополнительных навыков отладки, пожалуйста, обратитесь к статье:Отладка симулятора iOS.

Конкретная функция отладки по-прежнему зависит от параметров разработки браузера, таких же, как и выше, поэтому я не буду вдаваться в подробности.

3. Захват пакетов

Charles: предпочтительный инструмент захвата пакетов для Mac OS, подходящий для просмотра и управления сетевыми запросами и анализа данных.

CharlesДля захвата пакетов сначала необходимо настроить мобильный прокси.Wifi- Настроить прокси (IP-адрес) - вручную, как показано ниже:

Настройте мобильный прокси и откройте его в это времяCharles, вы получите напоминание о подтверждении, выберите Разрешить. Следующим шагом будет захват запроса телефона, но это рутинные операции, давайте немного продвинутее.

Интересно то, что мы можем заменить онлайн-файлы локальными файлами, чтобы облегчить отладку и удаленно локализовать онлайн-проблемы.

выберитеStructure, найти заменяемый файл, контекстное меню -Map Local,Как показано ниже:
map1

В это время вы откроете всплывающее окно и заполните конкретную конфигурацию:
map2

Хорошо, все готово, идите и измените локальные файлы, и вы больше никогда не будете бояться онлайн-отладки. Следует отметить, что при захватеHTTPSзапрос, чтобы установить сертификат доверия,нижебудет подробно объяснено.

Соответственно, Fiddler на платформе Windows имеет аналогичные функции, поэтому я не буду здесь вдаваться в подробности.

4. Шпион-отладчик

spy-debugger: Инструмент отладки для мобильных устройств, удобная страница телефонов для удаленной отладки, инструмент захвата.

Сначала установим его:

> sudo npm install spy-debugger -g

Команда запуска:

> spy-debugger

В это время консоль выведет следующую информацию, указывающую на то, что служба запущена:

正在启动代理
本机在当前网络下的IP地址为：10.200.24.46
node-mitmproxy启动端口: 9888
浏览器打开 ---> http://127.0.0.1:50389

Последний шаг — установить мобильный прокси:10.200.24.46,Номер порта:9888. Чтобы добавить примечание:

AndroidНастройка шагов прокси: Настройки -WLAN- Длительное нажатие для выбора сети - Изменить сеть - Дополнительно - Настройки прокси - Вручную
iOSУстановите шаги прокси: Настройки - Беспроводная локальная сеть - Проверить сеть -HTTPруководство по прокси

Далее попробуем захватить пакеты:

Снова откройте страницу отладки:

HTTPSЧтобы захватить пакет, вам нужно установить корневой сертификат,нижебудет подробно объяснено.

5. Свисток

Вышеупомянутое рекомендует простой инструмент отладки, обновите его, чтобы увидеть более мощный инструмент отладки.whistle.

whistle: на основеNodeкроссплатформенныйWebИнструмент отладки прокси.

whistle(произносится [ˈwɪsəl], пиньинь [wēisǒu]) основан наNodeРеализованный кроссплатформенный прокси-инструмент захвата пакетов и отладки имеет следующие основные функции:

ПроверитьHTTP,HTTPSсодержание ответа на запрос
ПроверитьWebSocket,SocketПолученные данные кадра
установить запросhosts, вверх по течениюhttp/socksиграет роль
Изменить запросurl, метод, заголовок, содержимое
Измените код состояния ответа, заголовок, содержимое и поддержите локальную замену
ИсправлятьWebSocketилиSocketПолученные данные кадра
Встроенная отладка мобильных страницweinreа такжеlog
так какHTTPпрокси или обратный прокси
для поддержкиNodeПисьменные плагины для расширения функциональности

После общего понимания попробуем установить:

sudo npm install -g whistle

Зеркало Taobao: npm install whistle -g --registry=registry.npm.taobao.org

whistleПосле завершения установки выполните командуwhistle helpилиw2 help,Проверитьwhistleсправочная информация:

run       Start a front service
start     Start a background service
stop      Stop current background service
restart   Restart current background service
help      Display help information

Здесь перечислены только некоторые команды, подробнее см. в справке w2.

Увидев вышеописанную операцию, почему бы не попробовать аббревиатуруw2 startдля запуска службы:

w2 start

См. следующий вывод, указывающий, что служба запущена нормально:
whistle

В это время откройте ссылку в браузере и настройте прокси на мобильном телефоне (так же, какCharles), то вы можете успешно отлаживать. Примечательно,whistleФункция далека от этого, больше расширений, пожалуйста, переместитеОфициальная документация сайта, предварительно просмотрите изображение стикера:
whistle

Не забудьте включить блокировкуHTTPS: чек об оплатеCapture HTTPS CONNECTs

6. Установите сертификат HTTPS

дляCharles, установите сертификат следующим образом:

help-SSL - Proxying - install Charles root

Появится окно с запросом на установку сертификата:

Следуйте инструкциям, чтобы открыть браузер вашего телефона:chls.pro/ssl, Установите сертификат доверия.

дляspy-debugger,HTTPSДля захвата пакета необходимо установить корневой сертификат, выбратьRootCA, отсканируйте QR-код и следуйте инструкциям, чтобы доверять сертификату. При установке сертификата следует помнить о нескольких вещах:

1. Мобильный телефон должен сначала установить прокси-сервер, а затем получить к нему доступ через мобильный браузер (не WeChat).http://s.xxx(адресный QR-код) сертификат установки;
2. При первом вводе в эксплуатацию мобильного телефона необходимо установить сертификат, а мобильный телефон, на который уже установлен сертификат, не нужно устанавливать повторно;
3. Сотовые телефоны иPCоставаться в той же сети (например, при подключении кWIFIВниз);

Помните: мобильное устройство и ПК должны быть подключены к одному WIFI.

Семь, реальная отладка машины

Выше было сказано много, но в самом процессе разработки мы не будем ждать запуска для проверки совместимости, поэтому вам может понадобиться заранее "отладить реальную машину". Вот два способа:

Chrome Remote Devices: Зависит от Chrome для удаленной отладки, подходит для телефонов Android.
Сначала включитеAndroidВ «Опциях разработчика» вашего телефона отметьте «Отладка по USB».
Потом,ChromeВойти:chrome://inspectдля входа на страницу отладки.

Очень подробная статья, вы можете обратиться к:Chrome Remote Debugging.

localhostПеременаip, отсканируйте QR-код, чтобы отобразить мобильный телефон, это относительно просто.

Вы можете установить браузерChromeПлагин, используемый для преобразования ссылки на текущую страницу в QR-код, чтобы вы могли предварительно просмотреть его на реальной машине во время разработки, что очень удобно.

Восемь, инструменты отладки

Вот рекомендуемый инструмент отладки:vConsole, легкая, расширяемая панель отладки разработчика для мобильных веб-страниц. Установка проста:

npm install vconsole

если не используетсяAMD/CMDспецификация, доступная непосредственно наHTMLвведен вvConsoleмодуль. Для облегчения последующего расширения рекомендуется<head>Представлен в:

<head>
  <script src="path/to/vconsole.min.js"></script>
  <script>
    var vConsole = new VConsole();
  </script>
</head>

если используетсяAMD/CMDспецификация, доступная по адресуmoduleвнутреннее использованиеrequire()Импортируйте модуль:

var VConsole = require('path/to/vconsole.min.js');
var vConsole = new VConsole();

осторожность,VConsoleТолькоvConsole, а не созданный объект.

Так вручнуюnewПеред созданием экземпляраvConsoleне будет вставлен на веб-страницу. Приблизительная функция выглядит следующим образом:

Выглядит идеально, но есть небольшой минус: сетевые запросы, нужно обновить страницу, но много встроенныхH5У страницы нет возможности обновить страницу, поэтому клиенту необходимо сотрудничать с функцией обновления, чтобы облегчить отладку.

9. Анализ сценариев

Поскольку существует так много вариантов мобильной отладки, что мне выбрать на практике?

Сказав так много схем, вот краткое изложение применимых сценариев каждой схемы и выбор лучшей схемы отладки в соответствии с различными сценариями, чтобы вывод мог быть быстрее.CarryВсе в:

1.Safari:iPhoneИнструмент отладки, лучший выбор для проверки ошибок и изменения стилей;
2.iOSСимулятор: Реальная машина не требуется, подходит для отладкиWebviewа такжеH5Функциональные страницы с частыми взаимодействиями;
3.Charles:Mac OSПредпочтительная система инструментов захвата, подходящая для просмотра, сети управления запросами, где анализ данных;
4.Fiddler:ПодходитьWindowsплатформа, сCharlesАналогичным образом просматривайте и контролируйте сетевые запросы и анализируйте условия данных;
5.Spy-Debugger: мощный инструмент для мобильной отладки, удобная удаленная отладка страниц мобильного телефона и инструменты захвата пакетов;
6.Whistle: на основеNodeкроссплатформенныйWebИнструмент агентства отладки;
7.Chrome Remote Devices:полагатьсяChromeДля удаленной отладки подходит для удаленной отладки статических страниц на телефонах Android;
8.localhostПеременаip: Отладка реальной машины, подходящая для удаленной отладки статических страниц;
9.vConsole: Встроенный проект, печать мобильного журнала, просмотр сетевого запроса и просмотрCookieа такжеStorage;

Десять, обработка белого экрана

Белый экран на мобильном терминале - самая неприятная проблема Вот несколько идей для анализа проблемы для справки.

1. Анализ схемы ☆
Как правило, если возникает проблема после подключения к Интернету, самое простое, о чем мы можем подумать, — это проблема, вызванная новым кодом. Следовательно, эффективным решением является «метод управляющих переменных».

2. Метод аннотации кода ☆
Необъяснимый белый экран подходит для ситуации, когда на странице нет аномального лога, и запрос при этом не отправляется, а проблема сосредоточена на одной странице. Этот тип проблемы более интуитивен, и он должен заключаться в том, что определенная страница имеет ненормальный или недопустимый код.return, что приводит к прекращению рендеринга страницы, но не является исключением. В настоящее время лучшим выбором будет «метод комментирования кода». Вы можете комментировать код построчно, пока проблема не будет обнаружена.

3. Исключения библиотеки классов, проблемы совместимости ☆
Эта сцена будет часто сталкиваться, нам нужно использовать страницу, которую вы можете отлаживать ненормальным способом, напримерSafari,Spy-Debugger,Whistle,vConsoleПросмотрите журнал исключений, чтобы быстро найти расположение библиотеки классов и найти замену или совместимые решения.

4. попробуй поймай ☆☆
Если ваш проект немониторинг исключений, затем в подозрительном фрагменте кода перейдите кTry CatchБар.

5.Отладочный пакет ☆☆☆
установить в свой проектvConsole, и сотрудничать с клиентомdebugплагин,360Это наиболее эффективный способ мониторинга аномалий без тупиков.

6. Совместимость с синтаксисом ES6 ☆
Обычно мы проходимBabelкомпилироватьES6, но если дополнительная сторонняя библиотека классов имеет несовместимый синтаксис, младшая версия мобильного устройства будет ненормальной. Итак, первое использованиенадОпишите метод отладки, определите исключение, а затем увеличьтеpolyfillДавайте будем совместимы.