Kaynaklar paneline genel bakış

Sofia Emelianova
Sofia Emelianova

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

Dosyaları göster

Sayfanın yüklediği tüm kaynakları görüntülemek için Sayfa bölmesini kullanın.

Sayfa bölmesi.

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.

Düzenleyici bölmesinde dosya görüntüleme.

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.

Satır içi söz dizimi hatası ipucu.

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

Düzenleyici bölmesinde CSS düzenleniyor.

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.

Düzenleyici bölmesinde JavaScript düzenleniyor.

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.

jQuery kitaplığını bir sayfaya yerleştiren Snippet.

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Çalıştır düğmesi. 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.

Bir kesme noktasında duraklatma.

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

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:

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:

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.