DevTools Showdown Edge'in F12'i Firefox'a vs Chrome'a
Windows 10’un yeni varsayılan tarayıcısı olan Microsoft Edge’in Geliştirici Araçları, öncül İnternet Explorer 11’in F12 Dev Tools’u ile karşılaştırıldığında modern bir tasarıma ve birkaç yeni özelliğe sahipti..
Microsoft Edge'in geliştirme araçlarının popüler rakiplerine (Mozilla Firefox ve Google Chrome gibi diğer modern tarayıcılardaki geliştirme araçları) ölçüp ölçmeyeceği sorusu doğal olarak birçok geliştiricinin kafasında ortaya çıkmaktadır..
Bu yazıda, bu soruyu yanıtlamaya ve Edge'in F12 Dev Tools'un gerçekten kullanmaya değer olup olmadığını anlamaya çalışıyoruz. Özellikleri Firefox'un Geliştirici Araçları ve Google Chrome'un DevTools ile karşılaştırıyoruz..
Geliştirici Araçları'nı açın
F12'ye basmak, geliştirici araçlarını her üç durumda da açar: Firefox'ta Geliştirici Araçları, Chrome'da DevTools ve Microsoft Edge'de F12 Geliştirici Araçları. Bu klavye kısayolu Edge'in F12 Dev Tools resmi adı gelen.
Edge'in Geliştirici Araçları'nı açtığınızda, en bilinen eksikliklerinden bir tanesinde aynı anda deneyimleyebilirsiniz: araçları mevcut pencereye sabitlemek imkansız. Geliştirme araçları penceresini ekranın altına sabitleyerek Firefox Developer Tools ve Chrome DevTools'taki ekranda neler olup bittiğini takip edebilirken, (şu anda) Edge ile aynı şeyi yapamazsınız.
Microsoft'un geliştiricileri, gelecekteki bir güncellemede bu sorunu çözeceklerini iddia ediyor.
DOM'u inceleyin
DOM Gezgini aracı (Kısayol: CTRL + 1), Microsoft Edge'in F12 Geliştirme Aletleri'nin ilk sekmesidir. Düzeni ve genel tasarımı oldukça benzer eleman Chrome sekmesi ve müfettiş Firefox’ta sekmesi var, ancak yetenekler çok farklı.
Edge'de işlenen HTML belgesine, ilgili CSS stillerine ve her bir öğede kayıtlı olay işleyicilere bakabilirsiniz. Ayrıca, iki rakip tarayıcıda iyi bilinen hesaplanmış değerlerle CSS kutu modeli hakkında küçük grafiği de bulabilirsiniz..
Yapabilirsin CSS kuralları ile deneme mevcutları silerek ve yenilerini ekleyerek özetlenmiş değişiklikler ayrı bir alt sekmede “değişiklikler” (sol tarafta bulunur). Bu ikincisi, Firefox Developer ya da Chrome DevTools'ta yerleşik olmayan bir özelliktir. Kullanıcıya hızlı bir özet verebilir, bu yüzden gerçekten kullanışlı bir seçenek.
Firefox Geliştirici Araçları'nda, ne Edge ne de Google Chrome'un sağladığı, ancak bir tasarımcının hayatına önemli ölçüde yardımcı olabilecek bazı özellikler vardır: Yazı Tipi ve Animasyon analiz aracı.
Kenarda bir serin renk seçici Yine de bu, kullanıcıyı bunun için biraz telafi edebilir..
JavaScript ile etkileşime gir
konsol Microsoft Edge'deki sekme (Kısayol: CTRL + 2), Firefox ve Chrome Dev Tools'daki gibi sitenizin JavaScript ile etkileşime girmenize olanak sağlar. Üçü de JavaScript hatalarını gerçek zamanlı olarak izlemenize izin verir ve kendi girişinizi girerek bunları analiz edebilirsiniz..
Edge F12 Dev Tools'un Konsol aracı hoş bir görünüme sahip otomatik tamamlama özelliği bu komutlarda size yardımcı olur, ancak daha az bilgili Firefox ve Chrome Dev Tools'dakilerle karşılaştırıldığında.
kenar Hataları, Uyarıları ve Mesajları ayırır Bu, diğer iki araç setinin sahip olmadığı bir şey olmasa da büyük bir yardımdır..
Firefox's Console, aynı zamanda bu üç dev araçtan en profesyonel gibi görünüyor. ayrı ayrı diğer sorunları da gösterir: ağ, CSS, güvenlik hataları ve günlük mesajları, ve bunlarla iletişim kurmanıza olanak tanır. Konsol arayüzü, sadece JavaScript hatalarıyla değil.
Kodunuzun Ne Yaptığını Anlayın
Debugger aracı (Kısayol: CTRL + 3) olası hataları bulurken kodunuza ne olduğunu anlamanıza yardımcı olur. Saatleri ve kesme noktalarını ayarlayabilir ve arama yığınlarını görüntüleyebilirsiniz..
Saatler bölmesi değişken değerleri gösterir, Geri arama modu geçerli duruma yol açan fonksiyon çağrıları zincirini gösterir ve Kesme Noktaları modu, ayarladığınız kesme noktalarının bir listesini gösterir..
Edge'in F12 Dev Araçları kodunu duraklat İnfazın ortasında ve o çizgiden çizgiye doğru ilerleyin. Ayrıca seçeneğiniz var Derlenmiş veya küçültülmüş bir JavaScript dosyasının okunabilirliğini artırmak, ve yapabilirsin farklı kaynaklarda hata ayıklama (JavaScript, uzantılar, vb.) Birer birer.
Firefox ve Chrome DevTools tüm bu işlevleri sunar, böylece Edge olağanüstü bir hata ayıklama deneyimi sunmaz, ancak kullanıcıya rakipleriyle aynı seviyede sağlam ve güvenilir bir araç sunar..
Tarayıcı-Sunucu İletişimine Bakın
Ağ aracı (Kısayol: CTRL + 4), Internet Explorer 11'den bu yana Microsoft Edge için tamamen yeniden tasarlandı. Bu kullanışlı aracın yardımıyla sunucu ve tarayıcı arasındaki iletişimi izleyin, ve bireysel istekleri incelemek.
Yapabilirsin sonuçları içerik türüne göre filtrele stil sayfaları, resimler, medya, yazı tipleri, XHR ve diğerleri gibi. Ayrıca AJAX hata ayıklama Ağ aracı yardımıyla.
Edge'in ve Firefox'un Network sekmesi oldukça benzer özellikler ve kullanıcı arayüzü sunuyor. Her ikisi de, seçilen kaynağın HTTP başlığına, HTTP gövdesine, parametrelerine, ilgili çerezlere ve zamanlama öğelerine göre bir göz atmanızı sağlayan kullanıcı dostu bir kenar çubuğu bölmesine sahiptir.
Chrome DevTools'un Ağı sekmesinde bunun gibi bir bölme yoktur, ancak istekleri tek tek tıklarsanız aynı bilgileri görebilirsiniz. Yine de daha az sezgisel bir çözüm.
Yavaş Sayfaları İzleyin
performans sekmesi (Kısayol: CTRL + 5) yavaş bir web sayfasının arkasındaki nedenleri anlamanıza yardımcı olur. Performans aracıyla Microsoft, öncekileri birleştirerek büyük bir adım attı. UI Duyarlılığı ve Profilcisi Tüm komut dosyalarınızın uçtan uca görünümünü oluşturma ve performansı görselleştirme araçları.
Bu kullanışlı araç size raporlar sunar. farklı CPU kullanım tipleri, Sitenizin çerçeve boyası hakkında size fikir verir ve zaman çizelgesinde etiketleri ayarlayarak farklı kullanıcı senaryolarını izole et.
Test sürecinde Edge'teki Performans aracının bize sağladığı tespit edildi. Hız sorunları hakkında daha fazla bilgi Firefox Geliştirici veya Chrome DevTools’tan daha fazla. Edge'teki Performans sekmesinin kullanıcı arayüzü oldukça iyi tasarlanmış, birçok görsel ipucunda bize yardımcı oluyor ve nispeten kullanımı kolay. Nasıl kullanılacağı hakkında daha fazla bilgi edinmek istiyorsanız, ayrıntılı Dokümanlar'ı okuyun..
Bellek Sorunlarını Teşhis Et
Bellek aracı (Kısayol: CTRL + 6) mümkün kılar bellek sızıntılarını bulmak Bu aynı zamanda web sayfanızı da yavaşlatabilir. istikrarı etkilemek sitenizin.
Hoş bir grafik yardımıyla, bellek kullanımınızın nerede büyüdüğünü kolayca anlayabilir ve bellek kullanımını analiz etmeyi mümkün kılan belirli noktalarda anlık görüntüler alabilirsiniz. Ayrıca farklı noktalarda yapılan iki fotoğrafı karşılaştır Sayfa yaşam döngüsünün aralarındaki farkı anlamak için.
Chrome DevTools ayrıca Profiller sekmesi altında hoş bir bellek profili oluşturucusuna sahipken, Firefox Developer bu özelliği varsayılan olarak sunmaz, ancak isterseniz bu tür eklentileri indirip yükleyebilirsiniz. Chrome DevTools'un bellek profili oldukça gelişmiş ve Edge'inkinden daha fazla özellik sunuyor; zaman içinde JavaScript nesne tahsislerini kaydet bellek sızıntılarını izole etmenize yardımcı olabilir.
Sitenizi Farklı Ekran Boyutlarında Test Edin
emülasyon aracı (Kısayol: CTRL + 7), sitenizi farklı koşullar altında test etmenizi sağlar. İki tarayıcı profilinden birini seçin; Desktop ve Windows 10 Mobile ve Internet Explorer'ın tüm masaüstü ve mobil sürümleri IE6'ya geri dönmeyi de içeren pek çok farklı kullanıcı aracısından seçim yapabilirsiniz..
Seçme seçeneğine sahip olmanız ilginç. sayfanıza Bing Bot olarak bakın. Ayrıca GPS'e öykünmek, ve ayarla farklı çözünürlükler ve yönler.
Firefox Geliştirici Araçları'nda bir aygıt emülasyon aracı yoktur, ancak Chrome DevTools, Edge'in zorlukla rekabet edebileceği o kadar gelişmiş bir öykünücüye sahiptir:.
Örneğin, Chrome'un öykünme ekranı bir öykünülmüş görünümün yerleştirildiği doğru ızgara, ve yalnızca tarayıcı profilleri ve kullanıcı aracıları arasından değil, aynı zamanda farklı versiyonlar iPhone veya Samsung Galaxy ve diğerleri. Chrome DevTools'un emülatörü de kullanışlı Yakınlaştırma seçeneği Sitenizi 3G, 4G, DSL, WiFi gibi farklı ağlarda test edebilirsiniz..
özet
Genel olarak, Microsoft Edge'in F12 Dev Tools, şaşırtıcı derecede iyi görünüyor. Diğer modern tarayıcıların popüler web geliştirme araçlarına oldukça benzer özellikler sunar. Edge'in F12 Dev Tools'un oldukça güçlü olduğu iki alan var: Kullanıcı arayüzü bu gerçek sezgisel, kullanıcı dostu ve iyi tasarlanmış, ve performans tanılama araçları.
Bu iki özellik için Edge'e geçmeyi veya en azından Edge'i test etmeyi düşünmek faydalı olabilir. En büyük eksiklik, geliştirme araçlarını ekranın altına sabitleme olanağının bulunmaması, ancak Microsoft'un bu sorunu hızla çözeceğini umalım.
