Firebug

С этим уроком также смотрят
  • Обучающий курс по лучшим расширениям для Mozilla Firefox®

    – 0– 5586

  • Обучающий курс по лучшим расширениям для Mozilla Firefox®

    – 2– 3613

  • Обучающий курс по лучшим расширениям для Mozilla Firefox®

    – 1– 4409

Подробный обзор плагинов и расширений для упрощения жизни пользователей браузера Mozilla Firefox®.

Посмотрите, наверняка найдете для себя какое-то полезное дополнение или плагин для Firefox®!

  • Обзор расширений Mozilla Firefox

Подробный обзор плагинов и расширений для упрощения жизни пользователей браузера Mozilla Firefox.

Посмотрите, наверняка найдете для себя какое-то полезное дополнение или плагин для FireFox!

Обновлен: 4 июня 2012

Обучающий курс по лучшим расширениям для Mozilla Firefox®,
Полезные программы и утилиты

Loading the player...
Скачать урок
Текст урока

Как работать с Firebug для Firefox®


Firebug предназначен для инспекции ошибок веб-страниц: разметки HTML, стилей CSS, сценариев JavaScript. Можно оценить проблемные места при загрузке страницы в браузер. Шесть основных режимов отладки: HTML, CSS, JavaScript, консоль, сеть и DOM. Для каждого из режимов предусмотрена в главном меню веб-отладчика своя собственная вкладка. Firebug устанавливается как расширение (plugin) для Mozilla Firefox®.

После установки в правом нижнем углу браузера появится иконка жука, кликнув на который, внизу обозревателя откроется специальное окно.

Режим DOM: объектная модель документа - это то, во что браузер внутри себя превращает загруженную веб-страницу. DOM - это программный интерфейс, позволяющий сценариям JavaScript производить изменения в видимом окне браузера. Окно этого режима Firebug содержит иерархию объектов веб-страницы и позволяет ими манипулировать в реальном времени на лету.

Стоит обратить и на подсветку изменений. В любом сайте, основанном на javascript, HTML-элементы все время создаются, удаляются и изменяются. Плагин Firebug подсвечивает изменения HTML желтым цветом, как только они происходят. А если Вы хотите посмотреть еще ближе, есть опция "scroll change into view", автоматически скроллировать страницу к месту изменения, так что Вы не упустите ошибку.

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

А если Вы хотите большего, нежели небольшие изменения, Firebug позволяет редактировать HTML-исходник любого элемента. Просто кликните правой кнопкой на элементе и выберите "Edit HTML..." в меню.

Если Что-то на странице выглядит не так, и Вы не можете понять почему, то нет более быстрого способа получить ответ, чем кликнуть на кнопку "Inspect" в панели Firebug, и приготовиться к вознаграждению. При движении мыши по странице, что бы ни было под указателем - оно будет мгновенно раскрыто Firebug, который покажет HTML и CSS.

Вкладка CSS в Firebug расскажет Вам все, что нужно знать о стилях на веб-страницах, и если Вам что-то не нравится - можно сделать изменения, которые сразу же отразятся на странице.

Вкладка Layout визуально разбивает каждый контейнер в контейнерной модели и дает ширину каждого ребра. Дополнительно, она показывает ширину и высоту внутреннего контейнера, и сдвиги по осям x и y относительно родителя.

У каждого файла во вкладке Сеть есть полоска, которая покажет Вам, когда началась и закончилась загрузка, относительно других файлов. Полоски могут показать Вам то, о чем Вы и понятия не имели.. Например, что javascript файлы загружаются по очереди, и никогда - параллельно. Это поможет Вам оптимизировать порядок файлов на странице, чтобы пользователь проводил меньше времени, ожидая показа страницы.

Объектная модель документа - громадная иерархия объектов и функций, доступных из javascript. Firebug позволяет Вам быстро находить DOM-объекты, и на лету редактировать их. Объектная модель документа (Document Object Model, DOM) - громадная иерархия объектов и функций, доступных из javascript. Firebug позволяет Вам быстро находить DOM-объекты, и на лету редактировать их.

Есть много различных типов объектов, и Firebug делает все возможное, чтобы визуально подчеркнуть различия и дать побольше информации. Когда это удобно, объекты включают в себя краткое описание содержимого, так что происходящее видно без необходимости делать клик. Объекты кодируются цветом, так что HTML-элементы, числа, строки, функции, массивы, объекты и null легко различить.

Не забывайте, редактор DOM – это командная строка javascript в миниатюре (firebug javascript console). Это означает, что можно написать любое javascript-выражение. Когда Вы нажмете Enter, оно будет вычислено, и результат будет присвоен переменной.

Настроек и функций у данного расширения очень много и в этой краткой инструкции мы рассказали лишь о самых основных. У плагина Firebug (addon) также есть русскоязычный сайт, который именно ему и посвящен firebug.ru

Комментарии (0)

Оглавление
1. All-in-one Sidebar 3:32 6 18743
2. Colorful tabs — цветные вкладки FireFox 1:12 0 8917
3. Fast Video Download 1:19 2 10566
4. Firebug 4:26 0 9854
5. FireFox Showcase 1:39 0 4735
6. FireFTP 1:53 1 8687
7. Flagfox 2:49 1 3537
8. iMacros — автоматизация действий 6:32 4 32804
9. Переводчик ImTranslator для FireFox 1:26 1 18267
10. Minimize to tray 0:27 1 4083
11. Плагин Noscript 2:50 3 7629
12. PDF Download 0:38 0 5648
13. Speed Dial и Fast Dial 1:59 4 37390
14. WebDeveloper 5:29 0 5232
15. WikiLook 0:51 0 2421
16. Xmarks 2:44 1 6373
17. Password Hasher 1:51 0 3274
18. TabRenamizer 2:39 2 3643
19. ScribeFire Blog Editor 2:31 2 2507
20. FEBE — создаем резервную копию FireFox 2:06 1 5608
21. Firefox Universal Uploader 1:06 0 3359
22. FlashGot 2:22 1 11776
23. Adblock Plus 3:08 0 4138
24. Video Download Helper 4:08 1 15600
25. Personas Plus 2:21 0 2873
26. Greasemonkey 2:25 0 3972
27. Fox Tab 3:04 0 7748
28. DownThemAll! 3:42 0 3927
29. Download Statusbar 2:21 0 3037
30. Stylish 2:09 1 4409
31. WOT 2:31 2 3613
32. 1-Click YouTube Video Download 1:20 0 5586
Яндекс цитирования
Нажмите нравится, чтобы читать "TeachVideo.ru" в facebook