Google Chrome: що таке перегляд вихідного коду сторінки?

У меню Chrome і Chromium є «Переглянути джерело сторінки». Це дозволяє розробникам і користувачам дізнатися, що відбувається під капотом, коли сторінка завантажується в браузері. Це вікно у складні HTML, CSS і JavaScript, які складають веб-сайти, які ви переглядаєте щодня.

Визначення вихідного коду перегляду сторінки в Chrome

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

Перегляд вихідного коду дає змогу побачити кожну складову веб-сторінки (HTML), як вона обробляється (CSS) і взаємодію кодування, яка об’єднує все це (JavaScript). Цей детальний перегляд є безцінним для усунення несправностей. Є проблема з макетом? Перевірка джерела сторінки може виявити відсутній тег. Кнопка не реагує? Розділ JavaScript може містити відповідь.

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

Як отримати доступ до вихідного коду веб-сторінки в Chrome

Є два способи отримати доступ до вихідного коду веб-сторінки в браузерах Chrome і Chromium. Крім того, лише один метод працює для сторінок, захищених правою кнопкою миші. Давайте розпочнемо.

Використання пункту меню «Переглянути джерело сторінки».

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

1. Відкрийте Google Chrome або браузер Chromium, наприклад Edge або Brave .
2. Перейдіть на веб-сайт або сторінку, яка вас цікавить.
3. Клацніть правою кнопкою миші відкриту область, виберіть Переглянути джерело сторінки або натисніть Ctrl + U (Windows) або Command + U (Mac).
   
4. Потім вихідний код буде відображено в новій вкладці, схожій на макет текстового редактора.

Використання параметра URL-адреси 'view-source'

1. Запустіть Google Chrome або браузер Chromium, наприклад Edge або Brave .
2. Перейдіть на веб-сайт або сторінку, яка вас цікавить.
3. В адресному рядку введіть view-source:[тут URL-адреса веб-сторінки] , наприклад:
   view-source:https://www.alphr.com.
   
4. Потім вихідний код буде відображено в новій вкладці, схожій на макет текстового редактора.

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

Не копіюйте та не використовуйте вихідний вміст сторінки безпосередньо

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

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

поширені запитання

З: Чи безпечно змінювати код HTML, CSS і Java у опції «Перевірити»?

A: Ви можете робити все, що завгодно, у режимі перевірки в Chrome або браузері Chromium. Це жодним чином не змінює веб-сайт. Ви лише вносите зміни в режимі реального часу для попереднього перегляду сторінки ліворуч.

З: Чи не є параметр «Переглянути вихідний код» марною тратою часу?

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