Як в Гугл Хром відкрити код сторінки і чому це повинен знати кожен? (браузери)

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

Як подивитися код сторінки в хром

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

Як відкрити код сторінки в новому вікні Гугл Хром

Для початку розглянемо, як отримати інформацію в окремому вікні. Зробіть наступні кроки:

Перейдіть на сайт, який вам найбільш цікавий. Пам'ятайте, що ті портали, що Ви відвідуєте найчастіше, вже додані в Експрес-панель Гугл Хрому.
Тисніть правою кнопкою мишки в будь-якому місці ресурсу.
Натисніть на посилання Подивитися код сторінки.

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

Щоб відкрити вихідний код сторінки в Google Chrome, можна використовувати гарячі клавіші. Перейдіть на цікаву для сторіночку і тисніть на комбінацію CTRL + U. Ще один спосіб - вставити в адресний рядок посилання view-source: адреса сайту.

Зазначені методи універсальні і будуть працювати не тільки в Гугл Хром, але і в інших веб-провідниках. Після входу можна знайти потрібну інформацію шляхом пошуку. Для цього наберіть комбінацію Ctrl + F, а після ввести шукане слово або команду.

Перегляд в тому ж вікні Гугл Хром

Тепер розглянемо, як подивитися код сторінки в Гугл хром без переходу на нову вкладку для більшої наочності. Алгоритм дій такий:

увійдіть цікавить сайт;
клікніть в будь-якому місці на праву кнопку мишки;
виберіть посилання Подивитися код.

Існує ще один варіант:

тисніть на три точки вгорі;
в розділі додаткових інструментів увійдіть в Інструменти розробника.

З лівого боку залишається сайт, а праворуч приводиться його внутрішня складова. Тут передбачено кілька розділів. Так, в секції Source можна глянути на вміст деяких файлів, а саме шрифти, скрипти і картинки. У розділі Security наводяться дані по перевірці сертифіката ресурсу. Якщо перейти у вкладку Audits, можна перевірити викладений на хостингу сайту. Також доступні і інші розділи - Console, Elements і т. Д. Пошук в наведених полях здійснюється таким же чином - за допомогою комбінації Ctrl + F.

Навіщо він може знадобитися

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

Перегляд мета-тегів свого або чужого веб-ресурсу в Гугл Хром. Людина може відкрити код і побачити дані, за якими просувається сайт. Це дуже зручно для веб-майстрів, які планують обійти конкурентів.
Перегляд наявності на сайті лічильників, скриптів або інших даних.
Уточнення параметрів елементів - розміру, кольору, шрифтів і т. Д.
Пошук шляху до фотографій і інших елементів, які знаходяться на сторінці.
Вивчення посилань і їх копіювання. При бажанні можна відразу відкрити потрібний код.
Пошук проблем з кодом і його виправлення. Це корисно при оптимізації сайту, зміні стилів, шрифту або виправлення помилок в коді.

Іншими словами, за допомогою исходника можна відкрити подібну інформацію по "начинці" сайту, побачити його "скелет", внести зміни (якщо це потрібно) і протестувати їх. Найчастіше інструмент розробників в Гугл Хром застосовується для усунення помилок. Для цього достатньо відкрити код і перейти на вкладку Console. Система показує елемент сторінки в Гугл Хром, який необхідно поміняти. Сервіс швидко і точно визначає помилки, що дозволяє уникнути установки більш складних програм.

Як змінити код сторінки в Гугл Хром

За допомогою даного інструменту можна не тільки відкрити, але й змінити код сторінки в Гугл Хром. Для цього відкрийте потрібну сторінку і перейдіть в режим розробника за принципом, який розглянуто вище. Далі можна вносити правки в HTML і CSS, спостерігаючи за змінами, що відбулися в режимі реального часу. Для зручності можна знайти потрібний елемент на інтернет-сайті, натиснути на нього, а в відобразиться з правого боку вікні вносити зміни. Це зручно і наочно.

Можливі проблеми та шляхи їх вирішення

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

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

Також спробуйте зробити такі кроки на Гугл Хром:

Увійдіть шляхом C: UsersІмя ПользователяAppDataLocalGoogleChromeUser DataDefaultLocal Storage.
Видаліть chrome-devtools_devtools_0.localstorage, а також chrome-devtools_devtools_0.localstorage-journal.
Вийдіть з браузера за допомогою Ctrl + Shift + Q увійдіть в браузер.

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

підсумки

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