Я начинающий веб-разработчик, и мне несколько раз рекомендовали Firebug для отладки. Однако до сих пор я использовал только встроенные в Chrome инструменты разработчика. Кажется, он делает все, что делает Firebug, а в качестве бонуса он чище и организованнее.
По мере того, как я становлюсь более продвинутым в отладке, есть ли в Firebug функции, которые я пропущу в Chrome DevTools? Если так, то кто они?
Ответы:
Я использовал Firebug с самого начала, и это было находкой, как изобретение огня. Но потом вышел Chrome со своим отладчиком, и я попробовал. Я продолжал использовать Firebug, но следил за инструментами разработчика Chome и, наконец, не мог больше придумывать причину не переключаться после того, как инструменты JSON были добавлены в v12.
DevTools Chrome - удар, потому что в нем есть:
ОБНОВЛЕНИЕ: 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. Некоторые из них перечислены здесь:
Генеральная
"Особенность", которая выходит за рамки удобства использования, заключается в том, что Firebug имеет открытый исходный код. . Так что каждый может принять в нем участие.
Сказав это, Chrome DevTools (а также Firefox DevTools) имеют гораздо больше функций и других меньших и больших преимуществ по сравнению с Firebug, поскольку команда, стоящая за Firebug, очень мала по сравнению с командами, стоящими за другими DevTools.
Кроме того, Firebug 3+ интегрируется во встроенный Firefox DevTools , что означает, что эти версии наследуют все функции Firefox DevTools и могут добавлять дополнительные функции.
Firebug может подключить к нему другой плагин, например Firecookie . В остальном они очень похожи, на мой взгляд, все дело в вкусе.
chrome.devtoolsAPI .
Добавляю несколько центов ...
Chrome Inspector не мог отсортировать свойства CSS в алфавитном порядке, тогда как Firebug мог делать это как шарм. Это помогает, когда вы проверяете какой-либо элемент css и вам нужно его захватить, в этом вам пригодится firebug.
Согласно хорошей практике кодирования CSS, всегда лучше, чтобы ваши свойства CSS были отсортированы в алфавитном порядке в вашем коде.
Когда вы работаете над проектом, связанным с большим количеством скриптов. В firebug под тегом скрипта у вас есть возможность поиска js-файла в предоставленном поле предложений. Где, как и в случае с хромом, у вас будет хромое древовидное представление для поиска вашего JS-файла, что утомительно, чтобы увидеть пространство имен вашего js-файла и пересечь дерево.
Эта опция может не повлиять на тех, кто использует небольшие файлы JS в своем проекте. Эта функция отлично сочетается с firebug, который я использую, когда мои скрипты содержат более 1000 файлов JS.
Сегодня почти переключился, но я заметил, что не могу щелкнуть правой кнопкой мыши по измененному CSS в Chrome и скопировать объявления правил или стилей, как в firebug. БОГ, как бы мне хотелось, чтобы firefox внезапно не начал сосать, иначе у меня не было бы этой проблемы.
Мне нравится инструмент разработчика Chrome, но иногда мне не хватало этой мощной функции от firebug.
Функция запроса "Изменить и отправить"
С помощью функции «Редактировать и повторно отправить» в инструментах разработчика Firefox (Воспроизвести XHR или что-то в Firebug) вы можете воспроизвести запрос XHR с изменениями в запросе, включая заголовки запроса, тело запроса, метод http и даже URL-адрес. Replay XHR Google Chrome просто воспроизводит запрос и не позволяет вносить какие-либо изменения в запрос.
Когда мне нужна эта функция, я использую Firefox Devtools.