Як налагодити веб-сторінки в Chrome для Android на комп’ютері
Різне / / December 02, 2021
Як адміністратор блогу, я налагоджую свій особистий веб-сайт за допомогою 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, у режимі реального часу.
Висновок
Я впевнений, що цей трюк допоможе багатьом веб-розробникам оптимізувати свої веб-сторінки для смартфонів. Я використав цей трюк, щоб налаштувати свої веб-сторінки, і це вийшло як чарівність. Однак, якщо ви знаєте кращий спосіб налагодження веб-сторінок смартфона на комп’ютері, поділіться ним з нами.