Firebug-подобный отладчик для Google Chrome

278

Есть ли что-то вроде Firebug, которое вы можете использовать в Google Chrome?

Основные функции, которые я хотел бы:

  • Проверить исходный код HTML (выбрать элементы, удалить их и т. Д.)
  • проверить значения CSS (встроенное решение как-то странно)
html css google-chrome debugging firebug Себастьян Хойц
источник
9
Поскольку Chrome теперь поддерживает расширения, можем ли мы вернуться к этому, поскольку многие из существующих ответов теперь технически неверны. Мы должны обновить этот ответ вместо того, чтобы начинать новый.
Натан Куп
3
@Nathan Koop: Я могу ошибаться, но я не думаю, что система расширений Chrome достаточно мощная, чтобы допускать что-то вроде Firebug.
Саша Чедыгов
1
проверить эту ссылку , чтобы получить поджигатель в браузере: getfirebug.com/releases/lite/chrome
технарь

Ответы:

243

В Chrome уже встроен инструмент, похожий на Firebug. Просто щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить элемент» в меню. В Chrome есть графический инструмент для отладки (как в Firebug), поэтому вы можете отлаживать JavaScript. Он также хорошо проверяет CSS и может даже изменить рендеринг CSS на лету.

Для получения дополнительной информации см. Https://developers.google.com/chrome-developer-tools/.

Дмитрий Торба
источник
19
++ Это достаточно для устранения проблем, связанных с Chrome. Если я хочу более глубокий самоанализ, я могу сделать это с Firebug. Теперь в новом режиме разработчика IE8 все основные браузеры имеют встроенные режимы разработки. Хорошие времена.
оружие
1
Ах, мне понадобилось немного времени, чтобы найти его, но там есть и функция редактирования html Firebug, в том же месте, где вы можете редактировать CSS, панель инструментов разработчика, дважды щелкнуть элемент, ввести текст и нажать Enter, и там Вы идете, HTML отредактирован.
Kzqai
4
Инструменты разработчика Chrome (ctrl + shift + j) поддерживают отладку Javascript, как Firebug. Нажмите на вкладку «Сценарии», затем на второй значок внизу (> =), который имеет всплывающую подсказку «Показать консоль». Оттуда вы можете выполнять команды Javascript, такие как консоль Firebug.
Пьер-Антуан ЛаФайет
1
Помните, что в некоторых системах на основе Linux она не устанавливается автоматически, поэтому вам нужно установить ее вручную: sudo apt-get install chromium-browser-inspector
Мануэль
1
В текущей версии dev 4.0.xxxx есть набор инструментов для разработчиков. Раньше я знал о проверке элементов, но без панели «Нет» это было недостаточно. Но теперь есть панель «ресурсы», которая, кажется, работает довольно хорошо и имеет все те же фильтры, что и firebug (скрипты, xhr, изображения и т. Д.). Я пользуюсь сборкой Dev уже неделю, и она кажется довольно стабильной. Наконец-то я установил браузер по умолчанию на chrome - теперь это и мой браузер для разработчиков! :)
Марк Миллер
37

Firebug Lite поддерживает проверку элементов HTML, вычисленный стиль CSS и многое другое. Поскольку это чистый JavaScript, он работает во многих различных браузерах. Просто включите скрипт в исходный код или добавьте букмарклет на панель закладок, чтобы одним щелчком мыши включить его на любую страницу.

http://getfirebug.com/lite.html

Gregers
источник
Отличная ссылка! Не знал о версии IE
Патрик Дежарден
15

