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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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