Як дізнатися в якому файлі знаходиться код елемента через дослідити елемент

Розробники браузерів подбали про зручність тих, хто створює сайти, що відкриваються в цих браузерах, а саме – про вебмайстрів. Вони додали до стандартних функцій інструменти розробника, за допомогою яких можна легко відкрити та подивитися вихідний код сторінки сайту у браузері: HTML, CSS, JavaScript (JS), отримати різні корисні дані про структуру сайту, провести його технічний аналіз. Загалом побачити багато корисного.

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

Наприклад, можна дізнатися посилання на вихідну картинку, відео або файл, дізнатися точний код кольору будь-якого елемента, подивитися теги, фон, стилі, перевірити помилки CSS та інше.

З цієї статті ви дізнаєтеся, як у браузері переглянути вихідний код сторінки сайту (як відкрити HTML, CSS, JavaScript код сайту).

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

Відкрити вихідний код веб-сторінки в браузері можна двома способами:

Ctrl+U – комбінація гарячих клавіш для перегляду вихідного коду всієї сторінки сайту в окремому новому вікні. Стандартні для всіх браузерів Google Chrome, Opera, Mozilla Firefox, Яндекс браузера, IE.

Також до інструментів розробника можна увійти так:

1. Викликати контекстне меню, клацнувши правою кнопкою миші у будь-якій частині сторінки сайту, на якій потрібно подивитися HTML, CSS код;
2. Натисніть в контекстному меню пункт «Перегляд коду сторінки», як показано на скріншоті нижче.(Скріншот зроблений у Google Chrome. У деяких інших браузерах пункт меню трохи відрізнятиметься. Наприклад, в Opera буде «Вихідний текст сторінки»)

Перегляд коду елемента | вивчити елемент | проінспектувати елемент

1. відкрити потрібну сторінку сайту;
2. Викликати контекстне меню правою кнопкою миші;
3. Потім натисніть пункт, який відповідає вашому браузеру.
   Google Chrome: "Переглянути код"
   Opera: "Переглянути код елемента"
   Яндекс браузер та Mozilla Firefox: «Дослідити елемент»

Як подивитися вихідний код на телефоні Android

Ще хотілося б помітити, що інструменти розробника доступні не тільки в робочій версії браузерів, тобто, на комп'ютерах і ноутбуках. На телефонах та планшетах (Android, IOS) можна також переглянути вихідний код. Для цього слід додати до URL сторінки, що інспектується, приставку view-source: Звичайно ж, даними інструментами користуються не тільки творці сайтів для роботи, але й прості користувачі, яким вихідний код дозволяє подивитися різні корисні дані. Наприклад, можна дізнатися посилання на вихідну картинку, відео або файл, дізнатися точний код кольору будь-якого елемента, подивитися теги, фон, стилі, перевірити помилки CSS та інше. З цієї статті ви дізнаєтеся, як у браузері переглянути вихідний код сторінки сайту (як відкрити HTML, CSS, JavaScript код сайту).

Чим відрізняється код елемента та сторінки

І окремий елемент, і вся сторінка – це HTML-код із CSS-стилями. У цьому плані особливої ​​різниці немає, але для них діють різні функції. Якщо ми захочемо переглянути код сторінки в Яндекс.Браузері, програма перекине на окреме вікно. У ньому стіною тексту буде написано весь код, з якого складається веб-сторінка.Якщо його скопіювати, зберегти файл з розширенням HTML і запустити через браузер, веб-браузер побудує ідентичну сторінку. Однак, ніякі функції не працюватимуть. Код елемента відображається у межах поточної вкладки. Спеціальний редактор, вбудований в Yandex browser, допоможе побачити весь вміст, тобто «начинки» конкретного блоку, посилання або іншого тега. Завдяки зручній навігації, легко перейти на кілька рівнів вище або нижче, а також переглянути всі стилі, що застосовуються. Подібного функціоналу код сторінки немає. Більше того, в редакторі можемо працювати з будь-якими елементами: видаляти, додавати та змінювати.

Короткий підсумок! Код сторінки включає весь вміст вкладки і представлений у незручному вигляді. Код елемента запускає редактор, де легко переглянути всі стилі та параметри вкладення для кожного тега.

Вихідний код сторінки в Apple Safari

