Прочтите и усвойте навыки мобильной разработки и отладки H5 в одной статье

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

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

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

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

• настройки iphone: Настройки-Safari-Дополнительно-Открыть веб-инспектор

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

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

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

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

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

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

Чарльзу сначала нужно настроить прокси мобильного телефона, Wifi — настроить прокси (IP-адрес) — вручную, как показано ниже:

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

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

Выберите «Структура», найдите файл, который нужно заменить, щелкните правой кнопкой мыши меню — «Локальная карта», как показано ниже:

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

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

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

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 необходимо установить корневой сертификат, который будет подробно объяснен ниже.

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

whistle: кроссплатформенный прокси-инструмент для веб-отладки, основанный на Node.

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

1. Просмотр содержимого ответа на запрос HTTP, HTTPS

2. Просмотр данных кадра, отправленных и полученных WebSocket и Socket

3. Настройка хостов запросов, вышестоящего прокси http/socks

4. Изменить URL-адрес запроса, метод, заголовок, содержимое

5. Измените код состояния ответа, заголовок, содержимое и поддержите локальную замену

6. Изменить данные кадра, отправленные и полученные WebSocket или Socket

7. Встроенный Weinre и журнал для отладки мобильных страниц

8. в качестве HTTP-прокси или обратного прокси-сервера

9. Поддержка написания расширений плагинов с помощью Node.

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

sudo npm install -g whistle

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

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

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

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

В это время откройте ссылку в браузере и настройте прокси (такой же, как у Чарльза) на мобильном телефоне, и тогда вы сможете успешно отладить. Стоит отметить, что функция свистка далека от этого.Для получения дополнительных расширений перейдите на официальную документацию веб-сайта и разместите изображение, чтобы предварительно просмотреть его:

Не забудьте включить перехват HTTPS: установите флажок Capture HTTPS CONNECTs.

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

help-SSL - Proxying - install Charles root

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

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

对于 spy-debugger，HTTPS 抓包，需要安装根证书，选择 RootCA，扫描二维码按照提示信任证书。 При установке сертификата следует помнить о нескольких вещах:

1. Мобильный телефон должен сначала настроить прокси-сервер, а затем получить доступ к http://s.xxx (адресный QR-код) через мобильный браузер (не WeChat) для установки сертификата;

2. При первом вводе в эксплуатацию мобильного телефона необходимо установить сертификат, а мобильный телефон, на который уже установлен сертификат, не нужно устанавливать повторно;

3. Держите телефон и ПК в одной сети (например, одновременно подключайтесь к WIFI);

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

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

Удаленные устройства Chrome: Chrome использует удаленную отладку для телефонов Android.

Сначала откройте «Параметры разработчика» вашего телефона Android и установите флажок «Отладка по USB».

Затем введите: chrome://inspect в Chrome, чтобы перейти на страницу отладки.

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

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

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

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

npm install vconsole

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

:

<head>

<script src="path/to/vconsole.min.js"></script>

<script>

var vConsole =new VConsole();

</script>

</head>

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

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

var vConsole = new VConsole();

Обратите внимание, что VConsole — это всего лишь прототип для vConsole, а не созданный объект.

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

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

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

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

1.Safari: инструмент отладки iPhone, лучший выбор для проверки ошибок и изменения стилей;

2.Симулятор iOS: нет необходимости в реальной машине, подходит для отладки страниц функций Webview и H5 с частым взаимодействием;

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

4.Fiddler: подходит для платформы Windows, аналогично Charles, для просмотра и управления сетевыми запросами и анализа данных;

5.Spy-Debugger: мощный инструмент для мобильной отладки, удобная мобильная страница удаленной отладки и средство захвата пакетов;

6.Whistle: межплатформенный прокси-инструмент для отладки через Интернет. Реализация Node;

7.Удаленные устройства Chrome: полагайтесь на Chrome для удаленной отладки, подходящей для удаленной отладки статических страниц на телефонах Android;

8.localhost to ip: отладка реальной машины, подходящая для удаленной отладки статических страниц;

9.vConsole: встроенный в проект, печать мобильных журналов, просмотр сетевых запросов и просмотр файлов cookie и хранилища;

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

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

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

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

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

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

Как правило, мы будем компилировать ES6 через Babel, но если дополнительная сторонняя библиотека классов имеет несовместимый синтаксис, младшая версия мобильного устройства будет ненормальной. Итак, сначала используйте метод отладки, описанный выше, чтобы определить исключение, а затем добавьте полифилл для совместимости.

Выше содержание сегодняшнего обмена, спасибо всем!

Редактор: IT big coffee сказал, пожалуйста, указывайте авторские права и источник при перепечатке