Web sitenizin kaynaklarını (ör. stil sayfaları, JavaScript dosyaları ve resimler) görüntülemek ve düzenlemek için Kaynaklar panelini kullanın.
Genel Bakış
Kaynaklar paneliyle şunları yapabilirsiniz:
- Dosyaları görüntüleme
- CSS ve JavaScript'i düzenleyin.
- Herhangi bir sayfada çalıştırabileceğiniz JavaScript snippet'leri oluşturup kaydedin. Snippet'ler, yer işareti komut dosyalarına benzer.
- JavaScript'te hata ayıklama
- Geliştirici Araçları'nda yaptığınız değişikliklerin dosya sisteminizdeki koda kaydedilmesi için bir Workspace oluşturun.
Kaynaklar panelini açın.
Kaynaklar panelini açmak için aşağıdaki adımları uygulayın:
- Geliştirici Araçları'nı açın.
- Aşağıdaki tuşlara basarak Komut menüsü'nü açın:
- macOS: Command+üst karakter+P
- Windows, Linux, ChromeOS: Control+Shift+P
sourcesyazmaya başlayın, Kaynaklar panelini göster'i seçin ve Enter tuşuna basın.
Alternatif olarak, sağ üst köşede more_vert Diğer seçenekler > Diğer araçlar > Kaynaklar'ı seçin.
Dosyaları göster
Sayfanın yüklediği tüm kaynakları görüntülemek için Sayfa sekmesini tıklayın.
Sayfa sekmesi nasıl düzenlenir?
- Yukarıdaki ekran görüntüsünde
topgibi üst düzey bir HTML çerçevesini temsil eder.topsimgesini ziyaret ettiğiniz her sayfada görürsünüz.top, ana belge çerçevesini temsil eder. - Yukarıdaki ekran görüntüsünde
developers.google.comgibi ikinci düzey, bir kaynağı temsil eder. - Üçüncü düzey, dördüncü düzey ve bu şekilde devam eden düzeyler, bu kaynaktan yüklenen dizinleri ve kaynakları temsil eder. Örneğin, yukarıdaki ekran görüntüsünde kaynağın tam yolu
devsite-googler-buttondevelopers.google.com/_static/19aa27122b/css/devsite-googler-buttonşeklindedir.
Sayfa sekmesinde bir dosyayı tıklayarak içeriğini Düzenleyici sekmesinde görüntüleyin. Her tür dosyayı görüntüleyebilirsiniz. Resimlerin önizlemesini görürsünüz.
CSS ve JavaScript'i düzenleme
CSS ve JavaScript'i düzenlemek için Düzenleyici sekmesini tıklayın. Geliştirici Araçları, yeni kodunuzu çalıştırmak için sayfayı günceller.
Editor, hata ayıklama konusunda da yardımcı olur. Örneğin, söz dizimi hatalarının ve diğer sorunların (ör. başarısız CSS @import ve url() ifadeleri ile geçersiz URL'lere sahip HTML href özellikleri) yanına satır içi hata ipuçları gösterir ve bu sorunların altını çizer.
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. Geliştirici Araçları bir komut dosyasını yeniden çalıştırmaz. Bu nedenle, yalnızca işlevlerin içinde yaptığınız JavaScript değişiklikleri geçerli olur. Örneğin, console.log('A') çalışmazken console.log('B') çalışır.
Geliştirici Araçları, değişikliği yaptıktan sonra tüm komut dosyasını yeniden çalıştırdıysa A metni Console'a kaydedilmiş olurdu.
DevTools, sayfayı yeniden yüklediğinizde CSS ve JavaScript değişikliklerinizi siler. Dosya sisteminizdeki değişiklikleri nasıl kaydedeceğinizi öğrenmek için Workspace'i ayarlama başlıklı makaleyi inceleyin.
Snippet 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 Konsol'da aşağıdaki kodu tekrar tekrar yazdığınızı düşünün. Böylece Konsol'dan jQuery komutlarını ç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 Snippet olarak kaydedip istediğiniz zaman birkaç düğme tıklamasıyla uygulayabilirsiniz. DevTools, Snippet'i dosya sisteminize kaydeder. Örneğin, jQuery kitaplığını bir sayfaya ekleyen bir Snippet'i inceleyin.
Snippet çalıştırmak için:
- Dosyayı Snippets (Snippet'ler) sekmesinde açın ve en alttaki eylem çubuğunda Run'ı (Ç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 Run Snippets Of Code From Any Page (Herhangi Bir Sayfadan Kod Snippet'leri Çalıştırma) başlıklı makaleyi inceleyin.
JavaScript'te hata ayıklama
JavaScript'inizin nerede yanlış gittiğini anlamak için console.log() kullanmak yerine Chrome Geliştirici Araçları hata ayıklama araçlarını kullanmayı deneyin. Genel olarak, kodunuzda kasıtlı bir durdurma noktası olan bir kesme noktası ayarlayıp kodunuzun yürütülmesini satır satır incelemeniz gerekir.
Kodu adım adım incelerken tanımlanmış tüm özelliklerin ve değişkenlerin değerlerini görüntüleyip değiştirebilir, Konsol'da JavaScript çalıştırabilir ve daha birçok işlem yapabilirsiniz.
Geliştirici Araçları'nda hata ayıklamanın temellerini öğrenmek için JavaScript'te Hata Ayıklamaya Başlama başlıklı makaleyi inceleyin.
Yalnızca kodunuza odaklanın
Chrome Geliştirici Araçları, web uygulamaları oluştururken kullandığınız çerçeveler ve derleme araçları tarafından oluşturulan gürültüyü filtreleyerek yalnızca yazdığınız koda odaklanmanızı sağlar.
DevTools, 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 paketlenmiş ve küçültülmüş koddan ayırır.
- Bilinen üçüncü taraf kodunu yoksayar:
Ayrıca, çerçeveler tarafından destekleniyorsa hata ayıklayıcıdaki çağrı yığını 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 makalelere göz atın:
- Chrome Geliştirici Araçları'nda modern web hata ayıklama
- Örnek olay: Geliştirici Araçları ile daha iyi Angular hata ayıklama
Çalışma alanı oluşturma
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 kaydetmenizi sağlar. Bu özellik sayesinde, Geliştirici Araçları'nı kod düzenleyiciniz olarak kullanabilirsiniz.
Başlamak için Çalışma Alanlarıyla Dosyaları Düzenleme başlıklı makaleyi inceleyin.