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

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

существенные особенности я хотел бы:

  • проверьте источник HTML (выберите элементы, удалите их и т. д.)
  • проверьте значения CSS (встроенное решение странно, как-то)
15 278
html css google-chrome debugging firebug

15 ответов:

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

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

242

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

http://getfirebug.com/lite.html

37

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

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

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

  3. Live preview / модификация DOM / CSS по-прежнему лучше в Firebug; расчетный CSS и представление модели коробки лучше в Firebug;

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

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

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

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

15

F12

Я люблю клавиш

14

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

вы также можете найти его в: https://chrome.google.com/extensions/

12

вы можете установить этот букмарклет в своей "панели закладок", чтобы 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);
9

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

4

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

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

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

4

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

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

4

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

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

3

Это не ответ на ваш вопрос, но, если вы его пропустили, Крис Педерик Веб-Разработчик теперь доступен для Chrome: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm.

3

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

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

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

Это на самом деле Mozilla Project очки, удивительно удивительно удивительно...

3

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

или

Ctrl ⇧Я

(⌥⌘Я Если вы на Mac)

3

пожалуйста Firebug Lite для Google Chrome

2

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

1