Как администратор блога, я отлаживаю свой личный веб-сайт с помощью Chrome, чтобы увидеть, как будут выглядеть изменения в теме и CSS, прежде чем постоянно внедрять их на сервере. Я был не так давно, когда я никогда не платил
внимание на мобильные страницы
так как лишь немногие посетители посетили мой сайт со смартфона. Но сегодня значительный процент посетителей составляют смартфоны и планшеты, а значит, и здесь необходимо позаботиться о внешнем виде и подаче.
Если бы это была страница на компьютере, ее можно было бы легко отладить, используя параметр из контекстного меню Chrome, вызываемого правой кнопкой мыши, но это не вариант со страницами на мобильных устройствах. Итак, сегодня я покажу вам, как вы можете отлаживать мобильные веб-страницы на своем компьютере, используя Chrome для Android и Android SDK.
Отладка веб-страницы
Шаг 1: Загрузите и установите Android SDK на свой компьютер и запустите его. Программа установки попросит вас загрузить Java, если она у вас не установлена.
При первом запуске Android SDK на своем компьютере вам будет предложено загрузить несколько API и инструментов. Если единственной целью установки Android SDK является отладка страниц, снимите все флажки, кроме Платформенные инструменты Android SDK и нажмите на Установить пакет кнопка.
Шаг 2: После установки инструментов платформы Android откройте окно «Выполнить» (Windows+R) и запустите %userprofile%AppDataLocalAndroidandroid-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 в режиме реального времени.
Вывод
Я уверен, что этот трюк поможет многим веб-разработчикам оптимизировать свои веб-страницы для смартфонов. Я использовал трюк для настройки своих веб-страниц, и это сработало как шарм. Однако, если вы знаете лучший способ отладки веб-страниц смартфона на компьютере, поделитесь им с нами.
