Як перевірити вебсайт у будь-якому браузері [Chrome, Safari, Firefox]

Уявіть Інтернет як величезний айсберг. Звичайний користувач бачить лише верхівку: інтерфейси веб-сайтів, які відображаються на наших екранах, але кожна веб-сторінка спирається на масивні основи коду.

Рядки та рядки HTML, CSS та JavaScript синтезуються для створення досвіду, який ми бездумно переглядаємо та торкаємося щодня.

Що, якби ви могли заглянути за завісу?

Можливість перевіряти код веб-сайту існує безпосередньо у вашому браузері. Сучасні популярні браузери, такі як Chrome, Firefox і Safari, містять вбудовані інструменти розробника з функцією Inspect Element , яка допомагає вам експериментувати з технологіями фронту будь-якої веб-сторінки.

Цей посібник навчить вас, як отримати доступ до функції “Огляд елемента” та користуватися нею в усіх трьох браузерах. Ми також обговоримо, що можна досягти за допомогою інструментів розробника цих браузерів та як “Огляд елемента” допомагає.

Зануримося прямо зараз!

Що таке інспектування елементу?

«Inspect Element» — це утиліта, яка зазвичай знаходиться в інструментах розробника вашого браузера, яка дозволяє переглядати та маніпулювати кодом — HTML, CSS та JavaScript — який створює будь-яку веб-сторінку.

Коли ви відкриваєте Інструмент перевірки, він показує вам різні сегменти коду, які створюють вебсайт.

Ви можете виділити розділи сторінки, щоб показати відповідний вихідний код. Альтернативно, клікнувши на рядок оригінального вихідного коду, ви виділите його відповідний візуальний елемент на відрендереній сторінці. Це поєднання коду frontend і дизайну дозволяє зрозуміти, як будуються вебсайти.

Зауваження для Нердів: «Перегляд елемента» дозволяє цифровим маркетологам бачити, як конкретні зміни впливатимуть на вигляд веб-сторінки, не вносячи жодних змін на живий сайт. Це може допомогти протестувати нові кнопки CTA, випадаючі меню, колірні схеми та інші дизайнерські елементи. Ви навіть можете побачити чи є ваш сайт адаптивним на різних пристроях.

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

Для кого це?

Хоча Inspect Element в першу чергу вважається інструментом веб-розробника, його практичне застосування виходить за межі програмування. Ось як можуть скористатися представники різних ролей:

• Розробники: Відлагодження проблем з компонуванням, тестування коду та покращення продуктивності сайту.
• Дизайнери: Візуалізація нових ідей стилю та перегляд дизайнів на різних пристроях.
• Маркетологи: Перевірка SEO даних, експорт іконок/зображень та локальне редагування текстів.
• Письменники: Анонімізація скріншотів та локальне редагування статей.
• Підтримка: Виявлення проблем для документації.
• Студенти: Вивчення реалізації веб-технологій.

По суті, будь-хто, хто причетний до веб-сайтів, чи то будівництво, дизайн, управління, написання про них або просто використання, може відкрити для себе нові перспективи через інспекцію.

Давайте розглянемо, чому саме вам слід почати інспектувати елементи в Інтернеті.

Чому варто перевіряти вебсайти?

Давайте вивчимо основні функції функції “Огляд елемента”, щоб зрозуміти, як побудовані вебсайти.

1. Виправлення та усунення проблем

Знаходження та усунення помилок є важливим застосуванням інструментів перевірки. Розробники можуть заглибитися в код, щоб виявити проблеми, коли веб-сайт здається несправним, щоб визначити, чи це проблема зі стилем, макетом, адаптивністю тощо.

Елементи, які викликають помилки на сторінці, візуально відображаються в інспекторі, що дозволяє розробникам швидко звузити проблемний код.

Оскільки значення можуть бути налаштовані в реальному часі для бездеструктивного тестування виправлень, стає легко знайти рішення.

Інструменти інспекції також надають доступ до Панелі консолі. Це дозволяє проводити більш складні налагодження та запускати користувацький JavaScript, щоб побачити, як реагує сторінка.

Отже, коли мова йде про усунення помилок на frontend та backend веб-сайту, Inspect Element надає можливість розкрити, звідки виникають проблеми.

2. Зрозумійте веб-розробку

