tl; dr: Удаленная отладка Chrome

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

Что вы делаете, когда ваш сайт безупречно работает на компьютере, а на мобильном устройстве что-то не работает? Что делать, если вы хотите видеть сетевые запросы, которые делает ваше мобильное устройство?

Ответ: Chrome Удаленная отладка

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

Удаленная отладка Chrome позволяет подключать инструменты разработчика Chrome на вашем компьютере к устройству Android, на котором установлен мобильный Chrome. Благодаря этому у вас будет полный доступ к инструментам разработчика Chrome для вашего мобильного браузера!

Что вам понадобится:

  • Браузер Chrome на вашем компьютере
  • Мобильный Chrome на вашем устройстве Android (Android 4.0 и выше)
  • USB-кабель (и, возможно, драйверы для вашего мобильного устройства, уже установленные на вашем компьютере)

Шаг 1. Найдите свое мобильное устройство с помощью Chrome

  • Подключите мобильное устройство к компьютеру. На мобильном устройстве перейдите в Настройки> Параметры разработчика и включите Отладка по USB.

  • Не видите параметры разработчика? Перейдите в Настройки ›О телефоне и несколько раз нажмите Номер сборки. Вы должны получить подсказку с количеством кликов, оставшихся для вас, чтобы «стать разработчиком» 🤖.

  • На вашем компьютере запустите Chrome, а затем инструменты разработчика (Cmd / Ctrl + Opt / Alt + i). В строке с различными вкладками щелкните три точки справа, чтобы загрузить дополнительные параметры. Там, в разделе Дополнительные инструменты, вы должны найти параметр Удаленные устройства.

  • Подключите мобильное устройство к компьютеру; это немедленно вызовет запрос на авторизацию. Пока вы не разрешите это, устройство будет находиться в состоянии Pending Authorization в инструментах разработчика. Нажмите ОК.

  • Теперь устройство авторизовано и готово к работе! В инструментах разработчика Chrome теперь должно быть указано имя и тип вашего устройства.

Шаг 2. Проверка

После завершения настройки вы можете просматривать вкладки прямо в Chrome вашего компьютера!

  • Запустите Chrome на своем мобильном устройстве.
  • Щелкните имя своего устройства в инструментах разработчика Chrome на вашем компьютере . В нем должны быть перечислены различные вкладки, открытые на вашем мобильном устройстве. Нажмите кнопку Проверить для вкладки, которую вы хотите отладить.
  • Chrome должен открыть новое окно, с версией вкладки мобильного браузера в реальном времени слева и всеми вашими обычными инструментами разработчика справа.

Вот и все! 🚀
Теперь у вас есть доступ ко всем возможностям отладки инструментов разработчика ... теперь и для вашего мобильного устройства!

Где-то застряли, нужна дополнительная помощь или просто хотите поздороваться? Набери меня в твиттере. Вы также можете найти меня на Github .🙃