Просто добавьте некоторые темы для разговора, как кто-то, кто использует Firebug / Chrome Inspector каждый день:

  1. На момент написания этой статьи есть только инспектор Google DOM, и он не обладает всеми функциями Firebug.

  2. Inspector - это «облегченная» версия Firebug: интерфейс не так хорош для IMO, проверка элементов в обеих последних версиях теперь неуклюжа, но Firebug все еще лучше; Я пытаюсь найти любовь к Chrome (так как это лучший, более быстрый браузер), но для разработки он мне просто не нужен.

  3. Просмотр в реальном времени / модификация DOM / CSS все еще намного лучше в Firebug; рассчитанный CSS и представление блочной модели лучше в Firebug;

  4. Каким-то образом просто читать / использовать Firebug проще, может быть, из-за простоты навигации, манипулирования / изменения документа в нескольких ключевых областях? Кто знает. Я привык к интерфейсу и думаю, что Chrome Inspector не так хорош, хотя это субъективная вещь, которую я признаю.

  5. Вкладка Cookies / Net чрезвычайно полезна для меня в Firebug. Может быть, Chrome Inspector имеет это сейчас? В прошлый раз, когда я это проверял, это не так, потому что Chrome обновляется в фоновом режиме без вашего вмешательства (по умолчанию получает ваше согласие, как и все хорошие повелители).

  6. Последнее замечание: день, когда Google Chrome получит полнофункциональный Firebug, - это день, когда Firefox в основном умирает для разработчиков, потому что у Firefox было 3 года, чтобы сделать движок макета Firefox Gecko столь же быстрым, как и WebKit, а они этого не сделали. Извините, что так прямо, но это правда.

Видите ли, теперь все хотят отойти от Flash вместо jQuery, мотивированного мобильной доступностью и интерактивностью (iPhone, iPad, Android), и JavaScript «внезапно» становится большой проблемой (это сарказм), так что этот корабль отплыл, Firefox. И это огорчает меня, как фаната Mozilla. Chrome - просто лучший браузер, пока Firefox не обновит свой движок JavaScript.

negutron
источник
Firefox идет под гору. На данный момент (2013) Chrome Devtools намного мощнее Firebug ... и Firefox все сосредоточивают свои усилия на Firefox OS, которая даже близко не подходит для Android Frodo ... они даже не приложили много усилий для создания js и рендеринга. Быстрее.
Phyo Arkar Lwin
14

F12

Я люблю короткие клавиши

Angel.King.47
источник
6
один парень положил ctrl shift j :)
Вишал Шарма
12

Попробуйте это, он называется Firebug Lite и, очевидно, работает с бета-версией Chrome.

Вы также можете найти его по адресу: https://chrome.google.com/extensions/

Teekin
источник
Это официальное расширение для Chrome
Webnet
9

Вы можете установить этот букмарклет на своей «Панели закладок», чтобы Firebug lite всегда был доступен в браузере Chrome / Chromium (укажите это как URL):

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Manuel
источник
4

jQuerify является идеальным расширением для встраивания jQuery в Chrome Console и настолько прост, насколько вы можете себе представить. Это расширение также указывает, был ли jQuery уже встроен в страницу.

Это расширение используется для встраивания jQuery в любую страницу, которую вы хотите. Это позволяет использовать jQuery в консольной оболочке (Вы можете вызвать консоль Chrome с помощью Ctrl+ Shift+ j.).

Чтобы встроить jQuery в выбранную вкладку, нажмите на кнопку расширения.

Андрей
источник
4

Официальное расширение Firebug Chrome или вы можете скачать и упаковать расширение самостоятельно.

https://getfirebug.com/releases/lite/chrome/

joshatjben
источник
2
Просто для ясности: это ссылка на расширение Firebug Lite, а не расширение Firebug.
NeuroScr
Ранее предоставленная ссылка была сломана. Пожалуйста, обновите этот ответ новой ссылкой.
Роб Хруска
3

Ну, есть возможность включить скрипты Greasemonkey для Google Chrome, так что, возможно, есть способ установить Firebug, используя этот метод? Firebug Lite также будет работать, но это не то же самое, что использование полнофункционального :(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

Питер Мортенсен
источник
3

Забудьте все, что вам всем нужно, этот независимый браузер инспектор, Dom Updater

https://goggles.webmaker.org/en-US

просто добавьте закладку и перейдите на любую веб-страницу и нажмите эту закладку.

на самом деле это проект Mozilla Goggles, удивительно удивительно удивительно ...

Вишал Шарма
источник
Они закрывают это.
Стив Моретц
3

F12 (только в Linux и Windows)

ИЛИ

Ctrl ⇧ I

( ⌥ ⌘ Iесли вы на Mac)

siannone
источник
1

Если вы используете Chromium в Ubuntu с использованием ночного ppa, вы должны иметь chromium-browser-inspector

Рори
источник