Как установить на Safari дополнение, похожее на Firebug

PDF download Загрузить PDF
PDF download Загрузить PDF

Firebug – это очень популярное дополнение для Firefox, которое позволяет исследовать и изменять элементы на веб-странице. С его помощью вы узнаете, как построены веб-страницы. Он также поможет с отладкой собственного проекта. Инструменты разработки программных средств для Safari предоставляют подобный функционал. Вы также можете воспользоваться Firebug Lite для загрузки упрощенной версии Firebug на любом вебсайте.

Метод 1
Метод 1 из 2:

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

PDF download Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e9\/Get-Something-Similar-to-Firebug-on-Safari-Step-1-Version-3.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e9\/Get-Something-Similar-to-Firebug-on-Safari-Step-1-Version-3.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В Safari включен набор инструментов разработки приложений, подобный тому, что есть в Firebug. Чтобы с ними можно было работать, их нужно сперва включить.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/Get-Something-Similar-to-Firebug-on-Safari-Step-2-Version-3.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/Get-Something-Similar-to-Firebug-on-Safari-Step-2-Version-3.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Таким образом, вы откроете расширенные опции браузера.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/Get-Something-Similar-to-Firebug-on-Safari-Step-3-Version-3.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Get-Something-Similar-to-Firebug-on-Safari-Step-3-Version-3.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Поставьте галочку рядом с опцией «Показать меню «Разработка» в строке меню». Этим вы включите меню «Разработка». Оно появится рядом с меню «Закладки».
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/66\/Get-Something-Similar-to-Firebug-on-Safari-Step-4-Version-3.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/66\/Get-Something-Similar-to-Firebug-on-Safari-Step-4-Version-3.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Веб-инспектор очень похож на Firebug. Вы можете открыть его в меню «Разработка». Для этого вы также можете нажать комбинацию клавиш ⌘ Command + ⌥ Option + I .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Get-Something-Similar-to-Firebug-on-Safari-Step-5-Version-3.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Get-Something-Similar-to-Firebug-on-Safari-Step-5-Version-3.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    К этим объектам относятся таблицы стилей, файлы HTML, скрипты, изображения и прочее. Это стандартный вид веб-инспектора.
    • На панели навигации слева вы увидите все папки с содержанием текущей страницы. Используйте эти папки для быстрого перемещения между необходимыми ресурсами.
    • Выбранные ресурсы будут отображены на главной панели. Здесь вы увидите код веб-сайта и прочих файлов. Вы даже можете внести правки в код и тут же увидеть изменения на странице. Эти изменения будут действовать лишь до тех пор, пока вы не закроете сайт.
    • С помощью консоли введите команды отладки и обследуйте объекты JavaScript.
    • На правой боковой панели будут находиться подробности о выбранном элементе. Изменения, внесенные здесь, будут тут же отображены на сайте.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Get-Something-Similar-to-Firebug-on-Safari-Step-6-Version-2.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Get-Something-Similar-to-Firebug-on-Safari-Step-6-Version-2.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Используйте вкладку «Шкала времени» для просмотра активности на сайте. Шкала времени отображает, когда был выполнен кусок кода. Вы также можете проверить сетевой запрос и просмотреть события для JavaScript.
    • В верхней части окна «Шкала времени» вы увидите три разные временные линии. Каждая линия отвечает за свою категорию временной шкалы.
    • На левой панели отображаются различные события, происходящие на временной шкале. Время каждого действия отобразится в главном окне.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/Get-Something-Similar-to-Firebug-on-Safari-Step-7-Version-3.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-7-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/Get-Something-Similar-to-Firebug-on-Safari-Step-7-Version-3.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-7-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Опция «Отладчик» предоставляет те же инструменты отладки, что и Firebug. Воспользуйтесь ею для поиска и исправления кодов JavaScript. Вы можете установить места остановки кода, чтобы страница остановилась на конкретном месте. Это позволит вам исправлять ошибки в JavaScript и понять, как он работает.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1d\/Get-Something-Similar-to-Firebug-on-Safari-Step-8-Version-3.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-8-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/Get-Something-Similar-to-Firebug-on-Safari-Step-8-Version-3.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-8-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Многие пользуются дополнением Firebug для смены текущего пользовательского агента. Пользовательский агент – это идентификатор, который сообщает веб-страницам, каким браузером и операционной системой вы пользуетесь. Это очень полезная опция для загрузки мобильных сайтов на своем ноутбуке или для просмотра внешнего вида сайта при работе с Internet Explorer на Windows. [1]
    • Нажмите на меню «Разработка» и выберите «Пользовательский агент».
    • Выберите желаемого пользовательского агента из списка вариантов. Вы можете добавить своего пользовательского агента, выбрав опцию «Другой…» и введя нужный для него код.
    Реклама