Для нових розробників, які ще вивчають HTML, CSS або JavaScript, інструменти інспектора значно допомагають у навчальному процесі. Огляд елемента дозволяє вам побачити професійне втілення того, чого ви намагаєтеся досягти на своєму вебсайті. Зрештою, це допомагає покращити вашу реалізацію.

Ви також можете перевірити, як зміна елементів та вмісту в HTML впливає на сторінку.

Наприклад, регулювання значень поля для спостереження за змінами відступів або використання CSS селекторів нащадків для цілеспрямованих вкладених елементів. Реальний контекст також краще запам’ятовується, ніж читання прикладів з підручників.

Крім того, спостереження за тим, як експертні веб-розробники структурують та оптимізують сайти, надає план для кодування ваших сторінок. Можливість експериментувати разом з можливістю перегляду вихідного коду популярних сайтів сприяє швидкому зростанню.

3. Тестування дизайнів та вмісту

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

Наприклад, порівняйте шрифти, щоб визначити ідеальну читабельність, або змініть кольори кнопок, щоб побачити, як вони виглядають. За допомогою інструментів перевірки елемента ви можете зробити це прямо у вашому браузері, замість того, щоб вносити зміни на зовнішньому пристрої, як Photoshop або Figma.

Так само, для письменників та маркетологів, локальне редагування тексту допомагає попередньо переглянути зміст та коригування макету. Від тестування ширини абзаців до перевірки метаданих, легке редагування без необхідності доступу до бекендів системи управління контентом (CMS) є цінним.

4. Переглянути SEO дані

Інструменти розробника браузера надають важливі відомості, коли розглядають сторінку вебсайту з точки зору SEO та соціальних метаданих. Аналіз мета-тегів — описів, заголовків, тегів Open Graph — найбільш критично впливає на те, як посилання відображаються в SERP та при їхньому поширенні.

Наприклад, більшість соціальних мереж читають og:title og:description. Вся ця інформація знаходиться в елементах <head> веб-сайту.

5. Перевірка продуктивності

Інструменти Inspect Element також пропонують аудити продуктивності веб-сайтів для поліпшення загальної швидкості сайту та поведінки завантаження. У Chrome вкладка Network покаже вам хронологію завантаження, яка включає час завантаження кожного елемента.

Під час перевірки сторінок ви можете переглянути загальний час завантаження та запити ресурсів та розбити ці дані на окремі елементи. З’ясуйте, які зображення, шрифти або файли JavaScript погіршують продуктивність. Потім безпосередньо вирішуйте проблеми: стискайте ресурси, впроваджуйте кеші та відкладайте несуттєві скрипти.

Перевірка мережі також дозволяє обмежувати швидкість, щоб імітувати повільні з’єднання на мобільних пристроях або при слабкому wifi. Виявляйте недоліки використання, вимірюючи час завантаження через симульовані з’єднання. Чи залишаються сторінки функціональними на 3G? Чи деякі файли блокують рендеринг? Ця інформація може допомогти вам покращити загальну швидкість сторінки вебсайту.

6. І більше

Це лише верхівка того, що можливо через Інспектування Елементу. Ми переважно зосередились на випадках використання для розробників, але дизайнери, письменники та маркетологи можуть досягти багатьох цілей, обговорених раніше, без навичок кодування. Ви також знайдете, що аналіз доступності та вразливостей безпеки часто використовує можливості інспекції.

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

Як працюють інструменти розробника браузера

Суть інтерфейсів “Огляд елементів” у всіх основних браузерах обертається навколо Об’єктної моделі документа (DOM).

Коли веб-сторінка завантажується, браузер обробляє розмітку (HTML), презентацію (CSS) та логіку (JavaScript) для створення екземпляра DOM.

DOM по суті представляє структуру сторінки у вигляді дерева елементів вузлів батька та дитини. Розробники можуть миттєво взаємодіяти з цим живим представленням, використовуючи інструменти інспектора для читання, редагування та візуалізації відповідних змін.

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

За лаштунками, браузери застосовують зміни, зроблені за допомогою інструментів інспекції, тимчасово перевизначаючи стандартні CSS та HTML. Ці модифікації існують лише для вашого браузера і повертаються до нормального стану, якщо ви оновите сторінку (або просто закрийте вкладку і поверніться пізніше).

Перегляд елементів у Google Chrome

Як один з найпопулярніших браузерів у світі сьогодні, Google Chrome, який займає понад 70% ринку браузерів, оснащений майже для будь-якої перевірки прямо з коробки.

Натискання Ctrl+Shift+I (Windows) або Command+Option+I (Mac) миттєво запускає інтерфейс DevTools у Chrome для аналізу будь-якої доступної веб-сторінки чи веб-додатку. Ви також можете інспектувати конкретні елементи на сторінці.

Давайте розберемося, як отримати доступ до Інспектора Chrome, ефективно навігувати по елементах сторінки та тестувати спільні маніпуляції – від редагування тексту до симуляції мобільних пристроїв, сенсорних пристроїв та більше. Ви можете використовувати значок телефону в лівому верхньому кутку вікна консолі.

1. Відкрити інструменти розробника

Розпочніть з переходу в Chrome (або будь-який інший браузер на базі Chromium) на будь-яку веб-сторінку, яку ви хочете перевірити. Клікніть правою кнопкою миші в будь-якому місці на сторінці та виберіть «Перевірити» з контекстного меню.

Альтернативно, використовуйте вищевказане поєднання клавіш.

DevTools з’являються внизу вікна вашого браузера на великих екранах за замовчуванням. Ви також можете відкрити його у відокремленому вікні або змінити місце пристикування — клікніть на три вертикальні крапки у верхньому правому куті вікна «Огляд елемента».

Де б воно не відображалося, перше, що ви побачите, це основна панель елементів, яка показує весь HTML-код.

Різні інші вкладки аналізу можна відкрити вгорі: Консоль, Джерела, Мережа, тощо.

Залежно від того, де відкривається вікно інструменту перегляду елементів, одна частина покаже вихідний код сторінки, що починається з <html>. Коли ви клацаєте по різним речам у коді, права (або нижня) сторона показує стилі, включаючи шрифти, кольори, відступи, поля та інше.

Це поєднання коду та вигляду сприяє розумінню та експериментуванню зі змінами. Але перед тим як щось маніпулювати, давайте подивимося, як ефективно вибирати елементи для інспекції.

2. Знайти елементи для перевірки

Коли сторінки стають довгими та складними, візуальний пошук потрібного елемента та відшукання його коду в інструментах розробника може стати втомливим. Замість цього використовуйте інструмент вибору вузлів.

У Chrome DevTools клацніть на значку у верхньому лівому куті (вікна інспектора), який нагадує селектор, перехрещений з курсором (або натисніть Ctrl/Cmd+Shift+C).

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

Тепер, клацнувши на будь-який елемент на сторінці, ви безпосередньо побачите код, який забезпечує відображення цього елемента на сторінці. Ви також можете бачити стилі праворуч або нижче за HTML кодом. Також можна використовувати пошукове поле або вкладку пошуку для пошуку елементів. Альтернативно, Ctrl+F (Windows) та Cmd+F (Mac) також працюють!

Подивимось, що ми можемо редагувати з вибраними елементами.

3. Взаємодія з DOM

Функція перегляду елемента також надає спосіб взаємодії з Document Object Model (DOM) — структурованим представленням елементів сторінки, видимих у редакторі.

Розробники можуть використовувати DOM для зміни вмісту, стилю та інтерактивності безпосередньо в Chrome DevTools.

Деякі поширені способи маніпуляції з елементами включають:

• Редагування тексту шляхом безпосереднього редагування полів вмісту.
• Перемикання стилів CSS, таких як кольори та шрифти, для візуального тестування змін стилів у панелі CSS.
• Зміна атрибутів компонентів, таких як посилання та кнопки, для зміни функціональності.
• Перестановка структурних елементів для прототипування альтернативних макетів.

DOM оновлюється наживо зі змінами, зробленими у режимі перегляду інспектора. Таким чином, будь-які налаштування відразу відображаються у браузері, а потім скидаються після оновлення, що робить експерименти малоризикованими під час розробки.

4. Тестування адаптивності

Крім редагування окремих елементів, інструменти інспектора також надають середовища для тестування адаптивності на різноманітних пристроях та вікнах перегляду.

Chrome DevTools включає режим імітації пристроїв. Ви можете вибрати готові налаштування для емуляції стандартних розмірів та можливостей сенсорного введення телефонів або планшетів. Або використовуйте більш продвинуті опції для ручного налаштування точних розмірів, співвідношення пікселів, обмеження продуктивності процесора та інших параметрів.

Це дозволяє швидко перевірити такі аспекти, як:

