Как отлаживать веб-страницы в 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 в режиме реального времени.

Заключение

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