Кожен користувач інтернету має свої улюблені сайти, на яких він проводить довгий час. І тільки лінивий не думав подивитися, як він створений і з чого складається. Відповісти на всі ці питання не вийде, тому що існує багато способів створювати сайт, але подивитися ті команди і коди, з яких він складається - це можливо і загальнодоступно кожному.
Інше питання – чи зрозуміє людина, яка не займається програмуванням щось із тих символів, які складають код. Але з прикладів, які будуть наведені нижче за будь-який користувач Google Chrome зможе подивитися окремі елементисайтів.
Як переглянути вихідний код html-сторінки в браузері від Google
Що того, що б ви змогли подивитися код сторінки в Chrome необхідно зайти на сайт, що вас цікавить, і виконати наступні дії:
Два цих пункти відрізняються між собою своєю функціональністю та інформаційністю для користувача, програміста чи хакера. 
У чому різниця між кодом сторінки та просто командою «Подивитися код»
Розбираючи кожну з цих функцій, можна писати окрему статтю. Для програмістів ця різниця суттєва і вони розуміють, у яких випадках необхідно використовувати «Подивитися код», а в яких «Перегляд коду сторінки» у браузері Google Chrome.
Але пояснюючи для звичайного користувача, можна розділити ці функції за такими призначеннями:
- "Перегляд коду сторінки" необхідно лише для того, щоб побачити основну комбінацію сторінки. Здебільшого – це структура сайту (без додаткових моделейу вигляді CSS файлівта інших доповнень, які залишилися в папці автора сайту). Ця структуране підходить для створення власної сторінкишляхом "копіювати - вставити", але вона дозволить побачити, що саме програміст робив і в якій послідовності для того, щоб сайт у браузері Google Chrome мав такий зовнішній дизайн.
- "Подивитися код" виводить детальну структуру з виділенням усіх областей, які стосуються сторінки. Якщо ви наведете на певний код списку, він виділить елемент на сайті, якому належить.
- Перегляд коду сторінки відкривається в окремому браузері без можливості його редагувати. Тобто він підходить лише для копіювання та читання коду сайту. Але це не менш корисна функція.
- "Подивитися код" змінюємо і можна редагувати будь-який елемент так, як вам буде зручно. Звичайно ж – всі ці зміни будуть «жити» до моменту оновлення сторінки, але іноді буває смішно полазити по тих налаштуваннях і просто зрозуміти для чого необхідно те чи інше значення, і що буде від того, якщо його змінити. Не варто припускати, що такими діями ви щось нашкодите собі або сайту - ці зміни діють тільки в коді вашого Google Chrome і не виходить в мережу.
Розглядаємо питання про те, як переглянути код елемента
Якщо вже й відповідати на таке запитання, то напрошується лише варіант із прикладом. Тому що за одну статтю стати людиною, яка розумітиме цю тематику (веб розробником) – дуже важко, але показати на прикладі, щоб питання було вичерпане – зробити набагато легше.
Функціонал коду елемента дуже широкий, тому беремо одне із слів на сайті браузера Google Chrome. Ми побажали розглянути які ключові слова(У коді він буде прописаний, як «keywords») використовувалися для нашого сайту. Для цього виконуємо наступний алгоритм:
Інші способи використання цієї функції у браузері Google Chrome
Загалом, продовжуючи відповідати питанням, як подивитися код елемента і навіщо він потрібен, слід перерахувати його функції. А саме завдяки можливості подивитися код елемента будь-якого сайту в браузері Google Chrome ми можемо:
- Побачити структуру сайту починаючи від head («шапка сайту») та закінчуючи end (кінцевою командою будь-якої програми);
- Переглянути всі функції сайту, а саме: посилання на інші сайти, додаткові модулі із зовнішніх сайтів та наявність вбудованих лічильників для збору різної інформації;
- Дізнатися, чи заборонено копіювання з сайту чи ні;
- У коді буде записано всі посилання на інші сторінки сайту, а також їх оформлення та подальші дії після натискання на них.
Це далеко не кінцевий перелік. Але слід нагадати, що без спеціальних знань – читати код сторінки Google Chrome практично неможливий і отримані дані звичайному користувачевіпрактично не потрібні.
Не працює пункт «Перегляд коду елемента»
Слід відразу сказати – кожен сайт буде з відкритим доступомдо кодів елементів. Тобто навіть найпопулярніші та найдорожчі сайти будуть відкриті для перегляду їхнього коду. Тому, якщо пункт у браузері Google Chrome не активний або видає помилку має такі можливі причини:
- Профіль користувача пошкоджено;
- Наявність шкідливого програмного забезпечення на комп'ютері;
- Блокування певним розширенням збільшення продуктивності (навіть таке можливо).
Виправляємо пошкоджений профіль користувача
Щоб створити новий профільпотрібно видалити старий з вашого комп'ютера. Для цього виконуємо таке:
- Закриваємо Google Chrome і запускаємо вбудований браузер Windows Explorer.
- Вводимо в адресний рядокнаступну команду: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Коли каталог відкриється, шукаємо папку "Default" і додаємо до її назви "Backup", щоб вийшло таке: "Backup Default".
- Тепер після нового запуску браузера Хром буде створено новий профіль.
Видаляємо шкідливі ПЗ або його залишки
Якщо новий профіль не відкрив нам доступ до коду елемента сторінки і ми, як і раніше, бачимо помилку, слід виконати такі дії:
- Відкриваємо командну рядок Windows(Виконати) і вводимо туди команду cmd.
- Вписуємо в рядок наступну команду: RD / S / Q "% WinDir % System32 Group PolicyUsers".
- Після підтвердження дії, вбиваємо цю: RD / S / Q «% WinDir % System32 Group Policy».
- Тепер "gpupdate /force" (без кицьок).
Якщо все правильно було зроблено, то після перезавантаження комп'ютера Google Chrome відкриватиме код елементів і працездатність браузера буде в нормі.
Необхідно швидко переглянути всі зміни на самому сайті, не торкаючись файлів і коду сайту, викладеного в Інтернет. Наприклад, змінити колірну гамубудь-якого блоку, підсунути елемент, що з'їхав, і т.д.
Для цього багато вебмайстрів використовують локальні сервери Denwerабо OpenServer, запускаючи повну копіюсайту у себе на комп'ютері Цей спосіб універсальний та підійде для професіоналів, за допомогою нього можна перевірити роботу різних скриптівта плагінів, поекспериментувати зі зміною дизайну та відредагувати всі файли сайту, а після тесту перенести відповідні зміни безпосередньо на сайт.
Користувачам далеким від вебмайстерня рекомендую для цих цілей використовувати браузер. Оскільки я використовую Сhrome, наведу інструкцію зі скріншотами саме з цього браузеру. За аналогією можна працювати з Opera, Яндекс.Браузером, Mozilla Firefox та іншими браузерами, принцип їх інструментів схожий.
Інструкція 1: як переглянути весь HTML код сайту у браузері
Відкриваємо необхідну веб-сторінку вашого сайту. Клацаємо правою кнопкою миші по необхідному елементу, з'явиться контекстне меню браузера з доступними командами:
Малюнок 1. Перегляд всього HTML коду веб-сторінки в браузері Chrome
Важливо:Команди у випадаючому меню можуть відрізнятися, наприклад, для активних елементів(посилання, картинки, відео) та неактивних (текст, фон, діви):
Рисунок 2. Меню браузера Chrome, що випадає
Тому якщо ви не знайшли необхідної команди, просто натисніть праву кнопкумиші в іншому місці, або скористайтеся гарячими клавішами браузера.
Повернемося до малюнка 1, на ньому показано необхідна командадля перегляду всього HTML коду вихідної веб-сторінки, вона називається « Перегляд коду сторінки«. Клацаємо по команді, відкриється Нова вкладказ повним кодомвихідний веб-сторінки, великий плюс до всього - перегляд доступний з підсвічуванням синтаксису:
Малюнок 3. Фрагмент коду даного сайту
Даний інструмент дуже корисний для знаходження та редагування шуканих елементів.
Альтернативні способи перегляду всього HTML-коду веб-сторінки
Для більш швидкого доступу, можна використовувати інші способи виклику даного інструменту
- На малюнку 1 ми також бачимо, що дана командадоступна за поєднанням клавіш
+ ; - Вставити в адресний рядок браузера view-source: сайт замість мого домену вставляємо свою адресу;
Обидва способи є універсальними і повинні працювати у всіх браузерах.
Комусь спочатку здасться, що це зовсім не потрібний інструмент, але перегляд всього HTML коду сайту відмінно підходить для пошуку в коді необхідних елементівЦе можуть бути посилання, теги, мета-теги, атрибути та інші елементи.
Поєднанням гарячих клавіш
Малюнок 3. Пошук за кодом сайту
Після того, як ви ведете запит у пошукову форму, екран переміститься до першого знайденого елемента, за допомогою стрілок можна переміщатися між ними і вибрати необхідний:
Малюнок 4. Пошук за HTML кодом сайту
Інструкція 2: як переглянути та відредагувати HTML та CSS код сайту в браузері Google Chrome
Тепер найважливіша частина, в якій я покажу, як можна редагувати HTML та CSS код сайту у браузері. після чого переносити зміни до браузера.
Ось такий корисний інструментзавжди доступний у вашому браузері, експериментуйте з іншими командами, які полегшать редагування сайту.
Вміння змінити вихідний кодсторінки – корисна навичкадля просунутого користувача Інтернету. За допомогою заміни HTML коду ви зможете змінити відкриту веб-сторінкуяк вам завгодно. У цій статті ми розповімо, як змінити код сторінкиу Google Chrome. Втім, в інших браузерах все робиться аналогічно, тому проблем виникнути не повинно.
Що таке HTML-код сторінки?
Кожна сторінка, яку ви відкриваєте у браузері, має свій код мовою розмітки HTML. Цей код являє собою теги та текст. Теги це своєрідні мітки, які вказують браузеру, як відображати ту чи іншу частину сайту. Текст – це заповнення сторінки, те, що бачить юзер. Також до сторінки можуть бути підключені стилі CSS, які задають зовнішній вигляделементів сторінки. Щоб змінити вихідний код сайтуне потрібно досконально знати HTML і CSS і скоро ви в цьому самі переконаєтесь.
Навіщо змінювати веб-сторінку?
Ви можете підмінити дані на сайті, змінити текст повідомлення, зробити фейковий скріншот. Зверніть увагу, що всі зміни видно лише вам і при перезавантаженні сторінки вони зникнуть. Також змінені дані не будуть реальними. Наприклад, якщо у мене є 10 доларів, а я зміню на 100, то грошей у мене більше не стане. Це лише відображення сторінки браузером. Приклад:
Після:
Для прикладу я візьму цей сайт і зміню попередній анонс статті “ ” Відкриваю головну сторінкуу Google Chrome. Натискаю ПКМ по елементу, який хочу змінити, наприклад заголовок анонсу і вибираю “Подивитися код”.
У вікні переходимо на вкладку Elements і бачимо HTML код сторінки. У ньому потрібно знайти цікавий для нас текст. (підкреслять червоним)
Тепер видалю старий текст та впишу новий.
Ось і все назва анонсу змінена. Тепер я зраджу сам анонс, мітки та рубрику.
Вставити іншу картинку можна, змінивши атрибут src в тезі img.
». Такий самий пункт є і в контекстному меню, яке , якщо клацнути правою кнопкою миші текст сторінки. Можна використовувати і комбінацію клавіш CTRL + U. Mozilla FireFoxпри цьому не використовує зовнішніх програм - вихідний код сторінкипідсвічуванням синтаксису буде відкрито в окремому вікні браузера.
У браузері Internet Explorer клацніть у меню розділ "Файл" і виберіть "Правити до Блокноту". Замість назви Блокнот може бути написана інша, ви призначили в налаштуваннях браузера для перегляду вихідного кода. По клацанню сторінкиправою кнопкою миші випадає контекстне меню, в якому також є пункт, що дозволяє відкрити вихідний код сторінкиво зовнішньої програми- «Перегляд HTML- кода».
У браузері Operaвідкрийте меню, перейдіть в розділ «Сторінка» і ви матимете можливість вибрати в підрозділі «Засоби розробки» пункт «Вихідний» код» або пункт «Вихідний кодкадру». Такому вибору призначено гарячі клавіші CTRL+ U та CTRL + SHIFT + U відповідно. У контекстному меню, прив'язаному до клацання сторінкиправою кнопкою миші також є пункт «Вихідний код». Opera вихідник сторінкиу зовнішній програмі, яка призначена в ОС або налаштуваннях браузера для редагування HTML-файлів.
Браузер Google Chrome без жодних сумнівів має найкращу організаціюперегляду вихідного кода. Клацнувши правою кнопкою миші, ви можете вибрати пункт «Перегляду кода сторінки» і тоді вихідний підсвічування синтаксису буде відкрито на окремій вкладці. А можете вибрати у тому ж меню рядок «Перегляд кода елемента» і в цій же вкладці відкриє два додаткові кадри, в яких ви можете перевіряти HTML- і CSS- коделемента сторінки. Браузер буде реагувати на переміщення курсору рядками кода, підсвічуючи на сторінці елементи, що відповідають цій ділянці HTML- кода.
Ми випустили нову книгу«Контент-маркетинг у соціальних мережах: Як засісти в голову передплатників і закохати їх у свій бренд»
Вихідний код сайту – це сукупність HTML-розмітки, CSS стиліві скриптів JavaScript, які браузер отримує від веб-сервера.
Більше відео на нашому каналі - вивчайте інтернет-маркетинг із SEMANTICA
Його можна порівняти із набором команд, які дає солдатам командир. Уявіть, що глядачі не бачать та не чують начальника. З їхньої точки зору військові самостійно виконують дії. У нашому випадку командир – це браузер, команди – це вихідний код, а солдати, що марширують, – це кінцевий результат.
Зберігається сайт на веб-сервері, який надсилає сторінку на запит користувача. Запит – це введення URL у рядку адреси, клацання посилання або натискання на кнопку відправки даних у формі. Не важливо, якою мовою написані веб-сторінки, чи включають вони програмну частину. Кінцевим результатом роботи будь-якого серверного алгоритму є набір html-тегів та тексту.
Вихідний код сторінки – це набір даних, що включає:
- html-розмітку;
- стильову таблицю або посилання на файл;
- програми, написані JavaScript або посилання на файли з кодом.
Ці три розділи обробляються браузером. Для сервера це просто текст, який потрібно надіслати у відповідь на запит.
Навіщо нам знадобиться вивчати вихідний код
Все, що ми побачимо, ми зможемо проаналізувати та застосувати для вирішення тих чи інших завдань, які виникають у ході роботи з сайтом, особливо під час його оптимізації. Переглянувши вихідний код, ми можемо:
- Побачити мета-теги свого чи чужого сайту для їхнього аналізу.
- Побачити наявність або відсутність деяких елементів на сайті: лічильників, кодів ідентифікації в різних системах, певних скриптів та іншого.
- Дізнатися про параметри елементів: розміри, кольори, шрифти.
- Знайти шлях до фотографій та інших елементів на сторінці.
- Вивчити посилання на сторінці.
- Знайти проблеми з кодом, що заважають у процесі оптимізації сайту: невинесені в окремі файлистиль, скрипти, невалідний код.
Це основні можливості, але насправді, вміючи читати код, ви зможете дізнатися про сторінку набагато більше.
Як подивитися вихідний код сайту
Цілком у тому вигляді, в якому він викладений на сервері, з браузера це зробити не вдасться. А ось побачити всю розмітку можна, натиснувши на сторінці праву кнопку миші. Тут і далі на прикладі Google Chrome.
Вибираємо опцію «Перегляд коду сторінки» та отримуємо повний лістинг в окремій вкладці.
Це просто текст, який доведеться аналізувати, щоб зрозуміти. А ось отримати інтерактивний код можна за допомогою інструментів розробника.
Як знайти вихідний код сторінки сайту
Натискаємо на піктограму меню у браузері. Найчастіше він знаходиться праворуч і має вигляд трьох точок або смужок.
В розділі додаткових інструментіввибираємо "Інструменти розробника".
Відкриється вікно, де відображається активний стан коду. Це означає, що при натисканні миші на розмітці поруч з'явиться стиль елемента, а на сторінці підсвічуватимуться вибрані блоки.
У вкладці "Source" можна переглянути вміст деяких файлів: скрипти, шрифти, зображення.
У вкладці Security доступна перевірка сертифіката сайту.
Вкладка Audits допоможе провести перевірку викладеного на хостинг ресурсу.
Якщо розташування панелі справа незручно, можна натиснути три точки та змінити його, вибравши бажаний пункт.
Як подивитися мета-теги
Кожен html-документ включає теги структури. Ось деякі з них:
- Html – весь документ.
- Head – розділ службових заголовків.
- Title – заголовок сторінки (відображається на вкладці).
- Body – тіло документа.
- H1-H6 – заголовки тексту сторінки.
- Article – стаття.
- Section – розділ.
- Menu – меню.
- Div – блок.
- Span – рядок.
- P – абзац.
- Table – таблиця.
Елементи призначені для логічного розмежування розділів на сторінці, за необхідності вони оформлюються за допомогою стилів. У них розміщується текст, який так чи інакше видно на сторінці. Але в тезі Headє службова інформація. Для її вказівки є мета-теги. Все що в них записано, призначене для сервера та пошукових систем.
Їхній вміст іншим способом дізнатися неможливо.
Звернімо увагу на тег Link. З його допомогою вказуються посилання на зовнішні файли, що підключаються. За бажання можна побачити вміст та зберегти на диск. Для цього наведіть вказівник на адресу та натисніть ПКМ. Виберіть Open in new Tab.
У новій вкладці відкриється вказаний файл, який можна переглянути чи зберегти.
Як подивитися вихідний код сторінки для налагодження скрипту
У цьому випадку найзручніше відкривати сторінку на локальній машині. Якщо потрібно лише виправити розмітку, стилі та скрипти, то це можна робити прямо з папки. Html-код проглядається так само. А ось помилки коду JavaScriptможна побачити у вкладці "Console". Тут показує опис помилки та номер рядка, в якому вона виникла.
Синтаксичну можна побачити безпосередньо у коді. Для цього призначено вкладку "Source".
Як подивитися код конкретного елемента
Для великих сторінокз великою кількістюелементів складно знайти потрібний коду всій розмітці. У такому разі слід скористатися спеціальною командою контекстного меню. Наведемо мишу на фрагмент та натиснемо ПКМ. Виберемо команду "Переглянути код".
Відкриється те саме вікно, але з фокусуванням на вибраному об'єкті.
Резюме
Ми розповіли, що таке вихідний код сторінки. Достатньо освоїти елементарні знання HTML та CSS, та користуючись зручними інструментамирозробника, ви зможете проводити налагодження власних html-документів.
Перегляд коду ресурсів в інтернеті дозволить вам навчатися не лише на власний досвід, а й використовувати реальні робочі приклади. А для seo-фахівців будуть корисні мета-теги, інформація в яких може сказати про сайт багато.
