Chrome DevTools (Chrome Geliştirici Araçları) kullanımı için aşağıdaki adımlar izlenebilir:
- Açma: Chrome DevTools'u açmanın birkaç yolu vardır 12:
- Kısayol yöntemi: Mac OS'ta Cmd + Opt + I, Windows'ta ise Ctrl + Shift + I tuşlarına basın 12.
- Menüden açma: Chrome tarayıcısında sağ üst köşedeki üç noktaya tıklayın, "Daha fazla araç" seçeneğini seçin ve ardından "Geliştirici araçları"nı seçin 12.
- Sağ tıklama: Sayfada herhangi bir yere sağ tıklayın ve açılan menüden "İncele" seçeneğini seçin 13.
- Temel özellikler: DevTools, çeşitli paneller ve özellikler sunar 24:
- Elements (Elementler) paneli: HTML ve CSS'yi gerçek zamanlı olarak incelemek ve değiştirmek için kullanılır 24.
- Console (Konsol) paneli: JavaScript kodunu test etmek ve hataları izlemek için kullanılır 24.
- Sources (Kaynaklar) paneli: Web sitesinin kaynak kodunu görüntülemek ve JavaScript hatalarını ayıklamak için kullanılır 34.
- Network (Ağ) paneli: Sayfanın yüklediği tüm kaynakları ve sunucu ile olan iletişimini izlemek için kullanılır 24.
- Performance (Performans) paneli: Sayfanın yükleme hızını ve optimizasyonunu analiz etmek için kullanılır 34.
- Diğer özellikler: DevTools ayrıca güvenlik kontrolü, Lighthouse ile web sitesi denetimi, bellek izleme gibi ek özellikler de sunar 14.
5 kaynaktan alınan bilgiyle göre: