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

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

Метод 1

Метод 1 из 2:

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

Загрузить PDF

В Safari включен набор инструментов разработки приложений, подобный тому, что есть в Firebug. Чтобы с ними можно было работать, их нужно сперва включить.
Таким образом, вы откроете расширенные опции браузера.
Поставьте галочку рядом с опцией «Показать меню «Разработка» в строке меню». Этим вы включите меню «Разработка». Оно появится рядом с меню «Закладки».
Веб-инспектор очень похож на Firebug. Вы можете открыть его в меню «Разработка». Для этого вы также можете нажать комбинацию клавиш ⌘ Command+⌥ Option+I.
5
Выберите вкладку «Ресурсы», чтобы отобразить объекты веб-страницы. К этим объектам относятся таблицы стилей, файлы HTML, скрипты, изображения и прочее. Это стандартный вид веб-инспектора.
- На панели навигации слева вы увидите все папки с содержанием текущей страницы. Используйте эти папки для быстрого перемещения между необходимыми ресурсами.
- Выбранные ресурсы будут отображены на главной панели. Здесь вы увидите код веб-сайта и прочих файлов. Вы даже можете внести правки в код и тут же увидеть изменения на странице. Эти изменения будут действовать лишь до тех пор, пока вы не закроете сайт.
- С помощью консоли введите команды отладки и обследуйте объекты JavaScript.
- На правой боковой панели будут находиться подробности о выбранном элементе. Изменения, внесенные здесь, будут тут же отображены на сайте.
6
Используйте вкладку «Шкала времени» для просмотра активности на сайте. Шкала времени отображает, когда был выполнен кусок кода. Вы также можете проверить сетевой запрос и просмотреть события для JavaScript.
- В верхней части окна «Шкала времени» вы увидите три разные временные линии. Каждая линия отвечает за свою категорию временной шкалы.
- На левой панели отображаются различные события, происходящие на временной шкале. Время каждого действия отобразится в главном окне.
Опция «Отладчик» предоставляет те же инструменты отладки, что и Firebug. Воспользуйтесь ею для поиска и исправления кодов JavaScript. Вы можете установить места остановки кода, чтобы страница остановилась на конкретном месте. Это позволит вам исправлять ошибки в JavaScript и понять, как он работает.
8
Поменяйте пользовательского агента. Многие пользуются дополнением Firebug для смены текущего пользовательского агента. Пользовательский агент – это идентификатор, который сообщает веб-страницам, каким браузером и операционной системой вы пользуетесь. Это очень полезная опция для загрузки мобильных сайтов на своем ноутбуке или для просмотра внешнего вида сайта при работе с Internet Explorer на Windows.^{[1]XИсточник информации}
- Нажмите на меню «Разработка» и выберите «Пользовательский агент».
- Выберите желаемого пользовательского агента из списка вариантов. Вы можете добавить своего пользовательского агента, выбрав опцию «Другой…» и введя нужный для него код.
Реклама

Метод 2

Метод 2 из 2:

Firebug Lite

Загрузить PDF

Firebug Lite – это букмарклет, который предоставляет доступ к некоторым основным функциям Firebug. Он работает в любом веб-браузере. Вы можете использовать его для внесения текущих изменений в HTML и CSS страницы. Вы также можете выполнять консольные команды и проверять скрипты. Скачать Firebug Lite можно по этой ссылке: getfirebug.com/firebuglite.^{[2]XИсточник информации}
Это наиболее функциональная и стабильная версия Firebug Lite. Если вы хотите опробовать последние функции, установите букмарклет из раздела «Beta channel» (Бета-канал). Бета-версия более нестабильна, чем обычная.
В появившемся меню выберите «Копировать ссылку».
Откройте меню «Bookmarks» (Закладки) и выберите «Create Bookmark» (Создать закладку). Вы также можете нажать ⌘ Command+D. Этим вы откроете новое окно для создания закладки текущей страницы.
Вставьте скопированную ссылку в соответствующее поле новой закладки. Это изменит закладку на код Firebug Lite. Назовите как-нибудь закладку, например, «Firebug Lite».
Нажмите на закладку Firebug Lite на любом сайте.
Нажмите на кнопку «Inspect» (Обследовать) на панели меню Firebug Lite, а затем выделите элемент на странице. Соответствующая часть файла HTML будет выделена в рамке Firebug Lite.
8
Воспользуйтесь вкладками на верхней панели Firebug Lite. Эти вкладки открывают доступ к различным функциям Firebug Lite. К ним относятся редактор кода HTML и CSS, работа с консолью и активными скриптами.
- Firebug Lite не имеет доступа к внешним таблицам стилей и скриптам. Это из-за того, что он написан в JavaScript, чтобы иметь возможность загружаться на любой странице. Если вам нужны эти инструменты, тогда отдайте предпочтение инструментам разработки для Safari.
Реклама