Хоча Safari для iOS за замовчуванням не включає можливість перегляду джерела сторінки, браузер досить легко інтегрується з програмою View Source, доступною в App Store за 0,99 дол. США. Тепер має відображатися структуроване подання з кодуванням кольорів вихідного коду активної сторінки разом з іншими вкладками, які дозволяють переглядати ресурси сторінки, сценарії та багато іншого.

На MacOS

1. Виберіть Safari у меню браузера, розташованого у верхній частині екрана.
2. Коли з'явиться меню, виберіть Опції.
3. Налаштування Safari тепер мають бути помітні. Натисніть на піктограму «Додатково», розташовану у правій частині верхнього ряду.
4. Внизу розділу "Додатково" знаходиться опція "Показати меню розробки" у рядку меню, що супроводжується порожнім прапорцем. Встановіть прапорець і закрийте вікно налаштувань, клацнувши по червоному значку «х» у верхньому лівому кутку.
5. Відкрийте меню «Розробка» у верхній частині екрана.
6. Коли з'явиться меню, виберіть «Показати джерело сторінки». Крім того, можна використовувати наступну комбінацію клавіш: COMMAND + OPTION + U.

Як переглянути код усієї сторінки в Yandex browser

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

Як переглянути код сторінки сайту в Яндекс браузері:

Через меню браузера. Тиснемо на три смуги в кутку браузера (зверху праворуч), наводимо курсор на «Додатково», а потім – на «Додаткові інструменти». Натискаємо на пункт "Подивитися код сторінки".

Після виконання будь-якої процедури відкривається нова вкладка, повністю забита HTML-кодом з інтегрованими CSS-вставками.

Обмеження для перегляду вихідного коду.

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

Наприклад, сайт WordPress спочатку формує сторінку на сервері за допомогою мови програмування PHP, а потім відправляє сформовану сторінку відвідувачу сайту. Іншими словами, ви можете переглядати код готової веб-сторінки, але не зможете переглянути код PHP.

Це правило застосовується до всіх серверних скриптів, SSI та програмного коду. Отже, ви не можете переглядати вихідний код скриптів, який використовується у пошукових системах, форумах, опитуваннях, чатах тощо.

Але HTML код, код файлів CSS, а також код JavaScript, ви зможете переглянути, причому, прямо в браузері.

Перегляд коду елемента в Яндекс браузері

Перегляд коду елемента в Яндекс браузері виконується за схожим алгоритмом, відмінності не дуже значні.І все ж таки для ясності розглянемо кожен спосіб.

Як дослідити код елемента Яндекс браузер:

Використовуючи "Налаштування Яндекс.Браузера". Відкриваємо меню веб-браузера і послідовно розгортаємо "Додатково" - "Додаткові інструменти". Вибираємо пункт "Інструменти розробника".

Перший і третій методи лише дозволяють відкрити редактор. Другий спосіб цікавий тим, що з його допомогою ми можемо відразу знайти обраний елемент. Якщо клацнемо ПКМ за посиланням або іншим видимим блоком і запустимо інструмент, побачимо його код і все, що до нього відноситься. Метод рекомендуємо використовувати тоді, коли шукаємо конкретну інформацію про певний тег. В інших випадках краще користуватися гарячими кнопками – це найшвидший спосіб.

Перегляд коду HTML з телефону на Андроїд у браузері Google Chrome.

Відкрийте браузер Google Chrome на телефоні Android.

Відкрийте веб-сторінку, вихідний код якої потрібно переглянути.

Під рядком з адресою натисніть значок редагування.

Перемістіть курсор до самого початку URL-адреси.

Введіть view-source: та натисніть Enter або Go.

Коротка інструкція з редагування HTML та CSS-коду

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

Нижче бажаємо показати пару корисних лайфхаків для новачків:

Як скопіювати текст, якщо його копіювання на сайті заборонено? Тиснемо ПКМ за вмістом і відкриваємо редактор. Розгортаємо виділені теги доти, доки не побачимо текст. Робимо подвійний клік по ньому, виділяємо контент і копіюємо його за допомогою Ctrl+C. До речі, вкладений текст може не лише копіювати, а й змінювати.

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

Важливо! Є недобросовісні користувачі, які застосовують редагування коду елемента з метою ввести іншу людину в оману. Наприклад, обмін валюти. Вони редагують текст на сайті і показують чек, Начебто б вони відправили гроші, хоча насправді це не так. Щоб не дати себе ввести в оману, потрібно просити оновити сторінку.

