Какие функции Firebug отсутствуют в инструментах разработчика Chrome? [закрыто]


87

Я начинающий веб-разработчик, и мне несколько раз рекомендовали Firebug для отладки. Однако до сих пор я использовал только встроенные в Chrome инструменты разработчика. Кажется, он делает все, что делает Firebug, а в качестве бонуса он чище и организованнее.

По мере того, как я становлюсь более продвинутым в отладке, есть ли в Firebug функции, которые я пропущу в Chrome DevTools? Если так, то кто они?

Связанный: отладчик, похожий на Firebug, для Google Chrome


8
Я также относительно новичок в веб-разработке, но довольно быстро отказался от Firebug и Firefox только потому, что Chrome казался намного лучше как браузер и как набор инструментов разработчика. У более опытных разработчиков могут быть разные взгляды. В любом случае, обязательно посмотрите доклад Google I / O 2010 об инструментах разработчика Chrome в этом году: youtube.com/watch?v=TH7sJbyXHuk
brainjam

По иронии судьбы, программистам в Google Closure понадобится Firefox для запуска Closure Inspector.
hyperslug 02

Ответы:


137

Я использовал Firebug с самого начала, и это было находкой, как изобретение огня. Но потом вышел Chrome со своим отладчиком, и я попробовал. Я продолжал использовать Firebug, но следил за инструментами разработчика Chome и, наконец, не мог больше придумывать причину не переключаться после того, как инструменты JSON были добавлены в v12.

DevTools Chrome - удар, потому что в нем есть:

  • Встроенная шкала времени, профилировщик и анализатор кучи
  • Встроенный инструмент аудита
  • Может получать доступ и редактировать Local / SessionStorage, Cookies, SqlLite DB, WebSQL, AppCache и т. Д.
  • Обнюхивание сети WebSockets
  • Отладчик JS имеет еще несколько функций (например, точки останова WebWorker)
  • Отладчик JS позволяет редактировать JS на лету и запускать его (JSFiddle без скрипки)
  • Если хотите, каждое окно получает окно с инструментами разработчика; Firebug - это синглтон
  • Firebug возмущает страницу, замедляя ее загрузку и вставляя CSS для функции инспектора.

ОБНОВЛЕНИЕ: 2 года спустя я должен поздравить команду Firefox с огромным успехом. Тем не менее, команда Chrome и отладчик ежемесячно делают огромный скачок вперед, возглавляя отрасль. Я бы обновил приведенный выше список, но, честно говоря, он заполнит всю страницу.


5
+1 По последней части. Когда-то я был фанатом Firebug, пока не переключился.
Робин Карло Катакутан

4
Вопрос был о симметричной противоположности вашего ответа :)
Dkyc

1
У меня потекли слюнки после того, как я прочитал твой ответ
Karl

1
Я собирался опубликовать комментарий, чтобы спросить, какая часть этого списка все еще действительна в 2014 году. Приятно видеть список. Я все еще хотел бы посмотреть, есть ли что-нибудь в Firefox, но не в Chrome.
Nilesh

есть ли у хрома альтернатива адаптивному режиму макета (ctrl + shift + m) в firefox? потому что этот инструмент потрясающий
Рубен

29

Я еще не сталкивался с функцией Firebug, которую пропустил после перехода на Chrome.


2
+1 за краткий и конкретный ответ.
datasn.io 02

11

Инструменты разработчика Chrome переняли функции Firebug, поэтому все основные функции и привычки присутствуют (например $0, consoleобъект и).

Есть некоторые небольшие отличия, например, в DevTools нет панели CSS (хотя таблицами стилей CSS можно управлять на панели « Элементы» ).

Инструменты Chrome дополнительно имеют панели Timeline , Profiles и Storage . Timeline шкалы регистрирует загрузку, рендеринг CSS и синтаксический анализ JavaScript. Панель профиля профилирует использование ресурсов и хранилище. панель « показывает и позволяет вносить изменения в базу данных сайта, локальное хранилище, хранилище сеансов и файлы cookie.

Наконец, у обоих инструментов есть свои незначительные отклонения, которые делают различные действия немного проще или сложнее. Я советую использовать Firebug для Firefox и DevTools для браузеров Webkit, поскольку в Chrome работает только Firebug Lite, и ему не хватает многих функций, которые есть у обычного Firebug (а DevTools встроены в Chrome).


10

Мне намного удобнее использовать Firebug. На данный момент я не могу придумать подробностей, но иногда я пытаюсь отладить что-нибудь в Safari или Chrome, и это похоже на такую ​​PITA, что я запускаю Firefox и быстро делаю все.

Вкладка DOM - это плюс. Он более доступен и хорошо продуман, чем аналог Chrome. Я также предпочитаю, чтобы DOM и другие объекты JS регистрировались в консоли в Firebug.

