Kaynaklar paneline genel bakış

Kayce Basques

Sofia Emelianova

Chrome Geliştirici Araçları Kaynaklar panelini kullanarak şunları yapabilirsiniz:

• Dosyaları görüntüleyebilirsiniz.
• CSS ve JavaScript'i düzenleyin.
• Tüm sayfalarda çalıştırabileceğiniz JavaScript Snippet'leri oluşturun ve kaydedin. Snippet'ler benzerdir.
• JavaScript hatalarını ayıkla.
• Geliştirici Araçları'nda yaptığınız değişikliklerin dosyanızdaki koda kaydedilmesi için çalışma alanı oluşturun bahsedeceğim.

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 şekli:

• Yukarıdaki ekran görüntüsündeki top gibi üst düzey bir HTML çerçevesini temsil eder. top hizmetini şurada bulabilirsiniz: tüm sayfalar açılır. top, ana doküman çerçevesini temsil eder.
• Yukarıdaki ekran görüntüsünde yer alan developers.google.com gibi ikinci düzey, bir kaynağı temsil eder.
• Üçüncü düzey, dördüncü düzey vb., yüklenen dizinleri ve kaynakları temsil eder Google'a gönderir. Örneğin, yukarıdaki ekran görüntüsünde kaynağın tam yolu devsite-googler-button developers.google.com/_static/19aa27122b/css/devsite-googler-button.

İçeriğini Düzenleyici bölmesinde görmek için Sayfa bölmesinde bir dosyayı tıklayın. Tüm türleri görüntüleyebilirsiniz dosyası. Resimler için resmin önizlemesini görürsünüz.

Not: Sayfa bölmesinde yalnızca yüklenen ve dağıtılan stil sayfalarının listelendiğini unutmayın.

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 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ında satır içi hata ipuçlarının altını çizerek gösterir.

Bir öğenin background-color özelliğini düzenlerseniz değişikliğin geçerli olduğunu görürsünüz hemen teslim edebilirsiniz.

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ı 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ışırken console.log('B') çalışma şeklinin nasıl çalıştığını not edin.

Geliştirici Araçları değişikliği yaptıktan sonra komut dosyasının tamamını yeniden çalıştırırsa A metni Konsol.

Geliştirici Araçları, sayfayı yeniden yüklediğinizde CSS ve JavaScript değişikliklerinizi siler. Daha fazla bilgi için Workspace başlıklı makaleye göz atın.

Snippet'leri oluşturma, kaydetme ve çalıştırma

Snippet'ler, herhangi bir sayfada çalıştırabileceğiniz komut dosyalarıdır. Aynı soruyu tekrar tekrar yazdığınızı Konsol'da aşağıdaki kodu kullanarak jQuery kitaplığını bir sayfaya eklemek için: jQuery komutlarını Konsoldan çalıştırabilir:

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 istediğiniz zaman birkaç düğmeyi tıklayarak çalıştırabilirsiniz ihtiyacınız var. Geliştirici Araçları, Snippet'i dosya sisteminize kaydeder. Örneğin, bir Snippet jQuery kitaplığını bir sayfaya yerleştiren dosyadır.

Snippet çalıştırmak için:

• Dosyayı Snippet'ler bölmesinde açın ve alt kısımdaki işlem çubuğunda Çalıştır'ı tıklayın.
• Komut menüsünü açın, > karakterini silin, ! yazın ve Snippet'i ve ardından Enter tuşuna basın.

Daha fazla bilgi edinmek için Herhangi Bir Sayfadan Kod Snippet'i Çalıştırma bölümüne bakın.

JavaScript hatalarını ayıkla

JavaScript'inizin nerede yanlış gittiğini anlamak için console.log() kullanmak yerine, Chrome Geliştirici Araçları hata ayıklama araçlarını kullanın. Genel fikir, bir ayrılma noktası belirlemektir. Bu, kodda kasıtlı olarak durdurmaya çalışın ve ardından, her defasında bir satır olacak şekilde kodunuzun yürütülmesine gerekir.

Kodda ilerledikçe, daha önce tanımlanmış tüm anahtar kelimelerin değerlerini görüntüleyebilir ve değiştirebilirsiniz. özellikleri ve değişkenleri alabilir, Konsolda JavaScript'i çalıştırabilir ve daha fazlasını 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

Not: Aşağıdaki özellikler Chrome 106 sürümünde kullanılabilir.

Chrome Geliştirici Araçları, çerçevelerin oluşturduğu gürültüyü filtreleyerek ve web uygulamaları oluştururken yararlandığınız araçları geliştirerek yalnızca sizin yazdığınız koda odaklanmanıza olanak tanır.

Geliştirici Araçları, size modern web hata ayıklama deneyimini sağlamak 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 yok sayar:
  • Kaynaklar paneli, bu tür kaynakları Sayfa bölmesindeki dosya ağacında gizler.
  • Konsol, bu tür kareleri yığın izlemelerden gizler.
  • Dosya Aç menüsü, bu tür dosyaları arama sonuçlarından gizler.

Ayrıca, çerçeveler tarafından destekleniyorsa hata ayıklayıcıdaki Çağrı Yığını ve Konsoldaki yığın izlemeler, eşzamansız işlemlerin tüm 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 Daha İyi Açısal Hata Ayıklama

Workspace kurulumu yapma

Varsayılan olarak, Kaynaklar panelinde bir dosyayı düzenlediğinizde, yeniden yüklediğinizde bu değişiklikler kaybolur yapalım. Çalışma alanları, Geliştirici Araçları'nda yaptığınız değişiklikleri dosyanıza kaydetmenize olanak tanır bahsedeceğim. Özetle, Geliştirici Araçları'nı kod düzenleyiciniz olarak kullanabilirsiniz.

Başlamak için Çalışma Alanları Olan Dosyaları Düzenleme başlıklı makaleyi inceleyin.