Chrome Geliştirici Araçları, doğrudan Google Chrome tarayıcıda yerleşik olarak bulunan bir dizi web geliştiricisi aracıdır. Geliştirici Araçları, sayfaları anında düzenlemenize ve sorunları hızlı bir şekilde teşhis etmenize yardımcı olabilir. Böylece, daha iyi web sitelerini daha hızlı bir şekilde oluşturabilirsiniz.
CSS hata ayıklama, CSS prototipi oluşturma, JavaScript hata ayıklama ve yük performansını analiz etme dahil olmak üzere temel Geliştirici Araçları iş akışlarının canlı demoları için videoya göz atın.
Geliştirici Araçları'nı aç
Farklı kullanıcılar Geliştirici Araçları kullanıcı arayüzünün farklı bölümlerine hızlı bir şekilde erişmek istediği için Geliştirici Araçları'nı açmanın birçok yolu vardır.
- DOM veya CSS ile çalışmak için sayfadaki bir öğeyi sağ tıklayın ve İncele'yi seçerek Öğeler paneline gidin. İsterseniz Command+Option+C (Mac) veya Control+Üst Karakter+C (Windows, Linux, ChromeOS) tuşlarına da basabilirsiniz.
- Günlüğe kaydedilen mesajları görmek veya JavaScript'i çalıştırmak için Command+Option+J (Mac) veya Control+Üst Karakter+J (Windows, Linux, ChromeOS) tuşlarına basarak doğrudan Konsol paneline gidin.
Daha fazla bilgi ve iş akışı için Chrome Geliştirici Araçları'nı açma başlıklı makaleyi inceleyin.
Başlayın
Daha deneyimli bir web geliştiricisiyseniz Geliştirici Araçları'nın üretkenliğinizi nasıl artırabileceğini öğrenmek için önerilen başlangıç noktalarını aşağıda bulabilirsiniz:
- DOM'yi görüntüleme ve değiştirme
- CSS'yi görüntüleme ve değiştirme
- JavaScript hatalarını ayıkla
- Konsolda mesajları görüntüleme ve JavaScript çalıştırma
- Web sitesi hızını optimize etme
- Ağ etkinliğini inceleme
Geliştirici Araçları'nı keşfedin
DevTools kullanıcı arayüzü biraz göz korkutucu olabilir. Pek çok sekme var. Ancak, nelerin mümkün olduğunu anlamak için her sekmeyi tanımaya zaman ayırırsanız Geliştirici Araçları'nın üretkenliğinizi önemli ölçüde artırabileceğini keşfedebilirsiniz.
Cihaz Modu
Mobil cihazları simüle eder.
Nesne paneli
DOM ve CSS'yi görüntüleyip değiştirin.
- DOM'yi görüntülemeye ve değiştirmeye başlama
- CSS'yi görüntülemeye ve değiştirmeye başlama
- CSS'yi düzenleme
- DOM'u düzenleme
- Geçersiz, geçersiz kılınmış, etkin olmayan ve diğer CSS'leri bulma
- CSS ile ilgili olası iyileştirmeleri belirleme
- Açık/koyu temaları, kontrastı ve diğer CSS medya özelliklerini emüle etme
- Kullanılmayan CSS'yi bulma
- Animasyonları inceleme
Konsol paneli
Console'dan mesajları görüntüleyin ve JavaScript'i çalıştırın.
Kaynaklar paneli
JavaScript hatalarını ayıklayın, sayfaların yeniden yüklenmesinde Geliştirici Araçları'nda yapılan değişiklikleri koruyun, JavaScript snippet'lerini kaydedip çalıştırın ve Geliştirici Araçları'nda yaptığınız değişiklikleri yerel kaynaklara kaydedin.
- JavaScript hatalarını ayıklamaya başlama
- Kodunuzu kesme noktalarıyla duraklatma
- Çalışma alanında dosya düzenleme ve kaydetme
- JavaScript snippet'lerini çalıştırma
- JavaScript hata ayıklama referansı
- Web içeriğini ve HTTP yanıt başlıklarını yerel olarak geçersiz kılma
Ağ paneli
Ağ etkinliğini görüntüleyin ve hata ayıklayın.
Kaydedici paneli
Kullanıcı işlemleri akışını kaydedin, tekrar oynatın ve ölçün.
- Kullanıcı akışlarını kaydetme, tekrar oynatma ve ölçme
- Kaydedici'yi uzantılarla özelleştirme
- Kaydedici özellikleri referansı
Performans paneli
Yük ve çalışma zamanı performansını iyileştirmenin yollarını bulun.
- Web sitesi hızını optimize etme
- Çalışma zamanı performansını analiz etme
- Performans özellikleri referansı
Bellek paneli
Sayfa performansını etkileyen bellek sorunlarını (ör. bellek sızıntıları) bulup düzeltin.
Uygulama paneli
IndexedDB veya Web SQL veritabanları, yerel ve oturum depolaması, çerezler, Uygulama Önbelleği, görüntüler, yazı tipleri ve stil sayfaları da dahil olmak üzere yüklenen tüm kaynakları inceleyin.
- Progresif Web uygulamalarında hata ayıklama
- Yerel depolama alanını görüntüleme ve düzenleme
- Çerezleri görüntüleme, ekleme, düzenleme ve silme
- Kaynak denemesiyle ilgili bilgileri görüntüleme
Güvenlik paneli
Karma içerik sorunları, sertifika sorunları ve daha fazlasında hata ayıklayın.
Topluluk
Mühendislik ekibinin hata izleyicisi olan Crbug'da hata raporlarını ve özellik isteklerini gönderin.
Bir hata veya özellik isteği konusunda bizi uyarmak istiyorsanız ancak fazla zamanınız yoksa @ChromeDevTools adresine tweet gönderebilirsiniz. Hesaptan düzenli olarak gelen duyuruları yanıtlayıp göndeririz.
Geliştirici Araçları'nı kullanma konusunda yardım almak için en iyi kanal Stack Overflow'dur.
Hataları veya özellik isteklerini Geliştirici Araçları belgelerinde bildirmek için bir GitHub sorunu açın.
Geliştirici Araçları'nın da bir Slack kanalı var ancak ekip bu kanalı tutarlı bir şekilde izlemiyor.