Я початківець веб-розробник, і мені кілька разів рекомендували Firebug для налагодження. Однак поки що я щойно використовував вбудовані в Chrome інструменти розробника. Здається, він робить все, що робить Firebug, і є чистішим та більш організованим як бонус.
У міру вдосконалення моєї налагодження, чи є у Firebug функції, які я втрачу з DevTools Chrome? Якщо так, то які вони?
Пов’язане: Налагоджувач, подібний до Firebug для Google Chrome
Відповіді:
Я використовував Firebug з самого початку, і це було знахідкою, як винахід вогню. Але потім вийшов Chrome із налагоджувачем, і я спробував. Я продовжував використовувати Firebug, але стежив за розробницькими інструментами Chome і, нарешті, не міг більше придумувати причину не переключатися після додавання інструментів JSON у v12.
Chrome DevTools вдарить, бо він має:
ОНОВЛЕННЯ: Через 2 роки я повинен привітати команду Firefox за величезні заходи. Тим не менш, команда Chrome та налагоджувач щомісяця роблять величезні стрибки вперед, ведучи галузь. Я б оновив наведений вище список, але, чесно кажучи, він заповнив би всю сторінку.
Інструменти розробника Chrome взяли на себе функції Firebug, тому всі основні функції та знайомство є (наприклад $0, і consoleоб’єкт).
Є деякі невеликі відмінності, наприклад, у DevTools немає панелі CSS (хоча таблицями стилів CSS можна керувати в панелі Elements ).
Інструменти Chrome додатково мають панелі шкали часу , профілів та зберігання . Панель Timeline реєструє завантаження, візуалізацію CSS та синтаксичний аналіз JavaScript. Панель « Профіль» профілює використання ресурсів та сховище панель відображає та дозволяє змінювати базу даних сайту, локальне сховище, сховище сесій та файли cookie.
Нарешті, обидва інструменти мають свої незначні відхилення, які роблять різні дії крихітно легшими або складнішими. Моя порада - використовувати Firebug для Firefox та DevTools для веб-переглядачів Webkit, оскільки лише Firebug Lite працює в Chrome, і йому не вистачає багатьох функцій, які має звичайний Firebug (а DevTools вбудовані в Chrome).
Я відчуваю себе набагато комфортніше за допомогою Firebug. На даний момент я не можу придумати конкретну інформацію, але іноді я намагаюся налагодити щось у Safari чи Chrome, і це здається таким PITA, що я запускаю Firefox і швидко виконую все, що потрібно.
Вкладка DOM є плюсом для одного. Він доступніший і добре викладений, ніж еквівалент Chrome. Мені більше подобається, як DOM та інші об'єкти JS реєструються на консолі у Firebug.
Також дуже корисні плагіни Firebug, такі як Pixel Perfect. Я не знаю, чи існує такий інструмент для Chrome.
Загалом, це не має значення, бо в будь-якому випадку ви повинні тестувати в обох браузерах. І IE, тому міг би також порівняти його з інструментами Dev IE (які вдосконалились, але все ще погані в порівнянні з FF або Webkit).
Я не думаю, що у Firebug є щось просунуте, зокрема, але не в Chrome, чого б ви не брали.
РЕДАГУВАТИ : Раніше це було правдою, але Chrome Dev Tools це реалізувало.
Firebug може шукати у всіх скриптах, завантажених на сторінці. Chrome Dev Tools може шукати лише у вибраному скрипті AFAIK.
Наскільки я можу зрозуміти, Firebug - це єдиний, хто може редагувати HTML-код і текст в режимі реального часу, коли ви його вводите. Дуже корисно, якщо ви, наприклад, намагаєтесь побачити, як текст міститься в контейнері, і додавати по одному символу.
У Chrome під час редагування HTML потрібно натиснути TAB або ENTER, щоб вийти з "режиму редагування", і побачити зміни на своїй сторінці.
У Firebug ви також можете ввести HTML-код відразу. У Chrome потрібно клацнути правою кнопкою миші та вибрати "Редагувати HTML". В іншому випадку він відображатиметься <b> напівжирним </b>.
Я дуже хочу перейти на Chrome, оскільки він, здається, працює швидше, але редагування в режимі реального часу є для мене занадто важливим.
Пожежна помилка для вибору миші є чудовою, але я не можу знайти її в Інструментах розробника Chrome.
Мене це турбує, тому що я не можу знайти для нього гарячу клавішу в firebug, тоді як у chrome цього не вистачає.
Я розробник noob, тому миша все ще використовується більшу частину часу при розробці.
На той момент, коли це питання було задано, Firebug був звіром, але зараз Інструменти розробника Chrome (DevTools) зручні для веб-розробників. Хоча я не скажу про Firebug, тому що я навчився веб-розробці, використовуючи Firefox з Firebug.
Це був чудовий інструмент для веб-розробки, і він представив усі основні функції DevTools та DevTools Firefox. Однак я перейшов на Chrome DevTools, хоча вони не охоплюють усіх функцій Firebug, оскільки вони легкі і набагато швидші, ніж Firebug, доступ до localStorage легко визначається, і джерела організовані там, на мій погляд.
Тут я збираюся перерахувати, наскільки унікальні функції у Firebug,
Пошук :
Параметр пошуку чітко визначений у Firebug, оскільки він легко доступний, і ми можемо шукати ключові слова з урахуванням регістру та регулярними виразами .
DOM:
До структури DOM можна легко отримати доступ у Firebug за допомогою різних параметрів фільтрації, таких як Показати визначені користувачем властивості , Показати визначені користувачем функції тощо.
Печиво:
Firebug дозволяє нам створювати власні файли cookie та надає можливість експорту файлів cookie .
Мережа / мережа:
Firebug має панель Net, де DevTools називають її Network . Обидва вони корисні для аналізу всіх запитів, зроблених для завантаження ресурсів, та їх стану. У Firebug ми можемо легко зрозуміти віддалений IP ресурсів .
Джерела:
Незважаючи на те, що редагування джерела доступне в DevTools, я вважаю, що Firebug є кращим під час використання редагування джерела , тому що якщо ви хочете відредагувати CSS-файл у DevTools, вам потрібно перейти на панель Джерела , а потім натиснути Ctrl+, Oщоб знайти файл. Тільки тоді ви зможете редагувати файл. У Firebug ви можете легко знайти Source Edit на кожній вкладці меню.
Підтримка доджо:
Коли я був розробником доджо, 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 у відповідному полі пропозицій. Де, як і у chrome, у вас буде кульгавий вигляд дерева, щоб знайти ваш файл JS, що нудно бачити простір імен вашого js-файлу та обходити дерево.
Цей параметр може не вплинути на тих, хто займається невеликим числом файлів JS у своєму проекті. Ця функція - це удар з firebug, який я використовую, коли мої сценарії містять більше 1000 файлів JS.
Сьогодні майже зробив перехід, але я помітив, що не можу клацнути правою кнопкою миші на зміненому CSS в Chrome і скопіювати декларації Rule або Style, як я можу у firebug. БОГ Я б хотів, щоб firefox раптово не почав смоктати, інакше у мене не було б цієї проблеми.
Я люблю розробник Chrome, але колись мені не вистачало цієї потужної функції від firebug.
Функція запиту "Редагувати та повторно відправити"
За допомогою функції «Редагувати та повторно відправити» в інструментах розробника Firefox (повторне відтворення XHR або щось інше у Firebug) ви можете повторно відтворити запит XHR із змінами у запиті, включаючи заголовки запитів, тіло запиту, метод http і навіть URL-адресу. Replay XHR від Google Chrome просто повторює запит і не допускає жодних змін.
Я використовую Firefox Devtools, коли мені потрібна ця функція.