Firebug’a eşdeğer Google Chrome nedir?

29

Yapabilecek bir araç arıyorum:

HTML öğelerini inceleyin
JavaScript'i yönet / hata ayıkla
profil performansı
elemanları gerçek zamanlı olarak değiştir

— Evan Plaice
kaynak

32

Dahilidir. Sayfa [bildiri] -> Geliştirici -> Geliştirici araçları (Chrome v5 ve altında). V6'da farklı olması muhtemeldir, çünkü Sayfa düğmesi o sürümde kayboluyor gibi görünmektedir.

— Mark Hatton
kaynak

3

Google’ın aracının bazı dezavantajları var - ajax isteklerini görüntülemek o kadar kolay değil, uygun bir multiline modu yok, HTML’yi bir pencerede düzenleyemezsiniz, HTML ağacındaki vurgulu dolgu / kenar boşluklarını göstermez, Sadece gerçek DOM’de gezinemezsiniz (sadece HTML ağacı) ve sonuncusu ama en önemlisi, CSS düzenleme özelliklerini sadece clunkier olarak görüyorum - Google’da bir şey için otomatik tamamlama yok. Hala çok kullanışlı, ama Firebug daha iyi.

— cgp

2

Veya shift-ctrl-I tembel :)

— Tim Post

1

@Mark Not, 5.0.375.99 kullanıyorum. Şimdi ya da gelecekte fark yaratacağından emin değilim.

— Evan Plaice

1

— V6'da

17

Sağ Tıklama -> Öğeyi İncele

— HoLyVieR
kaynak

13

Google Chrome için Firebug Lite .

— Emmett
kaynak

FireBug Lite harika bir araçtır ve aynı zamanda IE, Opera, Safari ve Firefox'ta da çalışır: getfirebug.com/firebuglite

— Nat Ryall

5

Asıl soru sorulmasından bu yana 4 yıl geçti. Chrome (kararlı) şu an sürüm 38'de. Uzun süredir Firebug for Firefox’a eşdeğer olan tam bir Geliştirici Araçları seti içeriyordu (bu arada Firefox’un bile yerleşik bir denetçisi var ).

Chrome'un Geliştirici Araçları'nın yapmanıza izin verdiği birkaç şey:

DOM'u inceleyin
CSS'yi inceleyin
Bir JavaScript Konsoluna Erişin
JavaScript hata ayıklama
Ağ isteklerini, zamanlamaları ve yanıtlarını görüntüleme
Oluşturma, JavaScript ve CSS performansını görüntüleme
Yerel depolamayı ve çerezleri inceleyin

Geliştirme araçlarına çeşitli şekillerde erişilebilir.

Chrome Menüsü -> Araçlar -> Geliştirici Araçları
Ctrl+ Shift+ IWindows veya Cmd+ Shift+ IMac üzerinde
F12 Windows'ta
Sayfada herhangi bir yeri sağ tıklayın ve Öğeyi İncele öğesini seçin

3

Tarayıcı içi araçlar işlerinde harikadır ve genellikle en iyi ilk tercihinizdir, ancak bazen HTTP istek / yanıt yükleri hakkında yeterli teknik ayrıntı sağlamazlar veya çok fazla sayfaya özgüdürler.

Bu durumlarda, Fiddler veya Linux alternatiflerinden biri gibi özel bir HTTP inceleme aracının daha fazla bilgi sağlayacağını görebilirsiniz.

Gerçekten metalden arınmaya ihtiyacınız varsa, Wireshark , HTTP'nin ötesine geçerek tam ağ trafiği analizine geçer, ancak ilk başta boğulmaya hazır olun.

— JasonBirch
kaynak

Kemancıya aşina olduğumu söyleyemem ama Wireshark kesinlikle aşırı derecede metaldir. Wireshark, yalnızca alt seviye protokol ayrıntılarını görmeniz gerektiğinde gerçekten kullanışlıdır.

— Evan Plaice

Fiddler, kullanılabilirlik için firebug / chrome geliştirici araçlarına daha yakındır. En kullanışlı bulduğum yerlerden biri, web sitemde KML dosyalarını yayınlarken; istekleri ve yanıtları yalnızca web tarayıcılarını değil, Google Earth gibi Windows masaüstü uygulamalarından görebilirsiniz. Wireshark'ı birkaç kez kullandım, ancak günlük webmaster işleri için genellikle yararlı olmadığını kabul ediyorum.

— JasonBirch

1

Ayrıca Google’ın açık kaynaklı Speed Tracer’ını deneyebilirsiniz - http://code.google.com/webtoolkit/speedtracer/

Speed Tracer, web uygulamalarınızdaki performans sorunlarını tanımlamanıza ve gidermenize yardımcı olan bir araçtır. Tarayıcının içindeki düşük seviyeli enstrümantasyon noktalarından alınan ölçümleri görselleştirir ve uygulamanız çalışırken bunları analiz eder. Speed Tracer bir Chrome uzantısı olarak mevcuttur ve uzantıların şu anda desteklendiği tüm platformlarda çalışır (Windows ve Linux).

Speed Tracer kullanarak, uygulamanızda zamanın nerede harcandığını daha iyi görebilirsiniz. Bu, JavaScript ayrıştırma ve yürütme, mizanpaj, CSS stili yeniden hesaplama ve seçici eşleştirme, DOM olayı işleme, ağ kaynak yükleme, zamanlayıcı yangınları, XMLHttpRequest geri aramaları, boyama ve diğerlerinden kaynaklanan sorunları içerir.

— mvark
kaynak