Вище описана вся базова інформація про те, як відкрити і використовувати код сторінки та елемента в Яндекс Браузері.

Базові знання про код

Мій сайт призначений для новачків і спочатку мені хотілося б у двох словах розповісти про сайти і код в цілому.

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

Якісні сайти створюються саме так.

Скажу лише одне… немає нічого приємнішого, ніж бачити, як незрозумілі слова, написані тобою, перетворюються на єдине ціле і оживають: посилання працюють, кнопки рухаються, картинки рухаються, текст повзе, я знаю, як почував себе Віктор Франкенштейн.

Коли ви почнете осягати таємну мову і бачити, що все насправді значно простіше, ніж здавалося спочатку, ви не можете не вірити у власні сили і можливості мозку.

Як робляться сайти? В ідеалі, спочатку за справу береться дизайнер. Наприклад, як показано на малюнку нижче.

По цьому малюнку верстальники створюють сайт. Подивіться на скріншот внизу.

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

Як подивитися код конкретного елемента

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

Відкриється те саме вікно, але з фокусуванням на вибраному об'єкті.

Як подивитися мета-теги

Кожен html-документ включає теги структури.

1. Html – весь документ.
2. Head – розділ службових заголовків.
3. Title – заголовок сторінки (відображається на вкладці).
4. Body – тіло документа.
5. H1-H6 – заголовки тексту сторінки.
6. Article – стаття.
7. Section – розділ.
8. Menu – меню.
9. Div – блок.
10. Span – рядок.
11. P – абзац.
12. Table – таблиця.

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

Їхній вміст іншим способом дізнатися неможливо.

Звернімо увагу на тег Link. З його допомогою вказуються посилання на зовнішні підключаються файли.

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

Як подивитися вихідний код сайту

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

Вибираємо опцію «Перегляд коду сторінки» та отримуємо повний лістинг в окремій вкладці.

Це просто текст, який доведеться аналізувати, щоб зрозуміти. А ось отримати інтерактивний код можна за допомогою інструментів розробника.

Перегляд коду сторінки: на що можна звернути увагу?

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

Наприклад, рядки коду, що знаходяться всередині тега head, містять інформацію для пошукових машин і веб-майстрів. Вони не виводяться на сайт. Тут можна побачити, за якими ключовими словами просувається ця сторінка, як написані її title та description. Також тут можна зустріти посилання, перейшовши за яким дізнаємося про сімейство google шрифтів, що використовуються на сайті.

Якщо сайт зроблений на CMS WordPress або Joomla, це також буде видно тут. Наприклад, у цій області виводиться інформація про тему WordPress або шаблон Joomla сайту. Побачити її можна, прочитавши зміст посилань, виділених синім кольором. В одному посиланні видно шаблон сайту.

Із цього посилання видно, що сайт зроблений на базі WordPress. На це вказують літери wp-content та назву теми сайту. Перейшовши за посиланням:

Ми побачимо CSS стилі шрифтів сторінки. У разі використовується шрифт. Це видно тут – font-family: Source Sans Pro.

Цей сайт оптимізується за допомогою сео-плагіну Yoast SEO. Це видно з цієї закоментованої ділянки коду:

Вся інформація, що знаходиться усередині тега body, виводиться браузером на екрані монітора. Тут ми бачимо html код сторінки, а в самому низу знаходиться код Яндекс скрипта метрики. Він наділений закоментованим тегом із текстом:

Навіщо змінювати веб-сторінку?

Для прикладу я візьму цей сайт і зміню попередній анонс статті “ ” Відкриваю головну сторінку в Google Chrome. Натискаю ПКМ по елементу, який хочу змінити, наприклад заголовок анонсу і вибираю “Подивитися код”.

У вікні переходимо на вкладку Elements і бачимо HTML код сторінки.У ньому потрібно знайти цікавий для нас текст. (підкреслять червоним)

Тепер видалю старий текст та впишу новий.

Ось і все назва анонсу змінена. Тепер я зраджу сам анонс, мітки та рубрику.

Вставити іншу картинку можна, змінивши атрибут src в тезі img.

Необхідно швидко переглянути всі зміни на самому сайті, не торкаючись файлів і коду сайту, викладеного в Інтернет. Наприклад, змінити колірну гаму будь-якого блоку, підсунути елемент, що з'їхав, і т.д.

