Всем привет! Хочу с вами поделиться таким дополнением как FireBug, т.к. уже долгое время пользуюсь этим и не буду менять на какое либо другое дополнение Firebug интегрируется с браузером Firefox, чтобы замечательно обогатить инструментарий разработчика. Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript вживую, на любой веб-странице. Скачать с Mozilla.org (устанавливается без перезапуска браузера) Скачать с оф. сайта GetFireBug.com
Firebug - всего в одном клике от Вас, но он никогда не помешает. Вы можете открыть Firebug в отдельном окне, или сделать его полосой внизу браузера. Firebug также дает Вам контроль над выбором сайтов, для которых Вы его используете.
Используйте второй монитор
Освободите Firebug от жестких рамок браузера и отпустите его в полет по всему окну. Если у Вас два монитора - можно работать еще эффективнее с Firebug в одном окне, а Firefox - в другом.
Чтобы открыть Firebug в отдельном окне, войдите в кустомизацию панелей Firefox и добавьте туда кнопку Firebug. Вы можете нажать на эту кнопку или нажать Control+F12 (или Command+F12 для Mac) для быстрого доступа с клавиатуры.
Черный и белый списки
Иногда хочется просто ходить по интернету и не думать о коде и ошибках. Firebug позволяет Вам хранить список сайтов, для которых он должен быть включен, и тех - для которых не должен.
Вы можете посещать сайты в двух режимах: Firebug включен для всех сайтов, кроме "черного" списка, или отключить Firebug для всех сайтов, кроме находящихся в "белом" списке.
F12 - Ваш друг
Без сомнения, клавиша F12 - самый быстрый способ добраться до Firebug. Натренеруйтесь жать эту клавишу каждый раз, когда приходит время отладки. Если у Вас большой монитор, используйте Control+F12 (или Command+F12 для Mac), чтобы открыть Firebug в отдельном окне.
Снимите очки
Если вы обнаружите, что скашиваете глаза, смотря на Firebug, не надо давить носом на монитор, просто сделайте шрифт побольше. Firebug позволяет увеличивать или уменьшать свои шрифты так, чтобы Вам было удобно.
Иногда страницы загружаются очень долго, но почему? Может, Вы написали чересчур много javascript? Забыли сжать изображения? Или серверы рекламодателей отдыхают в сторонке? Firebug покажет все с точностью до файла.
Наблюдайте за развернутым временем загрузки
У каждого файла во вкладке Net есть полоска, которая покажет Вам, когда началась и закончилась загрузка, относительно других файлов. Полоски могут показать Вам то, о чем Вы и понятия не имели.. Например, что javascript файлы загружаются по очереди, и никогда - параллельно. Это поможет Вам оптимизировать порядок файлов на странице, чтобы пользователь проводил меньше времени ожидая показа страницы.
Разбейте по типам
Иногда Вас интересует конкретный тип файлов, наподобие javascript или картинок. Нажимайте кнопки в панели Net для того, чтобы фильтровать список по типам. Кроме того, это замечательный способ вычислять общий размер и время загрузки для конкретного типа файлов.
Кешируется или нет?
Не все сетевые запросы одинаковы: некоторые загружаются из кеша браузера вместо сети. Firebug обозначает запросы из кеша светло-серым, так что Вы можете легко заметить, насколько эффективно Ваш сайт использует кеш для оптимизации времени загрузки страницы.
Анализируйте HTTP-заголовки
HTTP-заголовки содержат всевозможную интересную информацию: mime-тип файла, тип сервера, директивы кеширования, куки и многое другое. Чтобы посмотреть HTTP-заголовки, просто кликните на стрелку слева от каждого запроса, чтобы развернуть их.
Мониторинг XMLHttpRequest
Интересно, что весь Ajax крутится вокруг одной маленькой фишки, которая называется XMLHttpRequest. Мало приятного - отсылать эти запросы, но не видеть ответ сервера. Firebug показывает каждый XMLHttpRequest, и во вкладке Net, и в Console, вместе с текстом, который был отправлен и получен.
Firebug позволяет легко находить HTML-элементы, глубоко закопанные в страницу. А когда Вы находите то, что искали, Firebug дает Вам богатейшую информацию и позволяет редактировать живой HTML.
Просмотр живых исходников
В Firefox есть окно "View Source", но оно не покажет, как HTML выглядит на самом деле, после трансформаций javascript. Вкладка HTML в Firebug показывает как HTML выглядит прямо сейчас.
В дополнение, вкладки справа позволят Вам выяснить свойства индивидуальных элементов, включая правила CSS, которые их стилизуют, размер и позицию в пикселях, и свойства DOM, к которым есть доступ из javascript.
Обрати внимание на подсветку изменений
В любом сайте, основанном на javascript, HTML-элементы все время создаются, удаляются и изменяются. Не правда ли, было бы приятно четко видеть, какие изменения и где происходят?
Firebug подсвечивает изменения HTML желтым цветом, как только они происходят. А если Вы хотите посмотреть еще ближе, есть опция "scroll change into view", автоматически скроллировать страницу к месту изменения, так что Вы не упустите ошибку.
Мгновенное редактирование HTML
Firebug дает замечательный способ делать экспериментальные изменения в HTML и смотреть, как они тут же отражаются на страние. Вы можете создавать, удалить или редактировать HTML-атрибуты и текст, просто кликая на них и табом перемещаясь от одного к другому. Изменения применяются мгновенно, в момент печати.
А если Вы хотите большего, нежели небольшие изменения, Firebug позволяет редактировать HTML-исходник любого элемента. Просто кликните правой кнопкой на элементе и выберите "Edit HTML..." в меню.
Находи элементы мышью
Что-то на странице выглядит не так, и Вы не можете понять, почему. Нет более быстрого способа получить ответ, чем кликнуть на кнопку "Inspect" в панели Firebug, и приготовиться к вознаграждению. При движении мыши по странице, что бы ни было под указателем - оно будет мгновенно раскрыто Firebug, который покажет HTML и CSS.
Ищи и обрящешь
Иногда Вы знаете, что ищите, но не можете увидеть это на странице. Используя поле для быстрого поиска и панели Firebug, Вы можете искать по исходнику HTML и просматривать подсвеченные результаты непосредственно во время печати.
Инспектируй, редактируй, перегружай
Во время инспекции элемента во вкладке HTML, страницу можно перезагрузить, и Firebug продолжит показывать тот же элемент (если он еще существует) после перезагрузки. Это делает простым проверку в Firebug изменений, сделанных во внешнем редакторе.
Копируй исходник
Правый клик на любом элементе, и у Вас есть несколько возможностей копировать различные аспекты элемента в буфер обмена, включая HTML-фрагмент, значение свойства "innerHTML" или XPath-выражение, которое однозначно идентифицирует элемент.
Вкладка CSS в Firebug расскажет Вам все, что нужно знать о стилях на странице, и если Вам что-то не очень нравится, можно сделать изменения, которые отобразятся сразу же.
Инспектируй весь каскад
Без Firebug, Вы можете долго чесать голову, почему заголовки на страницы выходят голубыми, хотя должны быть черными. С Firebug, проинспектируйте проблемный элемент, и Вы в момент увидите CSS, который дает неприятности.
Firebug показывает Вам правила, которые работают в каскаде, стилизуя каждый элемент. Правила отсортированы в возсходящем порядке, и overridden-свойства вычеркнуты. У каждого правила есть ссылка на файл, из которого оно пришло, так что Вы можете просто кликнуть и оказаться на нужной строчке.
Предпросмотр цветов и изображений
В то время, как Вы перемещаете мышь над цветами и адресами картинок во вкладке CSS, всплывает небольшая удобная подсказка с предпросмотром цвета или изображения. Для изображения также показываются размеры, что очень экономит время, особенно если Вам нужно писать CSS для элемента, четко подходящего размером под картинку.
Налаживай, подстраивай и перестраивай
Редактировать CSS никогда не было проще. Кликните любое CSS-свойство - и появится мини текстовый редактор. Во время печати, изменения тут же применяются к странице. Вам захочется поцеловать Firebug(прим. перев. - Firebug дословно "огнежук", выходит поцеловать жука 8{} ), когда он делает автодополнения, согласно списку возможных значений свойства, которое Вы редактируете. Вы можете использовать клавишу Escape, чтобы отменить сделанные изменения, или использовать клавишу Tab, чтобы перемещаться между свойствами.
Чуть выше... Чуть ниже...
Автодополнение замечательно экономит время, когда Вы печатает слова, но что если это числа? Если Вы стараетесь четко выстроить что-то, просто используйте клавиши вверх и вниз, пока Вы редактируете число. Firebug увеличит или уменьшит число на 1, или на 10, если Вы используете клавиши Page-Up, Page-Down.
Учитесь в процессе
Если Вы все еще учите CSS, Firebug - замечательный инструмент, чтобы обогатить словарь. Во время редактирования CSS свойств, используйте клавиши вверх и вниз, чтобы перемещаться между свойствами в алфавитном порядке. Firebug содержит полный словарь ключевых слов CSS в памяти, вместе с некоторыми дополнениями, специфичными для Mozilla..
Вот оно есть, а вот этого нет...
Решение проблемы часто может быть получено просто отключением нескольких CSS-свойств и просмотром страницы без них. Когда Вы перемещаете мышь над свойством, заметьте маленькую круглую иконку слева от него. Клик на ней отключит свойство, а еще один клик - включит его опять.
Инспектируйте любой CSS-файл
В то время как вкладка HTML дает возможность инспектировать CSS только одного элемента, основная вкладка CSS покажет Вам лист стилей целиком. Кликните на списке файлов в панели, и Вы увидете симпатичную картину из всех фалойв стилей, импортированных в страницу.
Копируйте цвета и URL картинок
Для многих из нас, copy-paste - сердце разработки. Firebug делает простым копирование стилей элементов, цветов и ссылок на изображения. Просто кликните правой кнопкой, и появится контекстное меню с командами буфера обмена.
Когда Вы копируете URL картинки, Firebug скопирует абсолютный URL, даже если CSS показывает относительный адрес.
Firebug включает в себя мощный javascript отладчик, который позволяет приостанавливать выполнение в любой момент и анализировать все, что угодно. Если Ваш код подтормаживает, используйте javascript профилировщик, чтобы измерить производительность и быстро найти узкие места.
Находите скрипты с легкостью
Многие веб-вриложения состоят из большого числа файлов, и найти тот, который нужно отлаживать может быть рутинной и скучной задачей. Меню для выбора скриптов в Firebug сортирует и организует файлы в четкий и понятный список, который поможет Вам найти любой файл одним щелчком пальца.
Приостанавливайте выполнение на любой строчке
Firebug позволяет Вам устанавливать брейкпойнты, которые говорят отладчику приостановить выполнение скрипта, когда он дойдет до определенной строки. Пока выполнение приостановлено, Вы можете смотреть значения любых переменных и инспектировать объекты.
Чтобы установить брейкпойнт, кликните на номере любой строки, и там появится красная точка, обозначающая, что брейкпойнт установлен. Кликните на красной точке еще раз, чтобы убрать брейкпойнт.
Приостановить выполнение, только если...
Брейкпойнты могут создать проблемы, если срабатывают слишком часто. Иногда мы хотим приостанавливать выполнение только при выполнении определенных условий. Firebug позволяет Вам устанавливать "условные" брейпкойнты. Они проверяют выражение, которое должно быть истинным, чтобы брейкпойнт сработал.
Чтобы установить условный брейкпойнт, просто кликните правой кнопкой на любом номере строки. Появится пузырь с приглашением ввести javascript-выражение. Вы можете сделать правый клик еще раз в любое время, чтобы сменить выражение, или левый клик, чтобы избавиться от брейкпойнта.
По одному шагу
Когда отладчик приостановил выполнение, Вы можете продолжать скрипт по одному шагу. Это позволяет Вам четко видеть, как выполнение конкретной строчки влияет на переменные и объекты.
Вы также можете продолжить выполнение больше, чем на одну строчку. Выберите в контекстном меню нужной строки "Run to this Line", чтобы продолжить выполнение до этой строчки.
Я прерываюсь при ошибках
Не всегда Вы выбираете отладчик... Иногда отладчик выбирает Вас.. Firebug дает Вам возможность заходить в отладчик автоматически, когда происходит ошибка, так что Вы можете исследовать условия, при которых возникла проблема.
Развернутый стек
Когда отладчик приостанавливает выполнение, Firebug показывает Вам стек вызова, т.е набор вложенных вызовов функций, которые сейчас запущены и ждут возврата.
Стек вызовов представлен компактной полоской кнопок в панели, каждая - с именем функции в стеке. Вы можете кликнуть любую кнопку, чтобы перепрыгнуть на строку, где функция приостановлена и взглянуть на значения локальных переменных изнутри функции.
Наблюдение за выражениями
Во время отладки, часто хочется видеть значение сложных выражений или объектов, которые закопаны в DOM. Firebug позволяет печатать произвольное javascript-выражение, значение которого будет обновляться на каждом шаге отладчика.
Печатая выражения, не забывайте, что можно использовать клавишу Tab для автодополнения свойств объектов.
Подсказки к переменным
Пока выполнение приостановлено, Вы можете перемещать мышь над любыми переменными текущей функции, просматривая всплывающие подсказки со значениями. Это замечательный способ не отрывать глаз от кода и получать ответы прямо во время чтения.
Профилируйте производительность JavaScript
Ваше веб-приложение почти совершенно. Вы проработали все ошибки, сделан стильный дизайн и пользователям оно нравится. Только одна проблема - некоторые возможности подтормаживают, и Вы не уверены, почему..
С Firebug Вам больше не придется удивляться, почему код работает медленно. Используя профилировщик Firebug, Вы можете отделить мух от котлет буквально за секунды.
Чтобы использовать профилировщик, просто зайдите во вкладку Console и кликните кнопку "Profile". Затем попользуйтесь Вашим приложением некоторое время или перезагрузите страницу, и кликните "Profile" еще раз. Вы увидите детальный отчет, который показывает, какие функции были вызвани и сколько времени заняла каждая.
Логирование вызовов функций
Иногда проблемная функция вызывается так много раз, что Вы не можете каждый раз заходить в отладчик. Вы просто хотите знать, когда она вызвана и с какими параметрами.
Чтобы отслеживать все вызовы функции, просто сделайте правый клик на вкладке Script и выберите "Log calls to 'имя функции'". Затем перейдите в консоль и смотрите, как в лог вплывают вызовы...
Перейти прямо на строку 108
Часто Вы хотите перейти четко на нужную строчку вашего скрипта. Нет ничего легче, просто наберите номер строки в окошке быстрого поиска, поставив вначале #, как показано на левом скриншоте.
P.S. FireBug помог мне с дизайном и настройке CSS на моём сайте Удачи в использовании этого дополнения
OfComp.ru - Статьи, обзоры, новости из мира технологий. Мы расскажем и поделимся с вами полезными советами, которые помогут решить проблемы с компьютером.
Сообщение отредактировал VadimW - Воскресенье, 22 Июл 2012, 21:59:22
Насчет повтора, скажу так: Эта тема намного лучше той, больше описания и т.д., согласитесь? :-)
OfComp.ru - Статьи, обзоры, новости из мира технологий. Мы расскажем и поделимся с вами полезными советами, которые помогут решить проблемы с компьютером.
Для меня незаменимым инструментом при создании сайта стало отличное дополнение для браузера Mozilla Firefox - Firebug.
С помощью него очень удобно анализировать код (HTML, CSS и JavaScript) сайта, выполнять "подгонку" элементов, анализировать "тормознутость" включений и многая, многая...