Değişiklikler: HTML, CSS ve JavaScript değişikliklerinizi izleme

Sofia Emelianova

Geliştirici Araçları'nda yapılan kod değişikliklerini takip etmek için Değişiklikler panelini kullanın.

Genel Bakış

Değişiklikler panelini kullanarak aşağıdakilerde yaptığınız değişiklikleri takip edebilirsiniz:

• Yerel geçersiz kılma özelliği etkinken Kaynaklar bölümündeki HTML
• Öğeler > Stiller veya Kaynaklar bölümündeki CSS
• Kaynaklar bölümünde JavaScript

Değişiklikler panelinde yalnızca Geliştirici Araçları'nda yaptığınız değişiklikler gösterilir. Geliştirici Araçları'nı veya sayfanızı yeniden yüklerseniz değişiklikler kaybolur.

Geliştirici Araçları'nın değişiklikleri sayfa yüklemelerinde devam ettirmesini sağlamak için Yerel geçersiz kılma bölümündeki adımları uygulayın.

Geliştirici Araçları'nın yerel kaynaklarınıza değişiklik yazmasını sağlamak için Workspaces ile dosyaları düzenleme ve kaydetme başlıklı makaledeki adımları uygulayın.

Değişiklikler panelini açma

Değişiklikler panelini açmak için:

1. DevTools'u açın.

2. Komut Menüsü'nü açmak için Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basın.

3. changes yazmaya başlayın, Değişiklikleri Göster'i seçin ve Enter tuşuna basın.

   

Alternatif olarak, sağ üst köşede Geliştirici Araçları'nı özelleştirin ve kontrol edin > Diğer araçlar > Değişiklikler'i tıklayın.

Varsayılan olarak DevTools, Değişiklikler panelini DevTools pencerenizin alt kısmındaki Çekmece'de gösterir.

Değişikliklerinizi görüntüleme ve anlama

Değişikliklerinizi görüntülemek için:

1. DevTools'u açın.

2. Kaynaklarınızda değişiklik yapın:

   • HTML: Önce Yerel geçersiz kılmaları etkinleştirin, ardından Kaynaklar'da değişiklik yapın.
   • Öğeler > Stiller veya Kaynaklar bölümündeki CSS
   • Kaynaklar bölümünde JavaScript

3. Değişiklikler panelini açın ve panelin sağ tarafında bir dosya seçin.

4. Aşağıdakilerin vurgulandığı bir diff çıkışı gözlemleyin:

Değişiklikler paneli, diff çıktısını otomatik olarak güzel bir şekilde yazdırır. Böylece, değişiklikleri tek bir satırda görmek için yatay olarak kaydırmanız gerekmez.

CSS değişikliklerini kopyalama

Öğeler > Stiller bölümünde CSS'de değişiklik yaptıysanız bunların tümünü tek bir düğmeyle kopyalayabilirsiniz:

1. Değişiklikler panelini açın ve panelin sağ tarafında, değişiklik yaptığınız CSS dosyasını seçin.

   

2. Değişiklikler panelinin alt kısmındaki Kopyala düğmesini tıklayın.

Dosyada yapılan tüm değişiklikleri geri alma

Bir dosyada yapılan değişiklikleri geri almak için:

1. Değişiklikler panelinin sol tarafında, geri alınacak değişikliklerin bulunduğu bir dosya seçin.
2. Alttaki işlem çubuğunda Tüm değişiklikleri mevcut dosyaya döndür'ü tıklayın.