Для цього багато вебмайстрів використовують локальні сервери Denwer або OpenServer, запускаючи повну копію сайту у себе на комп'ютері. Цей спосіб універсальний і підійде для професіоналів, за допомогою нього можна перевірити роботу різних скриптів та плагінів, поекспериментувати зі зміною дизайну та відредагувати всі файли сайту, а після тесту перенести відповідні зміни безпосередньо на сайт.

Користувачам далеким від вебмайстерня рекомендую для цих цілей використовувати браузер. Оскільки я використовую Сhrome, наведу інструкцію зі скріншотами саме з цього браузеру. За аналогією можна працювати з Opera, Яндекс.Браузером, Mozilla Firefox та іншими браузерами, принцип їх інструментів схожий.

Як переглянути вихідний код (html код) сторінки?

Ctrl+U

Як переглянути вихідний код елемента?

Натисніть праву кнопку миші на елементі сторінки.

Далі в контекстному меню натисніть лівою кнопкою по пункту

Google Chrome: "Перегляд коду елемента"

Opera: "Проінспектувати елемент"

FireFox: "Аналізувати елемент"

В інших браузерах шукайте подібний до змісту пункт меню.

Спеціально на початку статті виклав всю суть, для тих, хто шукає швидку відповідь.

Інформація може бути багатьом відома, але оскільки пишу для блоггерів-початківців, веб-програмістів та інших старателів, то ця довідкова стаття обов'язково повинна бути присутня.

У майбутньому ви обов'язково вивчатимете вихідний код сторінок та окремих елементів.

Давайте подивимося на конкретному прикладі, як можна використовувати перегляд вихідного коду сторінки.

Наприклад, ми хочемо подивитися, які ключові слова (keywords) використовуються для конкретної сторінки. Заходимо на веб-сторінку, що нас цікавить, і натискаємо Ctrl+U. В окремому вікні або окремій закладці відкриється вихідний код цієї сторінки. Натискаємо Ctrl+F для пошуку фрагмента коду. У разі друкуємо у вікні пошуку слово “keywords”. Вас автоматично перекине на фрагмент коду з цим мета-тегом та виділить шукане слово.

За аналогією можна шукати та вивчати інші фрагменти коду.

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

Давайте застосуємо на конкретному прикладі перегляд коду елемента. Наприклад, подивимося чи є посилання атрибут nofollow. Натискаємо правою кнопкою миші на посилання, що нас цікавить, і в випадаючому контекстному меню лівою кнопкою клацаємо по пункту “Перегляд коду елемента” або подібному (залежно від вашого браузера). Внизу у спеціальному вікні для аналізу коду отримуємо щось подібне.

Сподобалася стаття? Не забудьте поділитися з друзями та колегами:

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

Для яких цілей потрібна навичка читання коду і як у кілька кліків подивитися вміст сайту? Про це та багато іншого поговоримо в сьогоднішній статті.

Навіщо мені потрібний вихідний код сайту?

Думаєте, якщо ви не програміст чи верстальник, то код вам навряд чи знадобиться? Насправді він може допомогти в різних ситуаціях. Код може бути корисним:

• SEO-фахівцям. Не завжди є можливість проаналізувати сторінку та дізнатися, чи є з нею якісь проблеми. Наприклад, щоб дізнатися про Description сторінки, можна не користуватися спеціальними плагінами та іншими засобами – достатньо відкрити вихідний код, і опис буде перед очима. Аналогічним чином можна переглянути заголовок сторінки, дізнатися, чи підключено Яндекс.Метрику та інші скрипти.
• Для глибшого аналізу конкурентів. Подивитися, як просувається сайт, ми можемо через код: ключові слова, мета-теги та інше – все це доступно для звичайного користувача.
• Веб-дизайнерів. Йдеться знову про конкуренцію, але й не тільки. Коли дизайнер створює свій сайт, він часто звертається до різних ресурсів, щоб переглянути, як розташовані ті чи інші елементи. Все це ми можемо дізнатися на будь-якому сайті: який відступ цієї кнопки, якого вона розміру, скільки пікселів та фотографія і так далі.
• Для найкращого розуміння коду. Вивчивши основи HTML-коду та CSS-стилів, ви зможете зрозуміти, як працює ваш верстальник і які елементи слід оптимізувати.

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

