Як встановити на safari доповнення, схоже на firebug

Firebug - це дуже популярне доповнення для Firefox, яке дозволяє досліджувати і змінювати елементи на веб-сторінці. З його допомогою ви дізнаєтеся, як побудовані веб-сторінки. Він також допоможе з налагодженням власного проекту. Інструменти розробки програмних засобів для Safari надають подібний функціонал. Ви також можете скористатися Firebug Lite для завантаження спрощеної версії Firebug на будь-якому веб-сайті.

кроки

Метод 1 з 2:

Інструменти розробки для Safari

1. Натисніть на меню Safari і виберіть «Налаштування». У Safari включений набір інструментів розробки додатків, подібний до того, що є в Firebug. Щоб з ними можна було працювати, їх потрібно спершу включити.

Get Something Similar to Firebug on Safari Step 2

2. Натисніть на вкладку «Додатки». Таким чином, ви відкриєте розширені опції браузера.

Get Something Similar to Firebug on Safari Step 3

3. Поставте галочку поруч з опцією «Показати меню« Розробка »в рядку меню». Цим ви дозволите меню «Розробка». Воно з`явиться поруч з меню «Закладки».

Get Something Similar to Firebug on Safari Step 4

4. Відкрийте веб-інспектор. Веб-інспектор дуже схожий на Firebug. Ви можете відкрити його в меню «Розробка». Для цього ви також можете натиснути комбінацію клавіш ⌘ Command+⌥ Option+I.

Get Something Similar to Firebug on Safari Step 5

5. Виберіть вкладку «Ресурси», щоб відобразити об`єкти веб-сторінки. До цих об`єктів належать таблиці стилів, файли HTML, скрипти, зображення та інше. Це стандартний вид веб-інспектора.

На панелі навігації зліва ви побачите все папки з вмістом поточної сторінки. Використовуйте ці папки для швидкого переміщення між необхідними ресурсами.

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

За допомогою консолі введіть команди налагодження та обстежте об`єкти jаvascript.

На правій бічній панелі будуть перебувати подробиці про вибраний елемент. Зміни, внесені тут, будуть тут же відображені на сайті.

Get Something Similar to Firebug on Safari Step 6

6. Використовуйте вкладку «Шкала часу» для перегляду активності на сайті. Шкала часу відображає, коли був виконаний шматок коду. Ви також можете перевірити мережевий запит і переглянути події для jаvascript.

У верхній частині вікна «Шкала часу» ви побачите три різні часові лінії. Кожна лінія відповідає за свою категорію тимчасової шкали.

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

Get Something Similar to Firebug on Safari Step 7

7. Використовуйте опцію «Отладчик» для пошуку і виправлення помилок jаvascript. Опція «Отладчик» надає ті ж інструменти налагодження, що і Firebug. Скористайтеся нею для пошуку і виправлення кодів jаvascript. Ви можете встановити місця зупинки коду, щоб сторінка зупинилася на конкретному місці. Це дозволить вам виправляти помилки в jаvascript і зрозуміти, як він працює.

Get Something Similar to Firebug on Safari Step 8

8. Поміняйте призначеного для користувача агента. Багато хто користується доповненням Firebug для зміни поточного призначеного для користувача агента. Призначений для користувача агент - це ідентифікатор, який повідомляє веб-сторінок, яким браузером і операційною системою ви користуєтеся. Це дуже корисна опція для завантаження мобільних сайтів на своєму ноутбуці або для перегляду зовнішнього вигляду сайту при роботі з Internet Explorer на Windows.

Натисніть на меню «Розробка» і виберіть «Користувацький агент».

Виберіть бажаного призначеного для користувача агента зі списку варіантів. Ви можете додати свого призначеного для користувача агента, вибравши опцію «Інший ...» і ввівши потрібний для нього код.

Метод 2 з 2:

Firebug Lite

1. Зайдіть на сайт Firebug Lite. Firebug Lite - це букмарклет, який надає доступ до деяких основних функцій Firebug. Він працює в будь-якому веб-браузері. Ви можете використовувати його для внесення поточних змін в HTML і CSS сторінки. Ви також можете виконувати консольні команди і перевіряти скрипти. Завантажити Firebug Lite можна за цим посиланням: getfirebug.com / firebuglite.

Get Something Similar to Firebug on Safari Step 10

2. Прокрутіть вниз до розділу «Stable channel» (Стабільний канал). Це найбільш функціональна і стабільна версія Firebug Lite. Якщо ви хочете випробувати останні функції, встановіть букмарклет з розділу «Beta channel» (Бета-канал). Бета-версія більш нестабільна, ніж звичайна.

Get Something Similar to Firebug on Safari Step 11

3. Натисніть правою кнопкою миші по посиланню «Firebug Lite». В меню оберіть «Копіювати посилання».

Get Something Similar to Firebug on Safari Step 12

4. Створіть новий букмаклет. Відкрийте меню «Bookmarks» (Закладки) і виберіть «Create Bookmark» (Створити закладку). Ви також можете натиснути ⌘ Command+D. Цим ви відкриєте нове вікно для створення закладки поточної сторінки.

Get Something Similar to Firebug on Safari Step 13

5. Вставте скопійоване посилання в відповідне поле нової закладки. Це змінить закладку на код Firebug Lite. Назвіть як-небудь закладку, наприклад, «Firebug Lite».

Get Something Similar to Firebug on Safari Step 14

6. За допомогою закладки завантажте інтерфейс Firebug Lite. Натисніть на закладку Firebug Lite на будь-якому сайті.

Get Something Similar to Firebug on Safari Step 15

7. Обстежте елементи на сторінці. Натисніть на кнопку «Inspect» (Обстежити) на панелі меню Firebug Lite, а потім виділіть елемент на сторінці. Відповідна частина файлу HTML буде виділена в рамці Firebug Lite.

Get Something Similar to Firebug on Safari Step 16

8. Скористайтеся вкладками на верхній панелі Firebug Lite. Ці вкладки відкривають доступ до різних функцій Firebug Lite. До них відносяться редактор коду HTML і CSS, робота з консоллю і активними скриптами.

Firebug Lite не має доступу до зовнішніх таблиць стилів і скриптів. Це через те, що він написаний в jаvascript, щоб мати можливість завантажуватися на будь-якій сторінці. Якщо вам потрібні ці інструменти, тоді віддайте перевагу інструментам розробки для Safari.