Как установить firebug для chrome. Запросто!

Браузеры -> Браузер Chrome -> Расширения для Google Chrome -> Расширение Firebug Lite для Google Chrome

Расширение Firebug Lite для браузера Google Chrome добавляет возможность работы с исходниками страницы.

Firebug Lite не является заменой для Firebug или Chrome Developer Tools. Это инструмент, который можно использовать в сочетании с Firebug и Chrome Developer Tools. Firebug Lite предоставляет богатое визуальное представление, когда дело доходит до элементов HTML, DOM элементов и блочной модели. Он обеспечивает также некоторые интересные функции, как проверка HTML элементов с помощью мыши, и живое редактирование CSS свойств.

Преимущества по сравнению с bookmarlet Firebug Lite:

• Интеграция с панелью инструментов браузера.
• Возможность активировать Firebug Lite для определенного домена.
• Firebug Lite быстрее загружается, весь код и изображения хранятся в каталоге расширения.

Активировать Firebug Lite очень просто. При первом посещении веб-страницы иконка Firebug будет серой, указывая, что он отключён. Нажатие по иконке активирует Firebug для всех страниц в этой области и значок станет оранжевым.

Расширение Firebug Lite можно скачать из галереи расширений.

Возможно, Вас заинтересуют:

Расширение Firebug Lite для Google Chrome

Польза: 0

(Голосов: 0)

Комментариев пока нет

Чтобы оставить комментарий — зарегистрируйтесь или авторизуйтесь через любимый сервис (ВКонтакте, Одноклассники, Twitter и др.) с помощью OpenID.

Asked9 years, 2 months agoActive9 years, 2 months agoViewed 3k times 2

Can anyone recommend a decent extension to Google Chrome that is similar to Firebug? I did see that there are a couple of similar questions here on SO, but the answers seem to be very dated.

Thanks!

|improve this question

4 Answers 4

active oldest votes6

You can use firebug lite. But Chrome already has more than decent developer tools built in it.

|improve this answer22

It’s built in. Press Ctrl + Shift + I. (Or Tools > Developer in the menu)

|improve this answer5

Chrome’s developer tools has come a long way over the last year. It took a bit to adjust and I kept getting confused so I developed a test page on my box and I set them up side by side, firebug on my left monitor and dev tools on my right.

I went through and figured out exactly how they were different. I realized a little later that Chrome had the same things as Firebug just organized a little differently. Turns out I like Dev tools way more than firebug after I got used to it.

1. I used to have a lot of complaints about Dev tools’ elements section but now it seems to operate almost exactly the same as firebug. I can quickly click to inspect elements and it expands nodes correctly, taking me to the node I want.

2. The resources tab in dev tools blows the net tab in firebug out of the water. I think it’s way better organized. You get a preview of the images in the resources list and you can actually see which elements are transparent because chrome places the checkerboard behind the image (you do get a preview of the image in firebug but only when hovering over the request node, kind of annoying). Also, you can double-click resources and chrome will pop them up in a new tab, VERY nice for when I’m debugging AJAX calls and need to see the formatted exception error in the browser without manually typing in my ajax URLs.

3. Line numbers. Finding line numbers in firebug is very difficult and you can’t do it for some content. Every time you view DOM, CSS, script, etc you always get a comprehensive line number rule on the left. The only place firebug has this is in the script section.

4. Both firebug and dev tools have a comprehensive javascript debugger. However the ability to deactivate break points without removing them in dev tools is very helpful and I use it constantly. You can do this in firebug but you have to untick a box for EVERY breakpoint, irritating.

5. I love that JSONObjects just appear as resources along with everything else instead of having their own section. It makes it easy to see what is going on at a quick glance.

As far as I can tell everything else appears to be the same. I really couldn’t find anything that firebug did better than dev tools. Usually when I thought dev tools lacked a feature of firebug it turned out that it was just in a different place or implemented in a different way. Both have a comprehensive console display. Both support popping the tool into a separate window. Both support multiple instances for multiple tabs. Chrome even has extra features on top of those. The ability to inspect storage like cache, cookies, etc. Dev tools seems to win out for me.

I highly recommend getting familiar with dev tools over using extensions if you want an excellent chrome debugger.

Sorry my answer was so long. I may write a blog sometime doing a more comprehensive comparison.

|improve this answer1

You can add Firebug Lite for Chrome as an extension

|improve this answer

Not the answer you’re looking for? Browse other questions tagged or ask your own question.

lang-js

Современный скоростной браузер Chrome позволяет использовать различные расширения, которые увеличивают  его возможности. Одним из таких расширений является Firebug for Google Chrome. Зачем он нужен? Это дополнение  позволяет легко и просто находить и править нужный код своего сайта. Т.е. запустив это приложение Вы спокойно  мышкой, указываете на какой – либо элемент сайта (ссылку, текст, картинку – всё что угодно), и сразу видите тот кусок программного кода, на который Вы указали мышью.

Т.е. это расширение позволяет видеть, как будет выглядеть внешний вид вашего блога при внесении различных изменений в программный код веб страницы.

При этом, фактически изменения кода не происходит -всё делается в окне открытого браузера.

Пример:

 На картинке мышь направлена на дату 02.11.2011. Это дополнение  выделило это место синим квадратом, а в своём окне он указал (подсветил и выделил синим цветом)  на программный код, который и создал рассматриваемый элемент (в данном случае – дату).

Установка firebug chrome

Открываем браузер Chrome и в правом верхнем углу нажимаем иконку настроек браузера.

Далее выбираем «Дополнительные инструменты» и далее «Расширения».Идем в самый низ страницы и нажимаем на ссылку «Ещё расширения». В  открывшемся окне ищем «Firebug Lite for Goole Chrome»  и нажимаем кнопку «Установить».

Если вдруг его вы не нашли, тогда просто проходите  по  и жмите зеленую кнопку.

Выскочит картинка с вопросом: Установить  Lite for Goole Chrome? Жмём кнопку «Установить». В правом верхнем углу браузера появиться картинка жука.

Он черно-белый пока неактивированный. Как только его активируем он станет цветным.

Всё. наша маленькая программка установлена и готова к работе. Обратите внимание, что «жучок» серенький (неактивный). Для работы с этим расширением достаточно кликнуть на него, «жучок» окраситься в яркий цвет, и «жучок» готов к работе!

Либо вызвать его нажатием F12.

Кстати, имеется и  Firebug для Firefox (как установить и работать рассказано в статье Firebug для Firefox).

Комментарии и ретвиты приветствуются.

Используемые источники:

• https://freebrowsers.ru/google_chrome/extensions/rasshirenie_firebug_lite_dlya_google_chrome
• https://stackoverflow.com/questions/4095352/firebug-for-chrome
• https://delajblog.ru/kak-ustanovit-firebug-chrome