Як використовувати функцію `дослідити елемент` в mozilla firefox

Функція «Дослідити елемент» в Firefox дозволить вам переглянути HTML код веб-сторінки. Активувавши цю функцію, ви зможете змінити HTML і CSS. Експериментуйте, вносячи будь-які зміни, а потім просто поновіть сторінку, щоб повернутися до її первісного вигляду.

кроки

Частина 1 з 2:

дослідження елементів

1. Оновлення Firefox (якщо хочете). Ви не зможете активувати всі функції, які описуються в цій статті, якщо працюєте зі старою версією Firefox. Визначте вашу версію цього браузера, щоб запустити його автоматичне оновлення.

У Firefox 9 і більш ранніх версіях функції «Дослідити елемент» взагалі немає.

Use the Inspect Element in Mozilla Firefox Step 2

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

Use the Inspect Element in Mozilla Firefox Step 3

3. У меню, виберіть «Дослідити елемент». У нижній частині вікна відобразиться панель інструментів, а під нею - подокно з HTML кодом сторінки.

Use the Inspect Element in Mozilla Firefox Step 4

4. Розберіться з панелями інструментів і підвікні. Вибравши «Дослідити елемент», в нижній частині вікна відкриється кілька подокон. Ось їх опис:

Верхній рядок - це панель інструментів. Вона включає кілька вкладок, але нас цікавить найперша (зліва) вкладка «Інспектор» (пофарбована синім кольором). Не перемикайтеся на інші вкладки.

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

Нижче розташовано подокно з HTML кодом сторінки. HTML код вибраного вами елемента буде виділено (синім маркером) і розташований по центру цього подокна.

У подокне справа ви знайдете CSS цієї сторінки.

Use the Inspect Element in Mozilla Firefox Step 5

5. Виберіть інший елемент. Відкривши подокно функції «Дослідити елемент», ви можете запросто вибрати інший елемент одним з трьох способів:

Наведіть курсор миші на рядок HTML коду, щоб виділити відповідний елемент (в Firefox 34+). Клацніть по HTML коду, щоб вибрати цей елемент.

Клацніть по значку «Вибрати елемент зі сторінки». Цей значок розташований на панелі інструментів зліва і має вигляд квадрата з курсором. Наведіть курсор на потрібний елемент (в подокне з HTML кодом), а потім клацніть по елементу, щоб вибрати його.

Use the Inspect Element in Mozilla Firefox Step 6

6. Навігація по HTML коду. Клацніть по будь-якій області в подокне з HTML кодом. Використовуйте клавіші зі стрілками (на клавіатурі), щоб переміщатися по коду (в Firefox 39+). Це корисно в тому випадку, якщо елемент досить маленький.

HTML код, представлений сірим шрифтом, відноситься до елементів, які не відображаються на сторінці. Наприклад, коментарі, вузли (такі як ) І елементи, приховані за допомогою CSS.

Клацніть по стрілці зліва від контейнера, щоб розгорнути або приховати його вміст. Щоб розгорнути всі контейнери, при натисканні на стрілці затисніть Alt або Option.

Use the Inspect Element in Mozilla Firefox Step 7

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

Частина 2 з 2:

Редагування HTML коду

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

Use the Inspect Element in Mozilla Firefox Step 9

2. Двічі клацніть по HTML коду, щоб відредагувати його. Введіть новий код та натисніть Enter, щоб зберегти зміни.

Use the Inspect Element in Mozilla Firefox Step 10

3. Натисніть і утримуйте рядок з налагоджувальними операторами, щоб отримати доступ до додаткових опцій. Цей рядок розташована між панеллю інструментів і шибка з HTML кодом. Ось неповний список додаткових опцій:

«Правити як HTML». Дозволяє редагувати цілий вузол і весь його вміст, а не окремі рядки.

«Копіювати внутрішній HTML». Копіює весь вміст сайту, а опція «Копіювати зовнішній HTML» копіює і вузол (наприклад,

або ).

«Вставити». Відкриються варіанти вставки, наприклад, перед вузлом або після вузла.

«: Hover», «: active», «: focus». Міняють зовнішній вигляд елемента. Точний ефект визначається CSS (редагується в правому подокне).

Use the Inspect Element in Mozilla Firefox Step 11

4. перетягування. Щоб переставити елементи, натисніть і утримуйте HTML код до тих пір, поки не з`явиться пунктирна лінія. Перемістіть її вгору або вниз і відпустіть, коли лінія досягне потрібного положення.

Це працює тільки в FireFox 39+.

Use the Inspect Element in Mozilla Firefox Step 12

5. Закрийте подокна функції «Дослідити елементи». Для цього просто натисніть на значок «X» (в правому дальньому кутку панелі інструментів).

Поради

Ви також можете відкрити панель інструментів таким чином:

Windows. Натисніть «Firefox» - «Розробник» - «Панель інструментів».
Mac OS або Linux. Натисніть «Інструменти» - «Розробник» - «Панель інструментів».

У Firefox 40 ви можете приховати подокно з CSS кодом, щоб розширити подокно з HTML кодом. Для цього на рядку з налагоджувальними операторами знайдіть значок у вигляді стрілки, спрямованої вправо (поруч з лупою). Клацніть по цьому значку, щоб приховати подокно з CSS кодом- ще раз клацніть по значку, щоб розгорнути це подокно.

Ви також можете відредагувати CSS код, але це виходить за рамки даної статті. Тому прочитайте цю статтю.