Як перевірити елементи веб-сайту у вашому браузері
Якщо вам коли-небудь було цікаво побачити, як виглядатиме ваша сторінка з різними стилями, але без необхідності застосовувати будь-які зміни, ви будете раді почути, що для вас є спосіб це зробити. Насправді ваш браузер постачається зі зручним інструментом, який дозволить вам перевіряти елементи веб-сайту. Таким чином ви зможете побачити, як може виглядати ваш вміст.
У тексті нижче ми надамо вам усі основні відомості про те, як перевіряти елементи веб-сайту під час роботи в WordPress.
Що саме таке Inspect Element?
Усі найновіші веб-браузери постачаються з набором інтегрованих інструментів, які показують код CSS, JavaScript і HTML для певної сторінки. Інструмент Inspect дозволяє веб-розробникам редагувати код у веб-браузері, якщо це необхідно. Це дає їм можливість попередньо переглядати будь-які зміни без фактичного втручання в будь-який код. Іншими словами, вони єдині, хто може бачити ці зміни у своєму браузері.
Ця опція може бути особливо корисною для тих, хто хоче впровадити зміни на своєму веб-сайті WordPress, але хоче попередньо їх переглянути, перш ніж вони набудуть чинності. Наприклад, якщо ви є власником блогу і бажаєте побачити, як фрагмент будь-якої вашої публікації WordPress відображатиметься у вашому браузері, ви можете легко зробити це за допомогою цього інструменту.
Це корисно не лише для власників веб-сайтів, але й для будь-якого автора, маркетолога, агента служби підтримки та будь-кого іншого, кому цікаво побачити, як може виглядати вміст, над яким вони працюють.
Як перевірити елемент у Google Chrome
Є два способи отримати доступ до цього інструменту. Ви можете клацнути правою кнопкою миші будь-яку область веб-сторінки та вибрати перевірити або натиснути CTRL + Shift + I на клавіатурі.
Після виконання цього першого кроку ваш браузер автоматично розділиться на дві частини, а вихідний код вашої сторінки з’явиться в меншому вікні. У цьому вікні ви побачите HTML ліворуч і CSS праворуч.
Різні області веб-сторінки будуть виділені під час перетягування миші над джерелом HTML. Якщо ви клацнете правою кнопкою миші певний елемент веб-сторінки, цей елемент буде виділено.
Як редагувати та налагоджувати код
За допомогою інструмента Inspect Element ви можете редагувати як HTML, так і CSS. Щоб редагувати HTML, просто двічі клацніть будь-яку область у вихідному коді HTML, а потім відредагуйте код.
Те ж саме можна зробити і в області CSS. Щоб додати нове правило стилю, просто натисніть на піктограму + у верхній частині.
Усі внесені вами зміни негайно відображатимуться у вашому браузері.
Ще раз наголошуємо, що жодна з цих змін не буде збережена. Ви можете скільки завгодно перевіряти будь-які елементи веб-сайту, але це лише інструмент налагодження, який не дозволить вам застосувати будь-які фактичні зміни до коду. Іншими словами, усі ваші зміни зникнуть, коли ви оновите сторінку.
Ось чому, якщо ви справді хочете внести зміни, вам доведеться отримати доступ до таблиці стилів вашої теми WordPress і відредагувати там код. Однак ми маємо зауважити, що для цих цілей ви повинні створити дочірню тему .
Область консолі для пошуку помилок
Іншою важливою функцією інструмента «Перевірити елемент» є область консолі. Ця конкретна область відображає всі наявні помилки на вашому сайті. Тому, якщо ви хочете налагодити помилку на своїй сторінці, перевірка цієї області для перевірки помилок може бути корисною для вас.
Навчитися перевіряти елементи веб-сайту не тільки корисно для вашої роботи, але й може заощадити час команди технічної підтримки, якщо ви вже знаєте, у чому полягає ваша проблема. Оскільки цей потужний інструмент має багато переваг, ми рекомендуємо вам спробувати його використовувати, дотримуючись наших посібників.