Незалежно від того, чи ви веб-дизайнер, який налагоджує вихідний код свого сайту, чи просто цікавитесь, як виглядає код сайту, ви можете переглянути джерело HTML прямо в Google Chrome. Існує два способи перегляду джерела HTML: переглянути джерело та перевірити за допомогою інструментів розробника.
Перегляд джерела за допомогою View Page Source
Запустіть Chrome і перейдіть на веб-сторінку, на якій хочете переглянути вихідний код HTML. Клацніть сторінку правою кнопкою миші та натисніть «Переглянути джерело сторінки» або натисніть Ctrl + U, щоб побачити джерело сторінки на новій вкладці.
Відкриється нова вкладка разом із усім HTML для веб-сторінки, повністю розгорнутою та неформатованою.
Якщо ви шукаєте певний елемент або частину у вихідному коді HTML, використання View Source є стомлюючим і громіздким, особливо якщо на сторінці використовується багато JavaScript та CSS.
Перевірте джерело за допомогою інструментів розробника
Цей метод використовує панель інструментів розробника в Chrome і є набагато більш чистим підходом до перегляду вихідного коду. HTML тут легше читати завдяки додатковому форматуванню та можливості згортання елементів, які вам нецікаво бачити.
Відкрийте Chrome і перейдіть на сторінку, яку потрібно перевірити; потім натисніть Ctrl + Shift + i. Поруч із веб-сторінкою, яку ви переглядаєте, відкриється закріплена панель.
Натисніть маленьку сіру стрілку поруч із елементом, щоб ще більше розгорнути його.
Якщо ви не хочете бачити повний код сторінки за замовчуванням, а замість цього перевірте певний елемент у HTML, клацніть правою кнопкою миші це місце на сторінці, а потім натисніть «Перевірити».
Коли панель відкривається цього разу, вона переходить безпосередньо до частини коду, яка містить елемент, який ви клацнули.
Якщо ви хочете змінити положення док-станції, ви можете перемістити його вниз, ліворуч, праворуч або навіть відкріпити його в окремому вікні. Клацніть піктограму меню (три крапки), а потім виберіть роз’єднати в окремому вікні, закріпити ліворуч, закріпити внизу або закріпити праворуч відповідно.
Ось і все. Завершивши перегляд коду, закрийте вкладку «Перегляд джерела» або натисніть «X» на панелі інструментів розробника, щоб повернутися на свою веб-сторінку.