Плагины Firebug, такие как Pixel Perfect, также очень полезны. Я не знаю, существует ли такой инструмент для Chrome.

В целом, это не имеет значения, потому что вам все равно придется тестировать в обоих браузерах. И IE, так что с таким же успехом можно сравнить его с инструментами IE Dev (которые улучшились, но все еще не хороши по сравнению с FF или Webkit).

Я не думаю, что в Firebug есть что-то особенное, что вам не хватает, но не в Chrome.


6

РЕДАКТИРОВАТЬ : Раньше это было правдой, но Chrome Dev Tools реализовали это.

Firebug может искать по всем скриптам, загруженным на страницу. Инструменты разработчика Chrome могут выполнять поиск только в текущем выбранном скрипте, AFAIK.


Я использую firebug только для этой функции и Cmd Shift C для выбора элемента в любое время.
mbdev

3
Когда я писал ответ, в Chrome Dev Tools не было этой функции. С тех пор они это реализовали. См. Этот ответ на один из вопросов, которые я задал здесь: stackoverflow.com/a/7970237/1801
Slavo

Славо это прибило. вы можете искать по всем скриптам (и всем другим ресурсам) сразу в Chrome Dev Tools. Просто откройте вкладку «Ресурсы» и воспользуйтесь полем поиска в правом верхнем углу
Пол

Поле поиска теперь отсутствует в CDT. Используйте Ctrl + F для поиска в текущем скрипте и Ctrl + Shift + F для поиска во всех скриптах
Akhil

4

Насколько я могу судить, Firebug - единственный, кто может редактировать HTML-код и текст в реальном времени по мере его ввода. Очень полезно, если вы, например, пытаетесь увидеть, как текст поместится в контейнер, и добавляете по одному символу за раз.

В Chrome при редактировании HTML вам нужно нажать TAB или ENTER, чтобы выйти из «режима редактирования» и увидеть изменения на своей странице.

В Firebug также можно сразу ввести HTML-код. В Chrome вам нужно щелкнуть правой кнопкой мыши и выбрать «Редактировать HTML». В противном случае он будет выделен <b> жирным шрифтом </b>.

Я действительно хочу перейти на Chrome, так как он, кажется, работает быстрее, но редактирование в реальном времени для меня слишком важно.


Думаю, теперь это можно делать и в Chrome.
Пиюш Сони

Я бы хотел, чтобы ты был прав, но это не так. Я использую последнюю версию Chrome 21.0.1180.89. Какую версию ты используешь? Бета / Канарейка?
Никлас

3

Выбор мыши у firebug отличный, но я не могу найти его в инструментах разработчика Chrome.

Меня это беспокоит, потому что я не могу найти горячую клавишу для этого в firebug, а в Chrome она полностью отсутствует.

Я новичок, поэтому большую часть времени при разработке все еще используется мышь.


3

В то время, когда задавался этот вопрос, Firebug был чудовищем, но теперь инструменты разработчика Chrome (DevTools) удобны для веб-разработчиков. Хотя я не разглагольствовал о Firebug, потому что я изучил веб-разработку, используя Firefox с Firebug.

Это был отличный инструмент для веб-разработки, в нем были представлены все основные функции DevTools и Firefox DevTools. Однако я переключился на Chrome DevTools, хотя они не охватывают все функции Firebug, потому что они легковесны и намного быстрее, чем Firebug, доступ к localStorage легко определяется, и, на мой взгляд, там организованы источники.

Здесь я собираюсь перечислить, насколько уникальны функции Firebug,

  • Искать :

    Параметр поиска четко определен в Firebug, потому что он легко доступен, и мы можем искать по ключевым словам с помощью учетом регистра и регулярным выражением .

  • ДОМ:

    К структуре DOM можно легко получить доступ в Firebug с помощью различных параметров фильтрации, таких как Показать свойства , определенные пользователем , Показать пользовательские функции» и так далее.

  • Печенье:

    Firebug позволяет нам создавать наши собственные файлы cookie и предоставляет возможность экспорта файлов cookie. .

  • Сеть / Сеть:

    В Firebug есть панель Net, которую DevTools называют Network . Оба они полезны для анализа всех запросов, сделанных для загрузки ресурсов, и их статуса. В Firebug мы можем легко определить удаленный IP-адрес ресурсов .

  • Источники:

    Несмотря на то, что Source Edit доступен в DevTools, я считаю, что Firebug лучше при использовании Source Edit , потому что, если вы хотите отредактировать файл CSS в DevTools, вам нужно перейти на панель Sources , затем нажать Ctrl+, Oчтобы найти файл. Только после этого вы сможете редактировать файл. В Firebug вы можете легко найти редактирование исходного кода на каждой вкладке меню.

  • Поддержка додзё:

    Когда я был разработчиком додзё, Firebug был легко расширен для поддержки разработки додзё с помощью расширения Dojo Firebug .