• Макети на різних контрольних точках.
• Відстань для цільового натискання для мобільних користувачів.
• Продуктивність сайту на пристроях з низькою потужністю.
• Доступність на різному обладнанні.

Можливість попереднього перегляду сторінок на симульованих мобільних екранах під час розробки допомагає вдосконалити відповідність і поступову доставку поліпшень. Тестування на широкому спектрі емульованих пристроїв забезпечує широку підтримку браузерів та пристроїв.

Перегляд елементів у Firefox

Firefox надає інструменти для інспекції веб-сторінок, які конкурують з функціоналом Chrome DevTools. Доступ до інспектора Firefox за допомогою тих самих скорочень для інспектування елементів, що і в Chrome: Ctrl+Shift+I (Windows) та Cmd+Opt+I (Mac).

Ви також можете використовувати комбінацію клавіш Ctrl+Shift+C (Windows) та Cmd+Opt+C (Mac) для відкриття панелі інспектування елементів, що дозволяє клікнути на елемент на сторінці для прямого переходу до коду.

1. Перегляд атрибутів DOM

Під час аналізу складних інтерфейсів, стани фокусування та динамічні ефекти залежать від атрибутів HTML замість CSS. Клікніть правою кнопкою миші на будь-який елемент у переглядах Інспектора та виберіть Показати властивості DOM.

Це відображає всі властивості, пов’язані з вузлом. Ви можете безпосередньо редагувати значення тут, щоб змінити поведінку компонента через Інспектор, замість того, щоб вимагати змін у коді.

Наприклад, регулювання мінімальних/максимальних значень та кроків повзунка візуально встановлює межі, змінюючи назви груп перемикачів та радіокнопок, перезапис властивостей набору даних підключає різні віддалені дані, і список можна продовжувати далі.

2. Робота з діаграмами боксової моделі візуально

Firefox спрощує перевірку, показуючи відступи, рамки та поля, як тільки ви переміщуєте курсор по сайту.

Коли ви натискаєте на будь-який вузол, панель інспектора переходить між трьома станами: геометрія вимкнена, тільки накладення моделі коробки, та одночасно накладення та контури розмітки.

Це може бути корисним, коли ви хочете перевірити, чи правильно застосовані відступи, поле та поля до елементів.

Це також спрощує виправлення будь-яких проблем, оскільки ви можете натискати на конкретні елементи та бачити, яке саме CSS стилізування на них впливає. Геометричний аналіз допомагає початківцям швидше зрозуміти просторові відносини.

3. Редагуйте кольори за допомогою піпетки

В Інспекторі натисніть на будь-яку кольорову зразку поруч з будь-якою властивістю, яка приймає кольори, такими як фон, рамка тощо. Там ви побачите повзунок кольору, налаштування альфа і піпетку для вибору кольорів з вашої відкритої сторінки.

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

Перевірка елементів у Safari

Safari пропонує інспектор Webkit для інспектування сторінок переважно на системах macOS. Однак, вам потрібно активувати меню розробника перед тим, як отримати до нього доступ.

Відкрийте Safari та натисніть Safari в Меню > Налаштування > Розширені. Встановіть прапорець для “Показати функції для веб-розробників.”

Тепер ви можете відвідати будь-який веб-сайт і клацнути правою кнопкою миші, щоб побачити доступний варіант “Перевірити елемент”.

Ви також можете використовувати комбінацію клавіш, Cmd+Opt+C, для доступу до функції перегляду елемента.

Терміни та швидкість мережі

Схоже на більшість інших браузерів, Safari пропонує потужні часові шкали в Safari Inspector. Список ресурсів допомагає вам відразу визначити, які файли викликають затримки рендерингу та якою може бути причина. Ви також можете побачити, які скрипти блокують завантаження сторінки.

3D-огляд рівнів вебсайту

Якщо ви хочете проаналізувати шари, з яких складається вебсайт, просто перейдіть на вкладку Шари, і вам буде представлена повна 3D модель усіх шарів

Способи використання інструменту перевірки елементів

Тепер, коли ми налаштували інструменти інспектора, давайте обговоримо деякі практичні способи їх використання. Ось лише кілька прикладів звичайного використання:

Змінити текст або зображення

Одна корисна можливість полягає у зміні текстового вмісту або зображень безпосередньо в редакторі. Ви можете налаштувати заголовки, змінити логотипи, анонімізувати деталі та багато іншого.