Метод 2
Метод 2 из 2:

Firebug Lite

PDF download Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/Get-Something-Similar-to-Firebug-on-Safari-Step-9-Version-2.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/Get-Something-Similar-to-Firebug-on-Safari-Step-9-Version-2.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Firebug Lite – это букмарклет, который предоставляет доступ к некоторым основным функциям Firebug. Он работает в любом веб-браузере. Вы можете использовать его для внесения текущих изменений в HTML и CSS страницы. Вы также можете выполнять консольные команды и проверять скрипты. Скачать Firebug Lite можно по этой ссылке: getfirebug.com/firebuglite . [2]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3f\/Get-Something-Similar-to-Firebug-on-Safari-Step-10-Version-2.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3f\/Get-Something-Similar-to-Firebug-on-Safari-Step-10-Version-2.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Это наиболее функциональная и стабильная версия Firebug Lite. Если вы хотите опробовать последние функции, установите букмарклет из раздела «Beta channel» (Бета-канал). Бета-версия более нестабильна, чем обычная.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e7\/Get-Something-Similar-to-Firebug-on-Safari-Step-11.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e7\/Get-Something-Similar-to-Firebug-on-Safari-Step-11.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-11.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В появившемся меню выберите «Копировать ссылку».
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b8\/Get-Something-Similar-to-Firebug-on-Safari-Step-12.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b8\/Get-Something-Similar-to-Firebug-on-Safari-Step-12.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-12.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Откройте меню «Bookmarks» (Закладки) и выберите «Create Bookmark» (Создать закладку). Вы также можете нажать ⌘ Command + D . Этим вы откроете новое окно для создания закладки текущей страницы.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6f\/Get-Something-Similar-to-Firebug-on-Safari-Step-13.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6f\/Get-Something-Similar-to-Firebug-on-Safari-Step-13.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-13.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Вставьте скопированную ссылку в соответствующее поле новой закладки. Это изменит закладку на код Firebug Lite. Назовите как-нибудь закладку, например, «Firebug Lite».
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/86\/Get-Something-Similar-to-Firebug-on-Safari-Step-14.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/86\/Get-Something-Similar-to-Firebug-on-Safari-Step-14.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-14.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Нажмите на закладку Firebug Lite на любом сайте.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/Get-Something-Similar-to-Firebug-on-Safari-Step-15.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/Get-Something-Similar-to-Firebug-on-Safari-Step-15.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-15.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Нажмите на кнопку «Inspect» (Обследовать) на панели меню Firebug Lite, а затем выделите элемент на странице. Соответствующая часть файла HTML будет выделена в рамке Firebug Lite.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/Get-Something-Similar-to-Firebug-on-Safari-Step-16.jpg\/v4-460px-Get-Something-Similar-to-Firebug-on-Safari-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/Get-Something-Similar-to-Firebug-on-Safari-Step-16.jpg\/v4-728px-Get-Something-Similar-to-Firebug-on-Safari-Step-16.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Эти вкладки открывают доступ к различным функциям Firebug Lite. К ним относятся редактор кода HTML и CSS, работа с консолью и активными скриптами.
    • Firebug Lite не имеет доступа к внешним таблицам стилей и скриптам. Это из-за того, что он написан в JavaScript, чтобы иметь возможность загружаться на любой странице. Если вам нужны эти инструменты, тогда отдайте предпочтение инструментам разработки для Safari.
    Реклама

Дополнительные статьи

Как
включить встроенный VPN в Opera
Как
установить конкретную страну в браузере Tor
Как
принудительно обновить страницу в браузере
Как
подключиться к прокси–серверу
Как
сделать Google поисковиком по умолчанию
Как
увеличить масштаб страницы браузера
Как
изменить языковые настройки вашего браузера
Как
очистить кэш браузера
Как
изменить домашнюю страницу в Microsoft Edge
Как
добавить закладку в Safari
Как
сохранить flash анимацию с сайта
Как
отключить JavaScript
Как
отключить блокировщик рекламы
Как
очистить кэш и куки
Реклама

Источники

  1. ↑ http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/
  2. ↑ http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/

Об этой статье

Эту страницу просматривали 4688 раз.

Была ли эта статья полезной?

Реклама