Як відкрити вихідний код сторінки. Як подивитися вихідний код сторінки і код елемента

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

Поєднанням гарячих клавіш + відкриваємо вікно пошуку, в браузері Chrome воно з'являється верху справа:

Малюнок 3. Пошук по коду сайту

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

Малюнок 4. Пошук по HTML коду сайту

Інструкція 2: як переглянути і відредагувати HTML і CSS код сайту в браузері Google Chrome

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

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

». Такий же пункт є і в контекстному меню, Яке, якщо натиснути правою кнопкою миші текст сторінки. Можна використовувати і поєднання клавіш CTRL + U. Mozilla FireFox при цьому не використовує зовнішніх програм - вихідний код сторінки з підсвічуванням синтаксису буде відкритий в окремому вікні браузера.

У браузері Internet Explorer клацніть в меню розділ «Файл» і виберіть «Правити в Блокнот». Замість назви Блокнот може бути написана інша, ви призначили в настройках браузера для перегляду вихідного кода. Після клацання сторінки правою кнопкою миші випадає контекстне меню, в якому теж є пункт, що дозволяє відкрити вихідний код сторінки у зовнішній програмі - «Перегляд HTML- кода ».

В браузері Opera відкрийте меню, перейдіть в розділ «Сторінка» і у вас буде можливість вибрати в підрозділі «Засоби розробки» пункт «Вихідний код»Або пункт« Вихідний код фрейма ». Такому вибору призначені гарячі клавіші CTRL + U і CTRL + SHIFT + U відповідно. У контекстному меню, прив'язаному до клацання сторінки правою кнопкою миші, теж є пункт «Вихідний код». Opera исходник сторінки у зовнішній програмі, яка призначена в ОС або в налаштуваннях браузера для редагування HTML-файлів.

Браузер Google Chrome без жодних сумнівів має кращу організацію перегляду вихідного кода. Клацнувши правою кнопкою миші, ви можете вибрати пункт «Перегляду кода сторінки»І тоді исходник з підсвічуванням синтаксису буде відкритий на окремій вкладці. А можете вибрати в тому ж меню рядок «Перегляд кода елемента »і в цій же вкладці відкриє два додаткових фрейма, в яких ви можете перевіряти HTML- і CSS- код елемента сторінки. Браузер буде реагувати на переміщення курсора по рядках кода, підсвічуючи на сторінці елементів, що відповідають ділянці HTML- кода.

Отже, сьогодні ми з Вами розглянемо кілька корисних засобів для Web майстра, які полегшують життя при верстці сайту. Почнемо з консолі для web майстра в Google Chrome. І пройдемося з питань, які найчастіше виникають у web-майстри під час верстки сайту.

Для того, щоб потрапити в консоль, відкрийте ваш сайт в Google Chrome, клацніть правою кнопкою миші в будь-якому місці web-сторінки, і виберіть «Перегляд коду сторінки» в контекстному меню, що випадає, або ж по конкретному елементу для дослідження, вибравши «Перегляд коду елемента ».

Вгорі у вас буде перераховано кілька вкладок. Сьогодні ми поговоримо про вкладку «Elements» , на якій представлені елементи web-сторінки з підсвічуванням тегів, властивостей, виділенням вкладеності елементів, поданням ієрархії елемента в дереві DOM (підказка внизу, від кореневого батьківського до поточного досліджуваного), можливістю редагування елементів, перелік їх властивостей, розглянемо пошук за елементами, а також познайомимося з переглядом пов'язаних з елементами стилів css і т.п ..

Як переглянути всі стилі, які пов'язані з певним елементом? Який з них застосовується зараз? У яких файлах вони розташовані?

Отже, немає нічого простішого! Відкриваємо браузер Google Chrome, відкриваємо наш сайт - джерело питань, клацаємо по потрібному елементу правою кнопкою миші, якщо він видний в контексті сторінки, і вибираємо в контекстному меню пункт «Перегляд коду елемента».

Внизу у нас з'являється консоль з виділеної вкладкою зліва «Elements» і всіма, пов'язаними з елементом стилями справа, де: Computed Styles - це загальні «зведені» стилі, які були призначені елементу з правил css і налаштувань браузера користувача (його середовища оточення), і при цьому вкладка згорнута.

Але нас цікавить вкладка «Styles», розгорнута під нею, в якій по черзі перераховані всі стилі, призначені елементу, а також файли, де дані правила вказані для цього елемента по його типу, id, класу, імені, властивості, атрибуту і т.п . При цьому, якщо css правило перекреслено, значить воно було перевизначити раніше / далі (що дозволяє легко відстежити, яке з css правил є пріоритетним і застосовується в даному випадку до елементу).