2

Объективно Firebug 2.0 имеет много мелких функций, которых нет в Chrome DevTools. Некоторые из них перечислены здесь:

Консольная панель

Панель HTML

Панель CSS

Панель DOM

  • Отображает все свойства DOM в одном месте
  • Отображает закрытия
  • Позволяет фильтровать отображение по свойствам, функциям и т. Д.

Сетевая панель

  • Позволяет останавливаться на XmlHTTPRequests
  • Показывает информацию кеша по запросу

Панель файлов cookie

  • Создавать и редактировать куки
  • Контроль разрешений для файлов cookie
  • Показывает необработанный и форматированный размер файлов cookie
  • Позволяет остановить выполнение скрипта при изменении cookie
  • Экспорт файлов cookie в стандартном формате

Генеральная

  • Откройте HTML, CSS и JavaScript во внешнем редакторе
  • Позволяет настраивать ярлыки

"Особенность", которая выходит за рамки удобства использования, заключается в том, что Firebug имеет открытый исходный код. . Так что каждый может принять в нем участие.

Сказав это, Chrome DevTools (а также Firefox DevTools) имеют гораздо больше функций и других меньших и больших преимуществ по сравнению с Firebug, поскольку команда, стоящая за Firebug, очень мала по сравнению с командами, стоящими за другими DevTools.

Кроме того, Firebug 3+ интегрируется во встроенный Firefox DevTools , что означает, что эти версии наследуют все функции Firefox DevTools и могут добавлять дополнительные функции.


1

Firebug может подключить к нему другой плагин, например Firecookie . В остальном они очень похожи, на мой взгляд, все дело в вкусе.


Инструменты разработчика Chrome также можно расширить с помощью chrome.devtoolsAPI .
Роб У

1

также добавьте, что он может xopy XPATH добавить селектор CSS для элемента HTML.

Иногда ЭТО действительно удобно! :))) хахаха


1

Я думаю, что инструменты разработки похожи, но мне не удалось заставить Chrome ничего не кэшировать. Даже установка параметра Chrome «Отключить кеш» не работала в 100% случаев; Не знаю почему.

У меня не было этой проблемы с Firefox / Firebug, поэтому я все еще использую его.


1

Добавляю несколько центов ...

  1. Chrome Inspector не мог отсортировать свойства CSS в алфавитном порядке, тогда как Firebug мог делать это как шарм. Это помогает, когда вы проверяете какой-либо элемент css и вам нужно его захватить, в этом вам пригодится firebug.

    Согласно хорошей практике кодирования CSS, всегда лучше, чтобы ваши свойства CSS были отсортированы в алфавитном порядке в вашем коде.

  2. Когда вы работаете над проектом, связанным с большим количеством скриптов. В firebug под тегом скрипта у вас есть возможность поиска js-файла в предоставленном поле предложений. Где, как и в случае с хромом, у вас будет хромое древовидное представление для поиска вашего JS-файла, что утомительно, чтобы увидеть пространство имен вашего js-файла и пересечь дерево.

    Эта опция может не повлиять на тех, кто использует небольшие файлы JS в своем проекте. Эта функция отлично сочетается с firebug, который я использую, когда мои скрипты содержат более 1000 файлов JS.


0

Сегодня почти переключился, но я заметил, что не могу щелкнуть правой кнопкой мыши по измененному CSS в Chrome и скопировать объявления правил или стилей, как в firebug. БОГ, как бы мне хотелось, чтобы firefox внезапно не начал сосать, иначе у меня не было бы этой проблемы.


Также только что заметил, что в Chrome вы не можете использовать клавиши со стрелками и прокручивать различные варианты атрибута.
Запрет

0

С помощью хромированного отладчика я могу отлаживать jsni моего проекта GWT, где FireBug просто показывает анонимную функцию, а я вообще не распознаю функцию actale.


0

Мне нравится инструмент разработчика Chrome, но иногда мне не хватало этой мощной функции от firebug.

  • Условная точка останова : пауза только при определенном условии.
  • Регистрация вызовов функций : отметьте функцию и посмотрите все, что вы хотите знать, в консоли.
  • Прервать при изменении свойства : пометить объекты, и отладчик приостановит работу, если свойство изменится.

0

Функция запроса "Изменить и отправить"

С помощью функции «Редактировать и повторно отправить» в инструментах разработчика Firefox (Воспроизвести XHR или что-то в Firebug) вы можете воспроизвести запрос XHR с изменениями в запросе, включая заголовки запроса, тело запроса, метод http и даже URL-адрес. Replay XHR Google Chrome просто воспроизводит запрос и не позволяет вносить какие-либо изменения в запрос.

Когда мне нужна эта функция, я использую Firefox Devtools.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.