Щоб відкрити інспектора, ви можете клацніть правою кнопкою миші будь-який елемент веб-сторінки та натисніть «Перевірити» або натисніть клавішу F12. Зробіть це прямо зараз, щоб побачити HTML і CSS, які використовуються на цій сторінці. Не перевантажуйтеся всіма інструментами, які ви зараз бачите! У цьому уроці ми хочемо зосередитися на панелях «Елементи» та «Стилі».

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

У Firefox ви також можете використовувати комбінацію клавіш Command-U, щоб переглянути вихідний код веб-сторінки. У Chrome процес дуже схожий. Перейдіть до верхнього пункту меню «Перегляд» і натисніть «Розробник/Переглянути вихідний код». Ви також можете скористатися комбінацією клавіш Option-Command-U .

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

Натисніть три вертикальні крапки, розташовані у верхньому правому куті інструментів розробника Chrome. У спадному меню виберіть «Додаткові інструменти». Ви побачите різноманітні параметри, натиснувши «Інші інструменти». З різних варіантів виберіть функцію огляду CSS.

Щоб відкрити інспектора, ви можете клацніть правою кнопкою миші будь-який елемент веб-сторінки та натисніть «Перевірити» або натисніть клавішу F12. Зробіть це прямо зараз, щоб побачити HTML і CSS, які використовуються на цій сторінці. Не перевантажуйтеся всіма інструментами, які ви зараз бачите!