Acemi bir web geliştiricisiyim ve Firebug'ı birkaç kez hata ayıklama için önerdim. Ancak şimdiye kadar, Chrome'un yerleşik Geliştirici Araçlarını kullanıyorum. Firebug'ın yaptığı her şeyi yapıyor gibi görünüyor ve bonus olarak daha temiz ve daha organize.
Hata ayıklamamda daha gelişmiş hale geldikçe, Firebug'un sahip olduğu ve Chrome'un DevTools'unda kaçıracağım özellikler var mı? Eğer öyleyse, bunlar nedir?
Yanıtlar:
Firebug'ı en başından beri kullandım ve bu ateşin icadı gibi bir nimetti. Ama sonra Chrome hata ayıklayıcısıyla çıktı ve ben onu denedim. Firebug'ı kullanmaya devam ettim, ancak Chome'un geliştirme araçlarına göz kulak oldum ve nihayet JSON araçları v12'de eklendikten sonra geçiş yapmamak için bir neden bulamadım.
Chrome'un DevTools, şunlara sahip olduğu için kıçınızı tekmeledi:
GÜNCELLEME: 2 yıl sonra büyük atılımlar yaptıkları için Firefox ekibini tebrik etmeliyim. Bununla birlikte, Chrome ekibi ve hata ayıklayıcı aylık olarak büyük adımlar atarak sektöre öncülük ediyor. Yukarıdaki listeyi güncellerdim ama açıkçası tüm sayfayı doldururdu.
Chrome Geliştirici Araçları, Firebug'ın özelliklerini devraldı, böylece tüm ana özellikler ve aşinalık orada ( $0, ve consolenesne gibi).
DevTools'un CSS paneline sahip olmaması gibi bazı küçük farklılıklar vardır (CSS stil sayfaları Öğeler panelinde değiştirilebilir olsa da ).
Chrome araçları ayrıca Zaman Çizelgesi , Profiller ve Depolama panellerine sahiptir. Zaman Çizelgesi paneli yükleme, CSS oluşturma ve JavaScript çözümleme kaydeder. Profil paneli profilleri kaynak kullanımı ve Depolama paneli gösterileri ve sitenin veritabanından değişiklikleri, yerel depolama, oturum depolamasını ve çerezleri sağlar.
Son olarak, her iki aracın da çeşitli eylemleri biraz daha kolaylaştıran veya zorlaştıran kendi küçük farklılıkları vardır. Benim tavsiyem Firefox için Firebug ve Webkit tarayıcıları için DevTools'u kullanmaktır, çünkü yalnızca Firebug Lite Chrome'da çalışır ve normal Firebug'ın sahip olduğu pek çok özelliğe sahip değildir (ve DevTools Chrome'da yerleşiktir).
Firebug kullanırken kendimi çok daha rahat hissediyorum. Şu anda ayrıntıları düşünemiyorum, ancak bazen Safari veya Chrome'da bir şeyde hata ayıklamayı deneyeceğim ve öyle bir PITA gibi görünüyor ki Firefox'u başlatıyorum ve her şeyi çabucak yapıyorum.
DOM sekmesi, biri için bir artıdır. Chrome'un eşdeğerinden daha erişilebilir ve daha iyi tasarlanmış. Firebug'da DOM ve diğer JS nesnelerinin konsola günlüğe kaydedilme şeklini de tercih ediyorum.
Pixel Perfect gibi Firebug eklentileri de çok kullanışlıdır. Chrome için böyle bir araç olup olmadığını bilmiyorum.
Genel olarak, önemli değil çünkü yine de her iki tarayıcıda da test etmeniz gerekiyor. Ve IE, onu IE'nin Dev araçlarıyla da karşılaştırabilir (geliştirilmiş, ancak FF veya Webkit'lere kıyasla hala iyi değildir).
Özellikle Firebug'da gelişmiş bir şey olduğunu sanmıyorum, ancak Chrome'da eksik olacağınız değil.
DÜZENLEME : Bu önceden doğruydu, ancak Chrome Dev Tools uyguladı.
Firebug, bir sayfaya yüklenen tüm komut dosyalarında arama yapabilir. Chrome Dev Tools yalnızca şu anda seçili olan AFAIK komut dosyasında arama yapabilir.
Anladığım kadarıyla, Firebug HTML kodunu ve siz yazarken canlı metni düzenleyebilen tek kişidir. Örneğin, metnin bir kaba nasıl sığacağını görmeye ve her seferinde bir karakter eklemeye çalışıyorsanız çok kullanışlıdır.
Chrome'da HTML'yi düzenlediğinizde, "düzenleme modundan" çıkmak ve sayfanızdaki değişiklikleri görmek için SEKME veya ENTER tuşuna basmanız gerekir.
Firebug'da ayrıca HTML kodunu hemen girebilirsiniz. Chrome'da, sağ tıklamanız ve "HTML'yi Düzenle" yi seçmeniz gerekir. Aksi takdirde, <b> kalın </b> gibi görünecektir.
Daha hızlı çalıştığı için gerçekten Chrome'a geçmek istiyorum, ancak canlı düzenleme benim için çok önemli.
Firebug'ın sahip olduğu fare seçimi harika, ancak bunu Chrome Geliştirici Araçları'nda bulamıyorum.
Bu beni rahatsız ediyor çünkü firebug'da bunun için bir kısayol tuşu bulamıyorum, oysa krom tamamen yoksundur.
Ben bir noob geliştiricisiyim, bu yüzden fare geliştirme sırasında çoğu zaman hala kullanılıyor.
Bu soru sorulduğu sırada Firebug bir canavardı, ancak şimdi Chrome Geliştirici Araçları (DevTools) web geliştiricileri için kullanışlı. Firebug'dan bahsetmiyorum çünkü web geliştirmeyi Firebug ile Firefox kullanarak öğrendim.
Web geliştirme için harika bir araçtı ve DevTools ve Firefox'un DevTools'un sahip olduğu tüm önemli özellikleri tanıttı. Ancak, Firebug'ın tüm özelliklerini kapsamasalar da Chrome DevTools'a geçtim, çünkü hafif ağırlıklı ve Firebug'dan çok daha hızlılar, localStorage'a erişim kolayca tanımlanıyor ve bence kaynaklar orada organize ediliyor.
Burada Firebug'daki özelliklerin nasıl benzersiz olduğunu listeleyeceğim.
Arama :
Arama seçeneği Firebug'da iyi tanımlanmıştır, çünkü kolayca erişilebilir ve anahtar kelimeyi büyük / küçük harfe duyarlı ve normal ifadeyle arayabiliriz .
DOM:
DOM yapısına Firebug'da Kullanıcı Tanımlı Özellikleri Göster gibi çeşitli filtreleme seçenekleriyle kolayca erişilebilir. , göster Kullanıcı tanımlı Fonksiyonlar vb.
Kurabiye:
Firebug, kendi çerezlerimizi oluşturmamıza izin verir ve çerezleri dışa aktarmamızı sağlar .
Ağ / Ağ:
Firebug, DevTools'un buna Ağ adını verdiği bir Ağ paneline sahiptir . Her ikisi de kaynakları yüklemek için yapılan tüm istekleri ve durumlarını analiz etmek için kullanışlıdır. Firebug'da, kaynakların Uzak IP'sini kolayca kavrayabiliriz .
Kaynaklar:
Olsa Kaynak Düzenleme DevTools'un mevcuttur, ben kullanırken Kundakçı iyidir hissetmek Kaynak Edit Düzenlemeye DevTools'un içinde CSS dosyasını isterseniz gitmek zorunda çünkü kaynaklar panelinde, daha sonra basın Ctrl+ Odosyayı bulmak için. Ancak o zaman dosyayı düzenleyebilirsiniz. Firebug'da Kaynak Düzenlemesini her menü sekmesinin altında kolayca bulabilirsiniz .
Dojo desteği:
Ben bir dojo geliştiricisi olduğumda Firebug, Dojo Firebug Uzantısını kullanarak dojo geliştirmeyi desteklemek için kolayca genişletildi .
Nesnel olarak görülen Firebug 2.0, Chrome DevTools'un sahip olmadığı birçok küçük özelliğe sahiptir. Bazıları burada listelenmiştir:
Genel
Kullanılabilirliğin ötesine geçen bir "özellik", Firebug'ın açık kaynak olmasıdır . Böylece herkes katılabilir.
Bununla birlikte, Chrome DevTools'un (Firefox DevTools'un yanı sıra) Firebug'a göre çok daha fazla özelliğe ve daha küçük ve daha büyük avantajlara sahip olduğunu, çünkü Firebug'un arkasındaki ekip diğer DevTools'un arkasındaki ekiplere kıyasla çok küçük.
Ayrıca, Firebug 3+ yerleşik Firefox Geliştirme Araçları ile bütünleşir ; bu, bu sürümlerin Firefox Geliştirme Araçlarının tüm özelliklerini devraldığı ve ek özellikler ekleyebileceği anlamına gelir.
Firebug, kendisine Firecookie gibi başka bir eklenti ekleme olanağına sahiptir . Geri kalanı için oldukça benzerler, bence her şey zevkle ilgili.
chrome.devtoolsAPI kullanılarak genişletilebilir .
Geliştirme araçlarının benzer olduğunu düşünüyorum ancak Chrome'u hiçbir şeyi önbelleğe almamaya zorlarken sorun yaşadım. Chrome "Önbelleği devre dışı bırak" ayarı bile% 100 çalışmıyordu; Neden olduğundan emin değilim.
Firefox / Firebug ile bu sorunu yaşamadım, bu yüzden hala kullanıyorum.
Birkaç sentimi ekleyerek ...
Firebug bunu bir cazibe gibi yapabildiğinden, Chrome Inspector CSS özelliklerini alfabetik olarak sıralayamadı. Bazı css öğelerini incelediğinizde ve onu almanız gerektiğinde yardımcı olur firebug bu konuda işe yarar.
İyi CSS kodlama uygulamasına göre, CSS özelliklerinizin kodunuzda alfabetik olarak sıralanması her zaman daha iyidir.
Çok sayıda komut dosyası içeren bir proje üzerinde çalışırken, komut dosyası etiketi altındaki firebug'da, sağlanan öneri kutusunda bir js dosyası arama seçeneğiniz vardır. Chrome'da olduğu gibi, JS dosyanızı bulmak için, js dosyanızın ad aralığını görmek ve ağacı geçmek için sıkıcı olan bir ağaç görünümüne sahip olacaksınız.
Bu seçenek, projelerinde küçük JS dosyaları bulunan hiç kimseyi etkilemeyebilir. Bu özellik, komut dosyalarım 1000'den fazla JS dosyası olduğunda kullandığım firebug ile bir patlama.
Neredeyse bugün geçiş yaptım, ancak Chrome'da değiştirilmiş CSS'ye sağ tıklayamayacağımı ve Firebug'da yapabildiğim gibi Kural veya Stil bildirimlerini kopyalayamayacağımı fark ettim. ALLAH Keşke firefox aniden emmeye başlamasaydı yoksa bu problemi yaşamazdım.
Chrome geliştirme aracını seviyorum ama bazen firebug'ın bu güçlü özelliğini kaçırdım.
"Düzenle ve Yeniden Gönder" istek özelliği
Firefox Geliştirici araçlarındaki "Düzenle ve Yeniden Gönder" özelliği ile (XHR'yi veya Firebug'daki bir şeyi yeniden oynat), XHR isteğini istek başlıkları, istek gövdesi, http yöntemi ve hatta url dahil olmak üzere istekteki değişikliklerle yeniden oynatabilirsiniz. Google Chrome'un Replay XHR'ı yalnızca isteği tekrar oynatır ve istekte herhangi bir değişikliğe izin vermez.
Bu özelliğe ihtiyacım olduğunda Firefox Devtools kullanıyorum.