Як дізнатися код сайту

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

Як бачите, тут все логічно та зрозуміло.

Докладніше про те, що є кодом сайту, ми поговоримо в наступному розділі, а поки давайте розглянемо основні способи його перегляду.

Спосіб 1: Функція "Подивитися код"

Відкриваємо сторінку, код якої потрібно переглянути, та клацаємо по будь-якій області правою кнопкою миші. У меню вибираємо «Подивитися код». Також можна скористатися комбінацією клавіш «CTRL+SHIFT+I».

В результаті ми потрапляємо до інспектора браузера – на екрані з'являється додаткове вікно, де зверху знаходиться код сторінки, а знизу – CSS-стилі.

Зверніть увагу, що запуск інструмента розробника виконувався в Google Chrome. В іншому браузері назва кнопки запуску може відрізнятись.

Спосіб 2: "Перегляд коду сторінки"

Якщо в попередньому випадку ми могли відкрити всю таємничу сайту, то зараз нам буде доступний лише HTML-код. Щоб його подивитися, знаходимо на сайті порожнє поле та клацаємо по ньому правою кнопкою миші, потім вибираємо "Перегляд коду сторінки" (можна скористатися комбінацією клавіш "CTRL+U"). Якщо ви клацніть правою кнопкою по елементу сайту, то кнопка «Перегляд коду сторінки» буде відсутня.

Після цього нас перенаправить на нову сторінку з усім кодом:

Тут ми також можемо переглянути весь вміст сторінки, проте дізнатися про CSS і змінити дані у нас не вийде.

Що таке HTML та CSS

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

Наприклад, часто використовується така конструкція:

Це мій перший сайт!

Подібних тегів більше сотні, для їх вивчення рекомендую звернутися до довіднику.

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

Розглянемо на невеликому прикладі, як працюють стилі:

1. Припустимо, у нас є HTML-тег із текстом «Привіт! Це мій перший сайт»:
2. Ми хочемо, щоб текст став іншого кольору. Давайте зробимо його червоним! Для цього використовуються каскадні стилі (CSS), в даному випадку достатньо для тега body прописати стиль "color: red;". В результаті текстовий елемент перетвориться, а інформацію про його стилі ми можемо переглянути в інспекторі браузера:

Кожен сайт, який ви зустрічаєте, використовує зв'язку HTML та CSS.Варто згадати, що ще є мова програмування JavaScript, яка дозволяє оживляти сторінку. аналітику сайту або просто цікавитеся його вмістом, то у знаннях JavaScript немає потреби.

Як я можу використовувати код

Вище ми розглянули лише основні моменти, пов'язані з кодом сайту - навчилися переглядати його і дізналися, що таке HTML і CSS.

Варіант 1: Редагування контенту

Як ми вже говорили раніше, можна змінити контент сторінки всередині свого браузера.

Наприклад, можна змінити вміст тексту – для цього достатньо вибрати потрібний текст, клікнути по ньому правою кнопкою миші і перейти в «Подивитися код».

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

Щоб скасувати внесені зміни, достатньо скористатися клавішею F5 – сторінку буде оновлено, а весь контент стане вихідним.

Аналогічно ми можемо змінити CSS-стилі через нижнє вікно, але для цього знадобляться деякі знання. CSS-довіднику.

Варіант 2: Завантаження картинок

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

1. Вибираємо картинку, яку потрібно завантажити, клацаємо по ній правою кнопкою миші та переходимо в «Подивитися код». Після цього перед нами відкриється інспектор браузера з виділеним тегом – у ньому нас цікавить значення src. Там міститься посилання на картинку, яку потрібно скопіювати та вставити у браузер.
2. Ми потрапляємо у вікно із необхідним зображенням у повному розмірі. Щоб його скачати, достатньо клацнути правою кнопкою миші і вибрати «Зберегти картинку як…».

Аналогічним чином ми можемо вивантажити фонове зображення, але його варто шукати через CSS-стилі в атрибуті background.

Варіант 3: Перегляд SEO-елементів

За допомогою коду можна переглянути основні SEO-теги. Зробити це можна так:

