"Що таке консоль браузера, навіщо вона потрібна і як її відкрити?"
Мотивація
Деякі тести вимагають відкриття консолі. Веб-консоль є частиною інструментів розробника, які надає ваш браузер. Вона відображає інформацію про обробку помилок, яку розробники веб-сайту використовують, або інформацію, яку збирає ваш браузер, якщо проблема стосується, наприклад, JavaScript. Це допоможе замовнику, зокрема розробникам, визначити, яка проблема викликає помилку.
Як відкрити консоль буде пояснено крок за кроком для різних браузерів та операційних систем в наступній статті.
Зверніть увагу, що багато з кроків для налаштування вашої системи потрібно виконати лише один раз і кожне подальше використання буде вимагати менше кроків.
Отримання журналів консолі браузера в Windows і macOS
Microsoft Edge, Chrome, Firefox, Opera, Brave
Відкрийте веб-сайт для перевірки.
Натисніть на клавіатурі Ctrl + Shift + I (Windows) або alt + cmd + I (macOS).
Клацніть вкладку «Консоль» (якщо вкладка «Консоль» ще не виділена).
Safari
Передумова:
Відкрийте браузер Safari на комп’ютері macOS.
Відкрийте меню Параметри... (натисніть на клавіатурі cmd + або відкрийте Safari на панелі меню --> Параметри...).
Перейдіть до вкладки Додатково.
Поставте прапорець Показати меню Розробка на панелі меню». Після цього ви зможете побачити меню Розробити на панелі меню.
Після активації меню Розробка:
Відкрийте веб-сайт для перевірки.
Натисніть на клавіатурі alt + cmd + C (macOS).
Клацніть вкладку Консоль (якщо вкладка Консоль ще не виділена).
У всіх вищезазначених випадках ви маєте побачити консоль відкритою. Якщо з якоїсь причини консоль не запускається, є швидкий обхідний шлях, і все, що вам потрібно зробити, це клацнути правою кнопкою миші на веб-сайті та у відкритому меню клацнути Перевірити або Перевірити елемент і перейти на вкладку Консоль.
Якщо ви хочете змінити розташування накладання інструментів розробника, натисніть кнопку «три крапки» у верхньому правому куті накладання. Там ви можете вибрати сторону Dock.
Отримання журналів браузера на Android
Chrome
На мобільному пристрої неможливо показати консоль, але її можна відобразити на підключеному комп'ютері. Для цього на Android-пристрої потрібно активувати параметри розробника та USB-налагодження. Якщо це вже зроблено, ви можете перейти до Частини 2.
Частина 1: Підготовка вашого Android-смартфона до USB-налагодження
Відкрийте Налаштування смартфона.
Знайдіть номер збірки (зазвичай він знаходиться в розділі "Інформація про програмне забезпечення" в розділі "Про телефон").
Натисніть на номер збірки кілька разів, доки не побачите повідомлення Ви тепер розробник!
Тепер, коли ви активували параметри розробника, знайдіть їх у налаштуваннях і відкрийте.
Якщо параметри розробника ще не активовано, активуйте їх, натиснувши кнопку перемикача.
Знайдіть опцію налагодження USB і ввімкніть її, торкнувшись перемикача.
Частина 2: Підключіть Chrome на комп’ютері до пристрою Android
Відкрийте веб-сайт, який потрібно протестувати на своєму Android-смартфоні.
Відкрийте Google Chrome на своєму комп'ютері з операційною системою Windows або macOS.
У полі URL введіть chrome://inspect та перейдіть на цю сторінку.
Переконайтеся, що прапорець Відкрити пристрої USB активований.
Підключіть свій Android-смартфон до комп'ютера за допомогою USB-кабелю.
Якщо раніше ви не використовували USB-налагодження, на вашому Android-смартфоні повинен з'явитися запит Дозволити USB-налагодження? Натисніть OK. Також ви можете позначити Завжди дозволяти з цього комп'ютера і натиснути OK, щоб переконатися, що вас не буде постійно запитувати, коли ви намагаєтеся отримати журнали браузера.
Тепер ви повинні побачити свій пристрій в розділі "Віддалена ціль". Також ви побачите вкладки, відкриті в браузері на вашому смартфоні. Для початку тестування вам потрібно натиснути кнопку перевірити під вкладкою, яку ви хочете протестувати, і відкриється нове вікно з екраном вашого пристрою та інструментами розробника (переконайтеся, що вкладка Console у розробницьких інструментах активована).
Усунення несправностей: якщо пристрій не виявлено, спробуйте виконати наведені нижче дії.
Від'єднайте телефон від USB-кабелю та підключіть його знову.
Спробуйте змінити USB-порти на вашому комп'ютері.
Спробуйте інший USB-кабель.
Якщо вищезазначені виправлення не допомагають, ви можете знайти поради з усунення несправностей у цьому повідомленні розробника Google.
Отримання журналів консолі браузера з пристрою iOS на macOS
Safari
Для отримання журналу консолі браузера з Safari на iOS-пристрої вам знадобиться комп'ютер з macOS. Щоб отримати журнал браузера з Safari на вашому iOS-пристрої, вам потрібно активувати меню Розробника в Safari на вашому macOS та активувати Веб-інспектор в налаштуваннях Safari на вашому iOS-пристрої. Якщо це вже зроблено, ви можете перейти до Частини 2.
Частина 1: Підготовка браузера Safari на macOS і iOS-пристрої до налагодження
Відкрийте браузер Safari на своєму комп'ютері з macOS.
Відкрийте меню Налаштування (натисніть на вашій клавіатурі cmd + , або в меню Safari виберіть Налаштування...).
Перейдіть на вкладку Розширені.
Позначте прапорець Показувати меню Розробника в меню в панелі меню. Після цього ви повинні побачити меню Розробника в панелі меню.
На вашому пристрої iOS відкрийте Налаштування.
Знайдіть і відкрийте програму Safari.
Прокрутіть вниз і натисніть на опцію Додатково.
Активуйте Веб-інспектор, натиснувши на вимикач.
Частина 2: Отримання журналів консолі
Відкрийте програму Safari на вашому пристрої iOS та відкрийте веб-сайт, який потребує тестування.
Підключіть ваш пристрій iOS до macOS за допомогою USB-кабелю.
2а. Якщо відображається запит Довіряти цьому комп'ютеру?, натисніть Довірити та, за потреби, введіть код доступу до вашого пристрою.
Відкрийте програму Safari на вашій macOS.
Клацніть на меню Розробник в рядку меню.
Наведіть вказівку миші на назву вашого пристрою iOS та клацніть на назву веб-сайту, який потребує тестування.
Тепер ви повинні бачити Веб-інспектор, і ви можете почати тестування (переконайтеся, що вкладка "Консоль" в фокусі в Веб-інспекторі).