Как отлаживать веб-страницы в Chrome для Android на компьютере

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

внимание на мобильные страницы

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

Если бы это была страница на компьютере, ее можно было бы легко отладить, используя параметр из контекстного меню Chrome, вызываемого правой кнопкой мыши, но это не вариант со страницами на мобильных устройствах. Итак, сегодня я покажу вам, как можно отлаживать мобильные веб-страницы на вашем компьютере с помощью Chrome для Android и Android SDK.

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

Шаг 1: Загрузить и установить SDK для Android на вашем компьютере и запустите его. Установщик попросит вас загрузить Java, если она у вас не установлена.

При первом запуске Android SDK на своем компьютере вам будет предложено загрузить несколько API и инструментов. Если единственной целью установки Android SDK является отладка страниц, снимите все флажки, кроме

Платформенные инструменты Android SDK и нажмите на Установить пакет кнопка.

Шаг 2: После установки инструментов платформы Android откройте окно «Выполнить» (Windows+R) и беги %userprofile%\AppData\Local\Android\android-sdk\платформенные инструменты чтобы открыть каталог инструментов платформы Android.

Шаг 3: Теперь, удерживая Ctrl + Shift, щелкните правой кнопкой мыши папку, чтобы открыть там командную строку. Вы также можете открыть командную строку с помощью окна «Выполнить» и перейти к папке вручную.

Шаг 4: Сделав это, откройте Chrome на своем телефоне Android, откройте Настройки—>Инструменты разработчика и установите флажок «Включить веб-отладку по USB».

Шаг 5: Теперь в командной строке выполните команду adb переадресация TCP: 9222 localabstract: chrome_devtools_remote и откройте браузер Chrome в Windows при успешном выполнении.

Шаг 6: Откройте страницу, которую вы хотите отлаживать, в браузере Android Chrome и откройте URL-адрес локальный: 9222 в браузере Chrome на вашем компьютере.

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

Вывод

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

Последнее обновление: 03 февраля 2022 г.

Вышеупомянутая статья может содержать партнерские ссылки, которые помогают поддерживать Guiding Tech. Однако это не влияет на нашу редакционную честность. Содержание остается беспристрастным и аутентичным.