1. Відкриваємо сторінку, яку потрібно проаналізувати, та клацаємо по порожній області правою кнопкою миші. Потім вибираємо "Перегляд коду сторінки".
2. Далі нас перенаправляє на сторінку з кодом – тут ми можемо знайти такі елементи як H1, Description, Title та інші. Для зручності рекомендую використовувати пошук на сторінці, який запускається за допомогою комбінації клавіш «CTRL+F».

Подібні елементи можна переглянути і через інспектор коду.

Як переглянути вихідний код на телефоні

Якщо потрібні розширені можливості для пристрою на Android, можна пошукати спеціальні програми, наприклад, VT View Source.

Як переглянути вихідний код сторінки

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

Що таке вихідний код сторінки і як його подивитися

Вихідний код сторінки відображається як набір HTML-описів, CSS-стилів та Java-скриптів. Це список команд, які сервер передає браузеру у відповідь на запит користувача. код можуть хостинг-провайдер, власник сайту чи адміністратор.

Як відкрити код сторінки

Перейдіть на сторінку, яку потрібно проаналізувати. Для відображення коду використовуйте клавіші. Ctrl+U.Відкриється докладний опис сторінки у форматі HTML-розмітки, тегів та скриптів.

• назви title, description;
• дані мікророзмітки Schema.org, Open Graph чи інших словників;
• дані JavaScript;
• мова відображення контенту на сторінці;
• підключені лічильників аналітики, генераторів заявок та інших сервісів;
• вихідні посилання на інші сторінки та сайти;
• розташування картинок,
• заголовків та текстових блоків;
• розміри та тип шрифтів, кольори елементів.

Для детального аналізу відкрийте код сторінки разом із інструментами розробника. Ctrl+Shift+I або F12.

Інструменти для веб-майстрів з'являються у тому ж вікні поруч із відкритою сторінкою.

При наведенні курсору миші на ділянці HTML у тексті ліворуч підсвічується елемент описаний цією ділянкою. Для більш детального аналізу даних виберіть один із розділів у верхній правій частині вікна:

• Elements → описує всі елементи сторінки.
• Console → виявляє можливі та критичні помилки коду.
• Sources → показує вміст файлів на сторінці.
• Network → вказує код відповіді сервера, час завантаження сторінки та її розмір.
• Security → відображає інформацію про сертифікат SSL.
• Audits → дозволяє провести технічний аудит мобільної чи десктопної версії сторінки.

Далі розглянемо, як відкрити вихідний код сторінки у різних браузерах.

Як переглянути вихідний код сторінки в різних браузерах

Google Chrome

Є 3 способи як подивитися вихідний код у цьому браузері.

1. У меню налаштувань у правій верхній частині екрана виберіть пункт «Додаткові інструменти», а потім виберіть «Інструменти розробника».

2. Вибрати відповідний пункт можна також у контекстному меню правої кнопки миші.

3. Натиснувши клавіші Ctrl+Shift+I або F12.

Mozilla Firefox

1. Зайдіть до Меню → «Інші інструменти» → «Початковий код сторінки».

2. Також можна вибрати пункт з контекстного меню, натиснути клавішу F12 або клавіші Ctrl+U.

Opera

Викликайте контекстне меню правою клавішею миші та виберіть → «Початковий текст сторінки» або «Переглянути код елемента» (поєднання клавіш Ctrl+U та Ctrl+Shift+I).

Safari

Відкрийте розділ "Розробка" у верхньому меню браузера → "Показати веб-інспектор".

Safari, до речі, ще відображає коди веб-сторінок через смартфон. Зайдіть до параметрів мобільного браузера та виберіть «View Source».

Microsoft Edge

У Microsoft Edge джерело сторінки відкривається через параметри (три точки) → «Додаткові засоби» → «Кошти розробника» або клавішею F12.

У кожному браузері також можна переглядати код елемента: логотип, картинки, заголовок. Для аналізу розмітки HTML окремого об'єкта необхідно навести курсор і вибрати в контекстному меню правої кнопки миші пункт «Дослідити код елемента».

Вихідний код сторінки відкривається в різних браузерах та доступний для перегляду всіх користувачів. Щоб відкрити код в окремому вікні, використовуйте клавіші Ctrl+U, Ctrl+Shift+I, F12 або виберіть відповідний пункт у параметрах браузера. Код сторінки складається з елементів HTML, описів стилів CSS та JavaScript. За цими даними можна вивчити розмітку сторінки, і дізнатися безліч інших відомостей про сторінку та її зміст.

Схожі питання