Як встановити на Safari Доповнення, схоже на Firebug

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

Метод1З 2:
Інструменти розробки для Safari

  1. Натисніть на меню Safari і виберіть "Налаштування". у Safari включений набір інструментів розробки додатків, подібний до того, що є в Firebug. Щоб з ними можна було працювати, їх потрібно спершу включити.
  2. Натисніть на вкладку "Доповнення". Таким чином, ви відкриєте Розширені опції браузера.
  3. Поставте галочку поруч з опцією «показати меню «розробка» в рядку меню». цим ви включите меню «Розробка». Воно з'явиться поруч з меню»Закладки".
  4. Запустіть веб-інспектор. веб-інспектор дуже схожий на Firebug. Ви можете відкрити його в меню "Розробка". Для цього ви також можете натиснути комбінацію клавіш Command + Option + I .
  5. Виберіть вкладку «ресурси», щоб відобразити об'єкти веб-сторінки. до цих об'єктів відносяться таблиці стилів, файли HTML, скрипти, зображення та інше. Це стандартний вид веб-Інспектора.
    • На панелі навігації зліва ви побачите всі папки з вмістом поточної сторінки. Використовуйте ці папки для швидкого переміщення між необхідними ресурсами.
    • Вибрані ресурси будуть відображені на головній панелі. Тут ви побачите код веб-сайту та інших файлів. Ви навіть можете внести правки в код і тут же побачити зміни на сторінці. Ці зміни будуть діяти лише до тих пір, поки ви не закриєте сайт.
    • За допомогою консолі введіть команди налагодження і обстежте об'єкти JavaScript.
    • На правій бічній панелі будуть знаходитися подробиці про вибраний елемент. Зміни, внесені тут, будуть тут же відображені на сайті.
  6. Використовуйте вкладку «Шкала часу» для перегляду активності на сайті. Шкала часу відображає, коли був виконаний шматок коду. Ви також можете перевірити мережевий запит і переглянути події для JavaScript.
    • У верхній частині вікна «Шкала часу " ви побачите три різні часові лінії. Кожна лінія відповідає за свою категорію часової шкали.
    • На лівій панелі відображаються різні події, що відбуваються на часовій шкалі. Час кожної дії відобразиться в головному вікні.
  7. Використовуйте опцію «відладчик» для пошуку і виправлення помилок JavaScript. опція "відладчик" надає ті ж інструменти налагодження, що і Firebug. Скористайтеся нею для пошуку і виправлення кодів JavaScript. Ви можете встановити місця зупинки коду, щоб сторінка зупинилася на конкретному місці. Це дозволить вам виправляти помилки в JavaScript і зрозуміти, як він працює.
  8. Поміняйте користувача агента. багато хто користується доповненням Firebug для зміни поточного користувача агента. Користувальницький агент-це ідентифікатор, який повідомляє веб-сторінкам, яким браузером і операційною системою Ви користуєтеся. Це дуже корисна опція для завантаження мобільних сайтів на своєму ноутбуці або для перегляду зовнішнього вигляду сайту при роботі з Internet Explorer на Windows. [1]
    • Натисніть на меню «розробка» і виберіть «призначений для користувача агент».
    • Виберіть бажаного користувача агента зі списку варіантів. Ви можете додати свого користувача агента, вибравши опцію " інший ... » і ввівши потрібний для нього код.

Метод2З 2:
Firebug Lite

  1. Зайдіть на сайт Firebug Lite. Firebug Lite – це букмарклет, який надає доступ до деяких основних функцій Firebug. Він працює в будь-якому веб-браузері. Ви можете використовувати його для внесення поточних змін в HTML і CSS сторінки. Ви також можете виконувати консольні команди та перевіряти скрипти. Завантажити Firebug Lite можна за цим посиланням: getfirebug.com/firebuglite . [2]
  2. Прокрутіть вниз до розділу " Stable channel "(стабільний канал). це найбільш функціональна і стабільна версія Firebug Lite. Якщо ви хочете випробувати останні функції, встановіть букмарклет з розділу "Beta channel" (Бета-канал). Бета-версія більш нестабільна, ніж звичайна.
  3. Натисніть правою кнопкою миші по посиланню «Firebug Lite». у меню виберіть «Копіювати посилання».
  4. Створіть новий букмаклет. відкрийте меню " Bookmarks "(Закладки) і виберіть «Create Bookmark» (створити закладку). Ви також можете натиснути Command + D . Цим ви відкриєте нове вікно для створення закладки поточної сторінки.
  5. Вставте скопійоване посилання у відповідне поле нової закладки. це змінить закладку на код Firebug Lite. Назвіть як-небудь закладку, наприклад « "Firebug Lite".
  6. За допомогою закладки завантажте інтерфейс Firebug Lite. натисніть на закладку Firebug Lite на будь-якому сайті.
  7. Обстежте елементи на сторінці. натисніть на кнопку "Inspect" (обстежити) на панелі меню Firebug Lite, а потім виділіть елемент на сторінці. Відповідна частина файлу HTML буде виділена в рамці Firebug Lite.
  8. Скористайтеся вкладками на верхній панелі Firebug Lite. ці вкладки відкривають доступ до різних функцій Firebug Lite. До них відносяться редактор коду HTML і CSS, робота з консоллю і активними скриптами.
    • Firebug Lite не має доступу до зовнішніх таблиць стилів і скриптів. Це тому, що він написаний в JavaScript, щоб мати можливість завантажуватися на будь-якій сторінці. Якщо вам потрібні ці інструменти, тоді віддайте перевагу інструментам розробки для Safari.

Ще почитати: