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

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

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

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

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

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

Шаг 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 localhost: 9222 в браузере Chrome вашего компьютера.

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

Заключение

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