Як подивитися вихідний код сторінки сайту на планшеті/телефоні з ОС Android?

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

Скористаємося звичайним браузером, а також правилом, яке працює і на комп'ютері. Для цього до адресного рядка браузера перед url додайте «view-source:»:

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

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

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

Що таке вихідний код сторінки у браузері, навіщо його відкривати. Як це зробити в Google Chrome, Яндекс.Браузері, Apple Safari, Microsoft Edge, Mozilla, Firefox, Opera.

Будь-яка сторінка в інтернеті — це, по суті, HTML-код, який по-іншому називають «вихідний код».

У ньому можна переглянути деяку корисну інформацію для SEO. Наприклад, як прописані теги та метатеги, на кшталт title, description та Last-Modified, встановлені лічильники аналітики та багато іншого. Подивитися код можна і з комп'ютера, і телефону.

Покажемо, як викликати код сторінки та як знайти будь-який елемент у коді.

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

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

HTML-код сайту виглядає так:

Приклад коду сторінки сайту

Перегляд коду допоможе виявити помилки, знайти баги у відображенні окремих елементів або підглянути цікаві SEO-рішення у конкурентів.

Як подивитися код сайту з комп'ютера

Покажемо на прикладі найпопулярніших браузерів: Google Chrome, Яндекс.Браузер, Apple Safari, Microsoft Edge, Mozilla Firefox, Opera. Але принцип однаковий у всіх браузерах.

Google Chrome

Щоб відкрити код сторінки у браузері, достатньо натиснути комбінацію клавіш:

Якщо не любите гарячі клавіші, то можна клацнути правою кнопкою миші на сторінці і у меню вибрати пункт «Перегляд коду сторінки»:

Перегляд коду сторінки в Google Chrome

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

Можна й по-іншому — через меню браузера.Додаткові інструменти» → «Інструменти розробника».

Як відкрити «Інструменти розробника» у Google Chrome

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

Як відкрити код елемента сторінки в Google Chrome

Швидші способи зробити те саме:

• за допомогою гарячих клавіш Ctrl+Shift+I на Windows, Cmd(⌘)+Option(⌥)+I на Mac;
• правою кнопкою миші, клацнувши «Переглянути код».

Яндекс.Браузер

Перший спосіб переглянути код сторінки в Яндекс.Браузері — за допомогою правої кнопки миші. У меню потрібно вибрати пункт «Подивитися код сторінки».

Перегляд коду в Яндекс.Браузері

Другий — через меню браузера. Для цього необхідно натиснути три горизонтальні смужки у верхньому правому кутку, потім «Додатково» → «Додаткові інструменти» → «Подивитися код сторінки».

Перегляд коду через меню Яндекс.Браузера

В обох випадках код відкриється в окремій вкладці. Також код можна переглянути за допомогою гарячих клавіш Ctrl+U.

Щоб відкрити код у тій же вкладці, що й сторінка, замість «Подивитися код сторінки» потрібно вибрати пункт «Інструменти розробника» або натиснути Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac, як і в Chrome.

Apple Safari

Для перегляду коду в Safari необхідно спочатку увійти в «Налаштування» браузера, натиснувши написи Safari у верхньому лівому кутку екрана.

Де знаходяться налаштування браузера Safari

Потім у вікні вибрати розділ «Додатково» і поставити галочку навпроти «Показувати меню «Розробка» у рядку меню» у нижній частині вікна:

Увімкнення меню розробника в Safari

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

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

Код відкриється у нижній частині сторінки:

Код сторінки у Safari

Microsoft Edge

Переглянути код у Microsoft Edge можна за допомогою правої кнопки миші → команда «Переглянути вихідний код»:

Перегляд коду сторінки в Microsoft Edge

Код відкриється у новій вкладці. Можна і за допомогою гарячих клавіш Ctrl+U.

Також його можна переглянути через меню браузера. Для цього потрібно в правому верхньому кутку клікнути на три горизонтальні точки та вибрати команду «Інші інструменти» → «Кошти розробника»:

Інструменти розробника у Microsoft Edge

Панель відкриється знизу або праворуч на сторінці, що переглядається. Щоб побачити код, потрібно вибрати вкладку «Елементи»:

Дослідження коду окремих елементів у Microsoft Edge

Гарячі клавіші тут теж працюють: Ctrl+Shift+I на Windows, Cmd(⌘)+Option(⌥)+I на Mac.

Mozilla Firefox

Код відкривається в окремій вкладці за допомогою правої кнопки миші за командою «Вихідний код сторінки»:

Перегляд коду в Mozilla Firefox

Також можна відкрити вихідний код в окремій вкладці через меню браузера. Для цього у правому верхньому кутку клацніть на три горизонтальні риси і у меню виберіть команду «Інші інструменти» → «Вихідний код сторінки»:

