Отладка мобильной веб-страницы

внешний интерфейс

banner

Дома я взял книгу «Разработано для вас рядом с вами» и читал ее полдня.Когда я увидел отладку на мобильном терминале, я немного почувствовал, поэтому я извлек содержимое.

В эту эпоху 5g мобильный Интернет продолжает свирепствовать, и работа по разработке интерфейса более тесно связана с мобильным терминалом, но отладка мобильного терминала действительно смущает. Ниже представлены способы устранения затруднения, а также дополнительные приветственные сообщения 👏

Отладка с помощью инструмента разработки Chrome

Мне, как фронтенд-разработчику, стыдно признаться, что я занимаюсь этим делом, не загрузив браузер Google. В процессе мобильной разработки мы можем использовать десктопный браузер (рекомендуется Google) для отладки. Хотя существует много различий между веб-страницей для мобильных устройств и веб-страницей для настольного компьютера, это все же веб-страница HTML, просматриваемая в браузере, поэтому наиболее часто используемым из них является отладчик Chrome на рабочем столе.

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

Имя свойства Функция
User Agent Установить пользовательский агент (UA) текущего эмулируемого устройства
Device metrices Установите размер страницы, значением по умолчанию является размер настройки моделирования
Emulate touch events Моделирование событий сенсорного экрана
Fit in window Будет ли размер страницы адаптирован к размеру окна

преимущество: Без дополнительных затрат, удобно и быстро.

недостаток: Он используется только для моделирования и не может полностью отображать реальные условия мобильных устройств.

Отладка с помощью IOS Safari + Mac OS Safari

Этот метод более удобен для партнеров, которые используют MAC для работы~

Apple позволяет разработчикам отлаживать веб-страницы на устройствах iOS в Safari на Mac OS через кабельное соединение. Но прежде чем использовать этот метод, вам нужно просто установить следующее:

  • На устройстве iOS откройте Safariвеб-инспектор,выберитеНастройки -> Safari -> Дополнительно -> Веб-инспекторЗаказ. (Если вы используете JavaScript, включите его на том же уровне, что и веб-инспектор)
  • Включите Safari на вашем компьютереразвиватьменю, выберитеНастройки -> Дополнительно -> Показать меню «Разработка» в строке менюЗаказ.

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

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

недостаток: Должна быть комбинация iOS + Mac OS, можно отлаживать страницы только для устройств iOS, но не для устройств Android.

Отладка с помощью Android Chrome + Desktop Chrome

Хм~ Apple настолько сильна, я недоволен Android, и я должен придумать свой собственный.

Google Chrome DevTools напрямую отлаживает веб-страницы на вашем телефоне через USB-кабель.

Просто подготовьте следующие шаги:

  • Включите режим отладки по USB в Android «Разработчик».
  • Подключите USB-кабель.
  • Выберите параметр «Инструменты» в меню Chrome и продолжайте выбирать параметр «Проверить устройства», чтобы просмотреть список всех подключенных устройств.

преимущество: Простой, кроссплатформенный

недостаток: поддерживает только Android 4+

Удаленная отладка с Weinre

WeinreАдрес репозитория github:GitHub.com/Слуга слишком ха-ха/Башня…,В егоREADME.mdВнутри подробное введение.

Weinreполучено изWeb Inspector Remote, представляет собой инструмент удаленной отладки страниц, который включает в себя иFirebug、WebKit InspectorТочно так же это может помочь нам удаленно отлаживать компьютер, работающий в браузере мобильного устройства, на стороне ПК.WebСтраницы или приложения с возможностью отладки элементов DOM, стилей CSS, JavaScript и многого другого на лету.

WeinreДля того, чтобы иметь возможность синхронизировать клиент отладки на десктопе с отладкой на мобильном устройстве, необходимо построить сервер отладки (Debug Server), установить между ними синхронное соединение. Подробную информацию о построении см. в предисловии README.md к репозиторию Weinre. Смущает, слишком много шагов, не хочется больше кодить😳

преимущество: поддерживает устройства iOS и Android и может напрямую отлаживать страницу на телефоне без установки клиента.

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

Вы взволнованы, когда видите преимущества, вы можете отлаживать устройства iOS и Android на реальной машине ✌️

Отладка с помощью vConsole

Произведено ТенсентvConsoleИнструмент отладки очень эффективен при отладке мобильного терминала, а способ его использования также прост.

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

Приведенный выше метод использования вводит только один из них. Конечно, представленная vConsole также зависит от среды.онлайн-средаВам еще решать, когда пора выходить в онлайн, не забывайте удалять vConsole, когда он выходит в онлайн, стыдно будет ругаться 😅.

преимущество: Он прост в использовании и позволяет легко просматривать информацию о панели, которую необходимо отладить.

недостаток: отладка пользовательского интерфейса не поддерживается

позже

Что ж, инструменты отладки имеют свои достоинства, и есть инструменты отладки, но они не введены.Charlesинструмент захвата пакетов,postmanСредства отладки интерфейса и т. д.

qiaoba

Ссылаться на

Категории