Chrome DevTools ile koddaki değişikliklerin etkilerini anında görebiliriz
Chrome DevTools, Google Chrome'da yerleşik olarak bulunan web sitesi oluşturma ve hata ayıklama araçları seti. Elbette bunları da kullanabiliriz açık kaynak sürümünde; Krom.
Geliştiriciler için Chrome araçlarına Ctrl + Shift + I tuş kombinasyonuna basarak, ayrıca bir öğenin üzerine gelip Denetle'ye sağ tıklayarak da erişmek mümkündür.
Componentes
Chrome DevTools'u açtığımızda u göründüğünü görüyoruzGöz attığımız sayfanın sağındaki panel. Bu panel eAraçların her birine karşılık gelen sekmelere bölünmüştür. Sırayla, araçlar bölümlere ayrılmıştır.
Bölümler:
- Öğeler: Sayfanın farklı bileşenlerini gösterir.
- Konsol: Geliştirme sırasında tanılama çalıştırmanıza veya Linux terminalinde olduğu gibi Javascript koduyla etkileşimde bulunmanıza izin verir.
- Kaynaklar: Javascript kodunda hata ayıklamayı ve yerel dosyalarla çalışmayı kolaylaştırır.
- Ağ: Sayfa performansının izlenmesine ve iyileştirilmesine yardımcı olur.
- Zaman Çizelgesi: Bir siteye yapılan ziyaret sırasında meydana gelen farklı olayların kaydedilmesine ve araştırılmasına izin verir.
- Uygulama: Yüklenen tüm kaynakları araştırır; diğerleri arasında, IndexedDB veya Web SQL veritabanları, yerel ve oturum depolama, tanımlama bilgileri, uygulama önbelleği, görüntüler, yazı tipleri ve stil sayfaları.
- Güvenlik: Koddaki güvenlik sorunlarını algılar.
Bakalım Chrome DevTools'u ne için kullanabiliriz?
Çalışmayanları düzeltin
Her geliştiricinin başına geldi. Kodu yazın, hata olup olmadığını kontrol edin ve yine de gerçek şu anda sayfa olması gerektiği gibi çalışmıyor. Konsol aracı yürütme sırasında hangi hatanın meydana geldiğini gösterir.
Yükleme süresini azaltın
Bir sayfanın yüklenmesi uzun sürerse, kullanıcı yorulur ve başka bir siteye gider. Neyse ki, Flash web siteleri çağı ve bunların animasyonlu tanıtımları sona erdi. Her neyse, Chrome Geliştirme Araçlarının Ağlar sekmesi hangi elemanların yükü geciktirdiğini bulmayı kolaylaştırır. Testi farklı bağlantı hızları için tekrarlayabiliriz.
Kodu değiştirin
Elements sekmesinde şunları yapabiliriz: bir sayfanın öğelerini, ilgili html kodunu ve css özelliklerini görün. Onları da değiştirebiliriz.
Komutunu kullanarak bir sayfanın metnini düzenleyebiliriz
document.designMode = 'on';
Farklı ekran boyutlarını deneyin
Tabletler, akıllı telefonlar, akıllı TV'ler, masaüstü bilgisayarlar. İnternette gezindiğimiz cihazların listesi büyüyor. Chrome DevTools ile şunları yapabiliriz: bir sayfanın farklı boyutlarda iyi görünüp görünmediğini test edin.
Kıyaslama
Yönetimde kıyaslama terimi, bizimle aynı şeyi yapanların en iyi uygulamalarından öğrenmek anlamına gelir. Chrome DevTolls ile, bir web sitesinin tasarımını beğenirsek, html kodunu ve css stil sayfalarını görüntüleyin ve bunları sitemize kopyalayın.
Chrome Geliştirme Araçlarını Edinme
Chrome DevTools, Google Chrome ve Chromium tarayıcılarında mevcuttur. Chromium, ana dağıtımların depolarında bulunur. Mağazalardan da kurulabilir çıtçıt. Google Chrome'a gelince şunları yapabilirsiniz: buraya gel. DEB ve RPM biçiminde