Щоб редагувати будь-який текст чи зображення, спочатку перевірте елемент, який ви хочете змінити, а потім подвійно клацніть у межах його меж у редакторі коду, щоб зробити контент доступним для редагування.

Введіть будь-що, що ви хочете, та натисніть Enter, щоб застосувати зміни (тимчасово).

Змінити кольори, шрифти та стилі

При аналізі різних елементів, таких як посилання, кнопки, меню або галереї — ви помітите атрибути, які визначають пов’язану поведінку, таку як URL-адреси призначення href, джерела даних поля огляду каруселі та інше.

Так само, як і редагування текстового вмісту та властивостей CSS і таблиць стилів, ці характеристики на рівні HTML можна маніпулювати безпосередньо у Інспекторі.

DOM оновлює ці зміни на місці. Так ви можете одразу побачити, як зміни впливають на функціональність компонентів без програмування:

• Змініть href посилань та кнопок, щоб тимчасово перенаправляти кліки.
• Налаштуйте роль вкладок та aria теги для тестування покращень доступності.
• Замініть атрибути src мініатюрних зображень під час створення галерей.

Змінити стан елемента

Понад базове стилізування, інструменти Інспектора також дозволяють модифікувати стани інтерактивних елементів, такі як наведення, фокус і активний. Клікніть правою кнопкою миші на елементи та використовуйте опції Примусовий стан (Google Chrome), щоб візуалізувати, як компоненти виглядають під час використання.

Наприклад, перемкніть стан кнопки, щоб переконатися, що ефект натискання видимий користувачам. Перевірте межі неактивних полів, щоб побачити, чи вони забезпечують належний контраст. Перевірте, чи правильно підсвічуються посилання в меню при фокусуванні під час тестування навігації за допомогою клавіатури.

Приховати або видалити елементи

Нарешті, можливе також групове приховування або видалення елементів сторінки. Це може допомогти визначити непотрібне збільшення коду, що впливає на розмір сторінки, блокування елементів від коректного відображення, або несподіване приховування бажаного вмісту від користувачів.

Щоб спробувати це, просто виділіть будь-який елемент у коді та натисніть delete, щоб миттєво видалити його з відображення.

На знімку екрана ми видалили заголовок домашньої сторінки DreamHost з нашого перегляду. Ви можете зробити набагато більше з Inspect Element, коли вивчаєте його.

Часті питання

Чи можна використовувати Inspect Element на будь-якому сайті?

Так, Inspect Element працює універсально на всіх сучасних веб-сайтах. Однак, деякі сайти обробляють код на сервері та відправляють лише об’єкти JavaScript на frontend. Це, як правило, робиться для того, щоб запобігти збору даних веб-скрейперами, і вам може стати складно зрозуміти структуру сайту за допомогою Inspect Element.

Чи є зміни, зроблені в Inspect Element, постійними?

Ні. Будь-які зміни, зроблені через інструменти інспектора, тимчасово відображаються локально лише у вашому переглядачі. Після оновлення відображатиметься зміст зовнішньої сторінки за замовчуванням. Зміни ніяк не вплинуть на фактичні вихідні файли.

Чи можуть інші користувачі бачити зміни при перегляді веб-сайтів?

Зміни через Inspect Element не можуть бути переглянуті іншими користувачами, які переглядають сайти, навіть під час входу в один профіль браузера на кількох пристроях. Вважайте, що зміни є виключно для вашого комп’ютера.

Чи є інші інструменти для розробників, крім Inspect Element?

Безумовно. Як зазначалося раніше, Консоль, Джерела, Мережа та інші вкладки аналізу також надзвичайно цінні під час розробки. Крім того, розширення браузера розширюють можливості DevTools ще більше.

Не просто переглядайте вебсайти, взаємодійте з кодом

Експериментування з функцією “Перевірити елемент” відкриває завісу того, як працюють вебсайти. Дозволяючи вам заглянути в HTML, CSS та JavaScript під будь-якою сторінкою, на яку ви клікаєте, може легко допомогти вам зрозуміти, чому щось виглядає та відчувається саме так.

Отже, під час серфінгу завжди тримайте під рукою інструмент Inspect Element. Нехай цікавість керує вами, коли ви клікаєте навколо, щоб побачити, що змушує речі з’являтися такими, як вони є. Хто знає, можливо ви навчитеся новим методам, щоб допомогти вебу стати ще більш доступним і веселим місцем!