Chrome Geliştirici Araçları Kaynakları panelini kullanarak:
- Dosyaları görüntüleme.
- CSS ve JavaScript'i düzenleyin.
- Herhangi bir sayfada çalıştırabileceğiniz JavaScript Snippet'lerini oluşturup kaydedin. Snippet'ler yer işareti uygulamalarına benzer.
- JavaScript hatalarını ayıkla.
- Geliştirici Araçları'nda yaptığınız değişikliklerin dosya sisteminizdeki koda kaydedilmesi için bir Çalışma Alanı kurun.
Dosyaları göster
Sayfanın yüklediği tüm kaynakları görüntülemek için Sayfa bölmesini kullanın.
Sayfa bölmesinin düzenlenme biçimi:
- Yukarıdaki ekran görüntüsündeki
top
gibi bir üst düzey, bir HTML çerçevesini temsil eder.top
uygulamasını ziyaret ettiğiniz her sayfada bulabilirsiniz.top
, ana doküman çerçevesini temsil eder. - Yukarıdaki ekran görüntüsündeki
developers.google.com
gibi ikinci düzey, bir kaynağı temsil eder. - Üçüncü düzey, dördüncü düzey vb., ilgili kaynaktan yüklenen dizinleri ve kaynakları temsil eder. Örneğin, yukarıdaki ekran görüntüsünde
devsite-googler-button
kaynağının tam yoludevelopers.google.com/_static/19aa27122b/css/devsite-googler-button
şeklindedir.
İçeriğini Düzenleyici bölmesinde görüntülemek için Sayfa bölmesinde bir dosyayı tıklayın. Her tür dosyayı görüntüleyebilirsiniz. Resimler için resmin önizlemesini görürsünüz.
CSS ve JavaScript'i düzenleyin
CSS ve JavaScript'i düzenlemek için Düzenleyici bölmesini kullanın. Geliştirici Araçları, yeni kodunuzu çalıştırmak için sayfayı günceller.
Düzenleyici, hata ayıklamanıza da yardımcı olur. Örneğin, söz dizimi hatalarının yanı sıra başarısız CSS @import
ve url()
ifadeleri ile geçersiz URL'lere sahip HTML href
özellikleri gibi diğer sorunların yanındaki satır içi hata ipuçlarının altını çizer ve gösterir.
Bir öğenin background-color
özelliğini düzenlerseniz değişikliğin hemen geçerli olduğunu görürsünüz.
JavaScript değişikliklerinin geçerli olması için Command+S (Mac) veya Control+S (Windows, Linux) tuşlarına basın. DevTools bir komut dosyasını yeniden çalıştırmaz. Bu nedenle, geçerli olan JavaScript değişiklikleri yalnızca işlevlerin içinde yaptığınız değişikliklerdir. Örneğin, console.log('A')
nasıl çalışmaz, console.log('B')
ise çalışır.
Geliştirici Araçları bu değişikliği yaptıktan sonra komut dosyasının tamamını yeniden çalıştırırsa A
metni Konsol'da günlüğe kaydedilir.
Geliştirici Araçları, sayfayı yeniden yüklediğinizde CSS ve JavaScript değişikliklerinizi siler. Değişiklikleri dosya sisteminize nasıl kaydedeceğinizi öğrenmek için Çalışma alanı ayarlama bölümüne bakın.
Snippet'leri oluşturma, kaydetme ve çalıştırma
Snippet'ler, herhangi bir sayfada çalıştırabileceğiniz komut dosyalarıdır. jQuery kitaplığını bir sayfaya eklemek için Console'a sürekli olarak aşağıdaki kodu yazdığınızı varsayalım. Böylece Console'dan jQuery komutları çalıştırabilirsiniz:
let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);
Bunun yerine, bu kodu bir Snippet'e kaydedebilir ve ihtiyacınız olduğunda birkaç düğmeyi tıklayarak çalıştırabilirsiniz. Geliştirici Araçları, Snippet'i dosya sisteminize kaydeder. Örneğin, jQuery kitaplığını bir sayfaya ekleyen bir Snippet'i inceleyin.
Snippet çalıştırmak için:
- Snippet'ler bölmesinde dosyayı açın ve alttaki işlem çubuğunda Çalıştır'ı tıklayın.
- Komut Menüsü'nü açın,
>
karakterini silin,!
yazın, Snippet'inizin adını yazın ve Enter tuşuna basın.
Daha fazla bilgi edinmek için Herhangi Bir Sayfadan Kod Snippet'lerini Çalıştırma konusuna bakın.
JavaScript hatalarını ayıkla
JavaScript'inizin hangi noktada yanlış gittiğini anlamak için console.log()
kullanmak yerine, bunun yerine Chrome Geliştirici Araçları hata ayıklama araçlarını kullanabilirsiniz. Temel fikir, kodunuzda kasten durma noktası olan bir ayrılma noktası belirlemek ve sonra her defasında bir satır olacak şekilde kodunuzun yürütülmesine adım atmaktır.
Kodda adım adım ilerlerken, hâlihazırda tanımlı olan tüm özelliklerin ve değişkenlerin değerlerini görüntüleyebilir ve değiştirebilir, Konsol'da JavaScript çalıştırabilir ve daha pek çok işlem yapabilirsiniz.
Geliştirici Araçları'nda hata ayıklamayla ilgili temel bilgileri öğrenmek için JavaScript Hatalarını Ayıklamaya Başlama bölümüne bakın.
Yalnızca kodunuza odaklanın
Chrome Geliştirici Araçları, çerçeveler tarafından oluşturulan gürültüyü filtreleyerek yalnızca sizin yazdığınız koda odaklanmanıza ve web uygulamaları oluştururken yararlandığınız araçlar oluşturmanıza olanak tanır.
Geliştirici Araçları, size modern web hata ayıklama deneyimi sunmak için aşağıdakileri yapar:
- Yazılan ve dağıtılan kodu ayırır. Kodunuzu daha hızlı bulmanıza yardımcı olmak için Kaynaklar paneli, oluşturduğunuz kodu gruplandırılmış ve küçültülmüş koddan ayırır.
- Bilinen üçüncü taraf kodu yok sayar:
- Kaynaklar paneli, Sayfa bölmesindeki dosya ağacından bu tür kaynakları gizler.
- Console, bu tür kareleri yığın izlemelerden gizler.
- Dosya Aç menüsü bu tür dosyaları arama sonuçlarında gizler.
Ayrıca, çerçeveler tarafından destekleniyorsa hata ayıklayıcıdaki Çağrı Grubu ve Konsol'daki yığın izlemeler, eşzamansız işlemlerin tam geçmişini gösterir.
Daha fazla bilgi edinmek için aşağıdaki makaleleri inceleyin:
- Chrome Geliştirici Araçları'nda modern web hata ayıklama
- Örnek Olay: Geliştirici Araçları ile Better Angular Hata Ayıklama
Çalışma Alanı kurma
Varsayılan olarak, Kaynaklar panelinde bir dosyayı düzenlediğinizde bu değişiklikler sayfayı yeniden yüklediğinizde kaybolur. Çalışma alanları, Geliştirici Araçları'nda yaptığınız değişiklikleri dosya sisteminize kaydedebilmenizi sağlar. Temel olarak bu, kod düzenleyiciniz olarak Geliştirici Araçları'nı kullanmanıza olanak tanır.
Başlamak için Çalışma Alanlarıyla Dosyaları Düzenleme başlıklı makaleyi inceleyin.