Незалежно від того, чи ви професійний веб-розробник, що прагне вдосконалити свій код, чи просто цікавитеся внутрішньою структурою вебсайтів, Google Chrome пропонує вам інструменти для перегляду HTML-коду. Існує два основні методи: “Перегляд джерела” та “Перевірка елемента” за допомогою інструментів розробника.
Перегляд джерела сторінки
Відкрийте Chrome та перейдіть на вебсторінку, структуру якої ви бажаєте дослідити. Клацніть правою кнопкою миші в будь-якому місці сторінки та виберіть опцію “Переглянути джерело сторінки”. Альтернативно, скористайтеся комбінацією клавіш Ctrl + U, щоб відкрити вихідний код у новій вкладці.
У новій вкладці ви побачите повний, невідформатований HTML-код сторінки.
Однак, якщо ваша мета – знайти конкретний елемент або розділ коду, то використання “Перегляду джерела” може бути незручним, особливо на вебсайтах з великою кількістю JavaScript і CSS.
Перевірка елемента за допомогою інструментів розробника
Цей спосіб дозволяє використовувати панель інструментів розробника Chrome, що є значно зручнішим підходом до вивчення HTML. Завдяки форматуванню коду та можливості згортання елементів, перегляд HTML стає набагато простішим.
Відкрийте потрібну вебсторінку в Chrome та натисніть комбінацію клавіш Ctrl + Shift + i. Збоку від сторінки з’явиться панель інструментів розробника.
Щоб розгорнути елемент і переглянути його структуру, натисніть на маленьку сіру стрілку зліва від нього.
Для того, щоб перейти безпосередньо до коду певного елемента, клацніть його правою кнопкою миші на сторінці та виберіть “Перевірити”.
У такому випадку панель розробника відкриється з виділеним кодом обраного вами елемента.
Ви можете змінити положення панелі, перемістивши її вниз, ліворуч, праворуч, або навіть відкріпивши в окремому вікні. Для цього скористайтеся іконкою меню (три крапки) та оберіть потрібне розташування.
Отже, ви навчилися переглядати код сторінки. Щоб закрити перегляд джерела, закрийте вкладку, а для закриття інструментів розробника натисніть на “Х” на панелі.