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

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

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

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

Я использовал 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 и отладчик ежемесячно делают огромный скачок вперед, возглавляя отрасль. Я бы обновил приведенный выше список, но, честно говоря, он заполнит всю страницу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В то время, когда задавался этот вопрос, 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 .

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

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

• Отображает XMLHttpRequests, включая всю информацию о запросе
• Отображает изменения файлов cookie
• Еще несколько функций API командной строки
• Отдельный редактор команд

Панель HTML

• Встроенное редактирование с автозаполнением для атрибутов и стилей CSS
• Параметры для управления выделением изменений, их раскрытием и прокруткой для отображения
• Параметры для управления отображением объекта
• Окно быстрой информации

Панель 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 и могут добавлять дополнительные функции.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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