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

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

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

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

Ответ 1

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

Chrome DevTools пинает, потому что имеет:

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

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

Ответ 2

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

Ответ 3

Инструменты разработчика 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).

Ответ 4

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

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

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

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

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

Ответ 5

EDIT. Это было правдой, но Chrome Dev Tools реализовали ее.

Firebug может выполнять поиск во всех сценариях, загруженных на страницу. Chrome Dev Tools может выполнять поиск только в выбранных script, AFAIK.

Ответ 6

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

Это беспокоит меня, потому что я не могу найти в нем горячий ключ в firebug, в то время как хром его полностью не хватает.

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

Ответ 7

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

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

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

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

Ответ 8

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

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

Здесь я расскажу, как уникальные функции в Firebug,

  • Поиск

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

  • DOM:

    Структура DOM может быть легко доступна в Firebug с различными параметрами фильтрации , такими как Show User-defined Properties, Show User-defined Functions и т.д.

  • Cookies

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

  • Сеть/нетто:

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

  • Источники:

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

  • Поддержка dojo:

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

Ответ 9

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

Панель консоли

панель HTML

панель CSS

панель DOM

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

панель Net

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

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

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

Общие

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

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

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

Добавление моих небольших центов...

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

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

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

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

Ответ 14

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

Ответ 15

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

Ответ 16

Мне нравится инструмент Chrome dev, но когда-то я пропустил эту мощную функцию от firebug.

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