Як дізнатися html код сайту в браузері

Вітаю Вас на своєму блозі!
Прочитавши цю статтю ви дізнаєтеся, як дізнатися html код сайту і як редагувати css код іншого сайту за допомогою найпопулярніших браузерів Google Chrome, Mozilla Firefox і Opera.
Часто переглядаючи сайти або коли шукаєш відповідь на який-небудь питання, пов`язаний з web програмуванням, часто задаєш собі питання: "За допомогою якого коду побудований той чи інший блок на сайті?"

Професіонали для роботи з html кодом використовують спеціальні програми, але бувають моменти, коли це зовсім не потрібно.
Якщо вам потрібно просто подивитися фрагмент коду на сайті, який-небудь div блок або дізнатися назву шаблону на блозі, браузер для цього відмінно підійде.
Ще це корисно для самоосвіти, так як ніщо так не вчить, як приклади, які ти бачиш і можеш з ними попрацювати.

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

Природно, що реально ви код сайту не зраджуєте, всі зміни відбуваються тільки в вашому браузері.
Щоб дізнатися код всієї веб сторінки в браузері (крім IE) досить використовувати комбінацію клавіш CTRL + U.

Але для вивчення окремих її елементів цей варіант не підходить.
Сучасні браузера сьогодні здатні не тільки відображати вміст сторінок, але і надають розробникові цілий ряд інструментів для роботи з html і css кодом.

Як дізнатися код сайту в браузері Google Chrome

Для того щоб дізнатися html код всієї сторінки, потрібно вибрати в меню "Перегляд коду сторінки".
Щоб дізнатися фрагмент html коду в браузері Google Chrome потрібно навести мишкою на потрібний нам елемент, і натиснувши праву кнопку миші вибрати "Перегляд коду елемента".

Внизу екрана відкриється панель розробника, для перегляду і редагування коду.
За допомогою цієї панелі можна вивчити css файл сайту, і причому не просто вивчити, а й його змінювати і відразу ж дивитися, які зміни відбуваються на сторінці.

Це дуже корисно, коли вам треба поставити новий елемент на свій блог, і потрібно визначити, які розміри або координати йому дати. Щоб потім просто взяти, і сміливо змінити код свого сайту вже з адмінки свого блогу чи хостингу.

Так само в цій панелі можна переглянути і змінити html код сайту. Що теж допомагає у вивченні web програмування.
Крім того в цій панелі можна подивитися які зображення відображаються на цій сторінці сайту. З чого складається шапка або підвал сайту.
З усіх браузерів панель розробника браузера Chrome мені подобається найбільше, через свою простоту.

Як дізнатися html код сайту в браузері Mozilla Firefox

У Mozilla Firefox є можливість переглянути код виділеної ділянки сторінки. Що дуже зручно, коли потрібно дізнатися html код тільки якогось окремого тексту, а не всієї сторінки.

Для цього потрібно виділити мишкою потрібний нам текст і натисніть праву кнопку миші вибрати в меню "Вихідний код виділеного фрагмента".

Відео: Як подивитися html код сайту або сторінки

Також є можливість подивитися код всієї сторінки. Для цього потрібно натиснути правою кнопкою миші на сторінці і вибрати пункт "Вихідний код сторінки".

Якщо потрібно дізнатися код окремого елемента, треба натиснути правою кнопкою мишки на потрібному елементі, і вибрати пункт в меню "Дослідити елемент".
У панелі для веб-майстра так само можна редагувати html і css код сторінки.
Що дуже зручно, так це те, що в Firefox є підказки, який елемент від якого залежить чи успадкований. Тобто добре видно вкладеність div блоків.

Відео: Як ПОДИВИТИСЯ код сторінки з андроїд

Ще в Firefox є функція перегляду сторінки в 3D зображенні, чисто для інформації виглядає красиво.

Як дізнатися код сайту в браузері Opera

Для того щоб дізнатися код сайту в Опері, так само як і в попередніх браузерах викликаємо меню.
Якщо потрібно подивитися код всієї сторінки, вибираємо пункт "Вихідний код".
А для того щоб дізнатися код фрагмента сторінки, вибираємо в меню "Проінспектувати елемент".

В Опері також можна змінювати код і дивитися, які зміни відбуваються на сторінці.
Зовні все панелі розробника в цих браузерах різні. Але в цілому виконують одну і ту ж задачу.
Має сенс познайомитися з усіма браузерами і вибрати той, який вам більше підходить.
Навіть якщо ви користуєтеся для перегляду сайтів Оперою, це зовсім не означає, що в ній буде зручніше переглядати і редагувати html код.

Як дізнатися назву шаблону на сайті

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

Дізнатися назву шаблону на сайті дуже просто. Відкриваємо вікно розробника в браузері і переходимо до перегляду css файлу. Для чого натискаємо на назву css файлу в правому вікні панелі розробника.

У самому верху цього файлу буде опис шаблону, як він називається, сайт розробника і т.д.
Звичайно, такий опис є не скрізь, як правило на авторських або унікальних шаблонах цього може і не бути.
Але на стандартних темах, які є в мережі для загального користування, як правило завжди є і назва шаблону, і url сайту розробника.

Звичайно, тут описані не всі функції панелей розробника для перегляду html коду, але для простого перегляду сторінок цього вистачить.

Щоб не засмічувати свій системний диск цифровим сміттям, найкраще зберігати файли, який ви завантажуєте в браузері на іншому диску, тоді у вас завжди буде достатньо місця на ньому для роботи системи.
Успіхів!