Внизу під консоллю розташований рядок, яка показує елемент в ієрархії документа, легко дозволяє переглянути весь список батьківських елементів від кореневого до обраного елемента. Щось на зразок «хлібних крихт».

Html тег непомітний в контексті сторінки? Або потрібно знайти всі теги, наприклад, по певному класу, імені, властивості, типу?

Відкриваємо сайт в Google Chrome, клацаємо правою кнопкою миші, викликаємо контекстне меню, вибираємо « Переглянути джерело сторінки » . Натискаємо поєднання клавіш «CTRL + F» одночасно, вводимо потрібну нам фразу ( наприклад: class \u003d "padding ») І рухаємось по списку запропонованих результатів, попутно переглядаючи всі стилі, пов'язані з потрібними елементами в правій частині сторінки.

Як переглянути код html елемента (елементів), підвантажуваних динамічно (наприклад: по Ajax)

Чекаємо завантаження сторінки в Google Chrome. Виконуємо потрібні дії, щоб спрацював Ajax. Клацаємо правою кнопкою миші по завантажених даними, вибираємо в контекстному меню «Перегляд коду елемента», досліджуємо результат в консолі на вкладці «Elements» зліва.

Перегляд зміни css стилів в режимі реального часу

До речі, також зручно буває спостерігати при необхідності: які стилі призначаються елементу нальоту, наприклад, при прокручуванні галереї та інших подій за таймером. Усі призначені через javascript стилі в реальному часі будуть відображені у властивості style виділеного елемента у вікні на вкладці «Elements».

Інтерактивний перегляд впливу правил css на подання html тегів

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

Змінюємо структуру уявлення html елементів нальоту (прямо в браузері)

Отже, досліджувати структуру web-документа в Google Chrome ми вже навчилися, тепер розглянемо коротко редагування елементів нальоту. Переходимо в консоль будь-яким зручним для нас способом. Знаходимо потрібний елемент у вкладці «Elements», клацаємо по ньому правою кнопкою миші, викликаємо тим самим спливаюче контекстне меню:

• Add attribute - додає атрибут для зазначеного елемента. Як тільки стане активним курсор, починаємо задавати потрібне властивість. наприклад: Напишемо name \u003d "itemImage», яке буде негайно додано до нашого елементу.
• Edit attribute - якщо клацнути по атрибуту елемента правою кнопкою миші, стає доступним пункт editattribute. Клацаємо, редагуємо.

Приклад використання:ми забули пароль, збережений під зірочками в Google Chrome (якщо пароль був збережений в цьому браузері). Клацаємо правою кнопкою миші по елементу з введенням пароля, клацаємо по «Перегляд коду елемента» , в консолі зліва на вкладці Elementsклацаємо по атрибуту type \u003d "password» правою кнопкою миші, лівий клацання мишею по Editattribute,міняємо атрибут type \u003d "password » на type \u003d "text », І ось у нас вже замість зірочок відображається той самий пароль у вигляді тексту.

• Edithtml - клацаємо правою кнопкою миші по елементу в консолі Elements, вибираємо Edithtml,міняємо код на свій смак.
• CopyasHTML - копіюємо потрібну нам порцію HTML для подальшого дослідження, скажімо, в блокноті, або для інших цілей, де нам потрібно застосувати таку саму верстку. Заощаджуємо час.
• CopyXPATH - копіює XPATH представлення структури від кореня батьківського елемента до виділеного елемента.
• Deletenode - якщо потрібно видалити поточний виділений елемент і всі його дочірні з контексту web сторінки, І подивитися результат.
• Wordwrap - зробить подання web сторінки в контексті консолі Elements більш читабельним.

У наступних статтях ми продовжимо розгляд засобів для web-майстра, і зокрема познайомимося з іншими вкладками інструментів для web-майстра в Google Chrome, А також розглянемо налагодження помилок javascript засобами різних браузерів

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

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

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

Що того, що б ви змогли подивитися код сторінки в Chrome необхідно зайти на Вас сайт і виконати наступні дії:

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

У чому різниця між кодом сторінки і просто командою «Подивитися код»

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

Але пояснюючи для звичайного користувача можна розділити ці функції за такими призначеннями:

1. «Переглянути джерело сторінки» необхідно тільки для того, щоб побачити основну комбінацію сторінки. В основному - це структура сайту (без додаткових моделей у вигляді CSS файлів і інших доповнень, які залишилися в папці творця сайту). Дана структура не підходить для створення власної сторінки шляхом «копіювати - вставити», але вона дозволить побачити, що саме програміст робив і в якій послідовності для того, щоб сайт в браузері Google Chrome мав такий зовнішній дизайн.
2. «Подивитися код» виводить детальну структуру з виділенням всіх областей, які зачіпаються на сторінці. Якщо ви наведете на певний код списку - він виділить елемент на сайті, якому належить.
3. Переглянути джерело сторінки відкривається в окремому браузері без можливості його редагувати. Тобто він підходить лише для копіювання і читання коду сайту. Але це не менш корисна функція.
4. «Подивитися код» змінюємо і можна редагувати будь-який елемент так, як буде зручно вам. Звичайно ж - ці всі зміни будуть «жити» до моменту поновлення сторінки, але іноді буває забавно полазити по тим налаштувань і просто зрозуміти для чого необхідно те чи інше значення, і що буде від того, якщо його змінити. Не варто припускати, що такими діями ви щось нашкодите собі або сайту - дані зміни діють тільки в коді вашого Google Chrome і не виходить в мережу.

Розглядаємо питання про те, як подивитися код елемента

Якщо вже й відповідати на таке питання, то напрошується лише варіант з прикладом. Тому що за одну статтю стати людиною, яка буде розуміти цю тематику (веб розробником) - дуже важко, але показати на прикладі, щоб питання було вичерпано - зробити набагато легше.

Функціонал коду елемента дуже широкий, тому беремо один з слів на сайті браузера Google Chrome. Ми побажали розглянути які ключові слова (В коді він буде прописаний, як «keywords») використовувалися для нашого сайту. Для цього виконуємо наступний алгоритм:

Інші способи використання даної функції в браузері Google Chrome

Загалом, продовжуючи відповідати на питання, як подивитися код елемента і навіщо він потрібен, слід перерахувати його функції. А саме завдяки можливості подивитися код елемента будь-якого сайту в браузері Google Chrome ми можемо:

• Побачити структуру сайту починаючи від head ( «шапка сайту») і закінчуючи end (кінцевої командою будь-якої програми);
• Переглянути всі функції сайту, а саме: посилання на інші сайти, додаткові модулі з зовнішніх сайтів і наявність вбудованих лічильників зі збору різноманітної інформації;
• Дізнатися, чи заборонено копіювання з сайту чи ні;
• У коді буде записано майже усі посилання на інші сторінки сайту, а також їх оформлення та подальші дії після кліка по ним.

Це далеко не кінцевий список. Але слід нагадати, що без спеціальних знань - «читати» код сторінки Google Chrome практично неможливо і отримані дані звичайному користувачеві практично не потрібні.

Чи не працює пункт «Перегляд коду елемента»

Слід відразу сказати - кожен сайт буде з відкритим доступом до кодів елементів. Тобто навіть найпопулярніші і дорогі сайти будуть відкриті для перегляду їх коду. Тому, в разі, якщо пункт в браузері Google Chrome не активний або видає помилку має наступні можливі причини:

• Профіль користувача пошкоджений;
• Наявність шкідливого ПЗ на комп'ютері;
• Блокування певним розширенням для збільшення продуктивності (навіть таке може бути).

Виправляємо пошкоджений профіль користувача

щоб створити новий профіль, Необхідно видалити старий з вашого комп'ютера. Для цього виконуємо наступне:

1. Закриваємо Google Chrome і запускаємо вбудований браузер Windows Explorer.
2. Вводимо в адресний рядок наступну команду:% LOCALAPPDATA% \\ Google \\ Chrome \\ User Data \\.
3. Коли каталог відкриється, шукаємо папку «Default» і додаємо до її назви «Backup», щоб вийшло наступне: «Backup Default».
4. Тепер після нового запуску браузера Хром, буде створено новий профіль.

Видаляємо шкідливі ПО або його залишки

Якщо новий профіль не відкрив нам доступ до коду елемента сторінки і ми як і раніше бачимо помилку, слід виконати наступні дії:

1. відкриваємо командний рядок Windows ( «Виконати») і вводимо туди команду «cmd».
2. Вписуємо в рядок наступну команду: RD / S / Q «% WinDir% \\ System32 \\ GroupPolicyUsers».
3. Після підтвердження дії, вбиваємо цю: RD / S / Q «% WinDir% \\ System32 \\ GroupPolicy».
4. Тепер «gpupdate / force» (без лапок).

Якщо все правильно було зроблено, то після перезавантаження комп'ютера Google Chrome буде відкривати код елементів і працездатність браузера буде в нормі.