Вихідний код у меню Mozilla Firefox

А можна просто натиснути гарячі клавіші Ctrl + U - це працює у всіх браузерах.

Інструменти розробника тут також можна відкрити гарячими клавішами Ctrl+Shift+I на Windows, Cmd(⌘)+Option(⌥)+I на Mac або клацнувши правою кнопкою миші та вибравши пункт «Дослідити»:

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

Панель відкриється знизу або праворуч на сторінці.

Opera

В останніх версіях Opera перегляд коду сторінки доступний на кліку правою кнопкою миші, за допомогою гарячих клавіш або за допомогою інструментів розробника.

Щоб відкрити код, клацніть правою кнопкою миші у будь-якій частині сторінки та виберіть команду «Вихідний текст сторінки»:

Перегляд коду сторінки у браузері Opera

Те саме можна зробити поєднанням клавіш Ctrl+U.

Щоб відкрити інструменти розробника, у цьому меню можна вибрати «Перевірити код елемента» або натиснути комбінацію гарячих клавіш Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac.

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

Методи відрізняються залежно від операційної системи телефону.

Android

Відкрити код елемента на телефоні можна за допомогою команди view-source, яку необхідно додати перед URL в адресний рядок:

view-source:https://site.ru/page-1

У вкладці відкриється вихідний код сторінки:

Перегляд коду сторінки з мобільного на Android

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

iOS

На iPhone ні в Safari, ні в Google Chrome за командою view-source: код не відкриється. Необхідно встановити спеціальні програми для перегляду коду. Наприклад, HTML Viewer Q або iSource Browser.

iSource Browser — повноцінний браузер для iOS, за допомогою якого можна переглядати HTML-код сторінок:

Переглянути код елемента сторінки в айфоні

Як знайти будь-який елемент у коді

Щоб знайти будь-що у відкритому вихідному коді, відкрийте пошук по сторінці. Зазвичай це можна зробити поєднанням клавіш Ctrl+F або через меню браузера та команду «Знайти…» або «Знайти на сторінці…»:

Пошук елементів у коді сторінки

У віконці введіть початок фрази або тег, який хочете знайти. Наприклад, viewport:

Як виглядають знайдені елементи

Знайдений елемент браузер виділить кольором.

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

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

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

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

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

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

Як відкрити код сайту на ПК

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

Google Chrome

Google Chrome відкриває вихідний код за допомогою поєднання гарячих клавіш Ctrl і U, якщо робота йде під ОС Windows. тиснемо три точки, потім «додаткові інструменти» та «інструменти розробника».

Яндекс.Браузер

Тут потрібно клікнути правою кнопкою миші на вільний простір, а потім навести курсор на рядок «Переглянути код сторінки» і клікнути. У меню браузера також є можливість запустити засіб перегляду. нарешті, "Переглянути ...". У Windows спрацьовують і гарячі клавіші Ctrl + U.

Microsoft Edge

Аналогічно попереднім браузерам відкрити інструкції сайту вдасться, якщо використовувати праву клавішу на порожньому просторі сторінки, а потім вибрати підпункт «Переглянути вихідний код». Побачити потрібні символи можна буде у вкладці, що знову відкрилася. Діє поєднання Ctrl + U. До засобів розробника можна потрапити через системне меню програми, якщо після його відкриття клікнути на рядок «Інші інструменти».

Opera

Браузер Opera дає доступ до коду аналогічним способом – після натискання правою кнопкою на вільному просторі сторінки сайту. Але працює тільки в останніх версіях браузера. Добре діє те саме поєднання гарячих клавіш, що і в інших засобах перегляду. Доступна комбінація Ctrl+Shift+I у Windows.

Mozilla Firefox

Популярний браузер Mozilla Firefox не відстає від інших і теж пропонує опцію відкриття коду на кліку правою клавішею. Далі, як і з попередніми браузерами, вибираємо пункт «Вихідний код» і відкривається одразу ціла сторінка коду. Добре працюють та інші методи: гарячі кнопки залишаються колишніми. У інструменти розробника можна потрапити, натиснувши одночасно Ctrl+Shift+I, якщо ви користуєтеся ОС Windows. Зручність даного браузера у тому, що рядки коду з'являються над окремому вікні чи вкладці, а додатковому блоці справа, чи знизу.

Safari

Не найчастіше браузер Safari має схожі з іншими засобами перегляду функціональні можливості. Тут можна перейти до коду, якщо зайти в налаштування, потім знайти пункт «Додатково» та розмістити курсор біля напису «Показувати меню Розробка». Далі натиснути розділ "Показати програмний ...". Потрібне вікно з'явиться унизу сторінки.