Як відкрити HTML-код в браузері

Кожна сторінка в інтернеті є HTML-кодом з додаванням інших веб-елементів: CSS, JavaScript, ActionScript. Перегляд її коду доступний будь-якому користувачеві, і кожен браузер надає для цього кілька інструментів.

Перегляд HTML-коду сторінки в браузері

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

Спосіб 1: Гаряча клавіша

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

Спосіб 2: Контекстне меню

Для тих, кому комфортніше користуватися мишкою, призначений альтернативний варіант, і для всіх браузерів він практично однаковий.

  • Google Chrome : Натисніть правою кнопкою миші по порожньому простору і виберіть пункт «Переглянути джерело сторінки».
  • Перехід до перегляду HTML-коду сторінки через контекстне меню в браузері Google Chrome

  • яндекс.браузер : ПКМ по порожньому простору> «Переглянути код сторінки».
  • Перехід до перегляду HTML-коду сторінки через контекстне меню в яндекс.браузер

  • Opera : Викличте контекстне меню і клацніть по варіанту «Оригінальний текст сторінки».
  • Перехід до перегляду HTML-коду сторінки через контекстне меню в Opera

  • Mozilla Firefox : Правим кліком мишею по вільному місцю на сторінці розгорніть контекстне меню і клацніть по позиції «Вихідний код сторінки».
  • Перехід до перегляду HTML-коду сторінки через контекстне меню в Mozilla Firefox

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

Перегляд HTML-коду сторінки в будь-якому браузері

Спосіб 3: Інструменти розробника

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

Читайте також: Відкриття консолі розробника в браузері

  • Google Chrome: тисніть правою кнопкою миші по сторінці або об'єкту і вибирайте «Переглянути код».
  • Переглянути джерело сторінки через інструменти розробника в Google Chrome

  • Яндекс.браузер: клацніть правою кнопкою миші по сторінці або області, що цікавить і виберіть «Дослідити елемент».
  • Переглянути джерело сторінки через інструменти розробника в яндекс.браузер

  • Opera: клікніть ПКМ по потрібній області сторінки, а потім за спрощеним варіантом «Переглянути код елементу».
  • Переглянути джерело сторінки через інструменти розробника в Opera

  • Mozilla Firefox: ПКМ по будь-якій області сторінки або конкретної частини - «Дослідити елемент».
  • Переглянути джерело сторінки через інструменти розробника в Mozilla Firefox

За замовчуванням відкриється вкладка «Elements» (в Firefox - «Інспектор»), де ви зможете переглядати HTML і CSS код всієї сторінки або конкретного об'єкта. Щоб дізнаватися більше про конкретний елемент сторінки, натисніть на кнопку зі стрілкою і наводите на об'єкт, що цікавить. У спливаючому вікні буде відображатися вся супутня інформація, а в інструментах розробника автоматично розгорнеться та область коду, яка відповідає за вибраний елемент.

Перегляд HTML-коду окремого елемента сторінки через інструменти розробника в будь-якому браузері

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

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