Як налагодити веб-сторінки в 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 вперед tcp: 9222 localabstract: chrome_devtools_remote і відкрийте браузер Chrome у Windows після успішного виконання.

Крок 6: Відкрийте сторінку, яку потрібно налагодити, у браузері Android Chrome і відкрийте URL-адресу локальний хост: 9222 у веб-переглядачі Chrome вашого комп’ютера.

Ось і все, ви побачите всі сторінки, відкриті у вашому браузері Android, як ескізи на вашому комп’ютері. Щоб відкрити сторінку налагодження, просто клацніть ескіз відповідного веб-сайту. Ви зможете в режимі реального часу відстежувати зміни налагодження, які ви вносите на комп’ютер безпосередньо на Android.

Висновок

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

Востаннє оновлено 03 лютого 2022 року

Наведена вище стаття може містити партнерські посилання, які допомагають підтримувати Guiding Tech. Однак це не впливає на нашу редакційну чесність. Зміст залишається неупередженим та автентичним.