<
  • Главная
Статьи

Основи елемента Inspect

  1. Що таке Inspect Element або Developer Tools
  2. Запуск інспектора і пошук коду
  3. Редагування та налагодження коду в Inspect Element
  4. Легко знаходите помилки у себе на сайті

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

Що таке Inspect Element або Developer Tools

Сучасні браузери на кшталт Google Chrome і Mozilla Firefox мають вбудовані інструменти, які дозволяють веб-розробникам відслідковувати помилки. Ці інструменти показують HTML, CSS і код JavaScript сторінки, а також те, як браузер працює з цим кодом. За допомогою цих інструментів ви можете подивитися як ваш сайт буде виглядати після деяких правок, при цьому не вносячи зміни в сам сайт.

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

І це лише мала частина того, що можна зробити з таким потужним інструментом як Inspects. У цій статті ми розглянемо його роботу в Google Chrome, оскільки це наш улюблений браузер.

Запуск інспектора і пошук коду

Ви можете запустити Інспектор коду за допомогою поєднання клавіш Ctrl + Shift + I. У якості альтернативи можете клацнути по будь-якого місця сторінки і вибрати його з меню браузера.

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

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

Ви також можете просто навести курсор на будь-який елемент на сторінці, натиснути правою мишею і вибрати інспектування. Обраний елемент буде виділений у вихідному коді.

Редагування та налагодження коду в Inspect Element

Обидва вікна в Інспектора редагуються. Ви можете двічі клацнути в будь-якому місці і редагувати код.

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

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

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

Легко знаходите помилки у себе на сайті

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

Наприклад, якщо ви є користувачем OptinMonster, який дивується чому його optin не завантажується, то ви можете з легкістю знайти помилку «your page slug does not match". Якщо ваш sharebar не працював коректно, то ви можете помітити, що там є помилка JavaScript. Інструменти начебто консолі Інспектори і SupportAlly допоможуть вам отримати більш ефективну підтримку, оскільки хлопці з цих служб люблять клієнтів, які проявляють якусь ініціативу, щоб самим розібратися в проблемах, які виникли, а також надають максимум деталей.

Наша спеціальність - розробка та підтримка сайтів на WordPress. Контакти для безкоштовної консультації - [email protected] , +371 29394520



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью