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

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

277 голосов
/ 21 ноября 2008

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

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

  • Проверка источника HTML (выберите элементы, удалите их и т. Д.)
  • проверить значения CSS (встроенное решение как-то странно)

Ответы [ 15 ]

242 голосов
/ 06 декабря 2008

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

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

37 голосов
/ 09 декабря 2008

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

http://getfirebug.com/lite.html

15 голосов
/ 02 марта 2011

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

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

  2. Инспектор является «облегченной» версией 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 «внезапно» становится большой проблемой (это сарказм), так что корабль отплыл , Fire Fox. И это огорчает меня, как фаната Mozilla. Chrome - лучший браузер, пока Firefox не обновит свой движок JavaScript.

14 голосов
/ 15 декабря 2011

F12

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

12 голосов
/ 17 декабря 2009

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

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

9 голосов
/ 10 ноября 2009

Вы можете установить эту закладку в «Панели закладок», чтобы 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);
4 голосов
/ 22 июля 2010

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

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

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

4 голосов
/ 30 января 2010

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

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

4 голосов
/ 14 января 2009

Или попробуйте пользовательские скрипты: http://dev.chromium.org/developers/design-documents/user-scripts

3 голосов
/ 14 октября 2013

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

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

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

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

Страница:
...