JavaScript snippet'lerini çalıştır

Kayce Basques

Sofia Emelianova

Konsol'da aynı kodu tekrar tekrar çalıştırdığınızı fark ederseniz kodu snippet olarak kaydetmeyi düşünebilirsiniz. Snippet'ler, sayfanın JavaScript bağlamına erişebilir. Yer işareti uygulamalarına alternatif olarak kullanılabilirler.

Kaynaklar panelinde snippet oluşturabilir ve bunları herhangi bir sayfada ve gizli modda çalıştırabilirsiniz.

Örneğin, aşağıdaki ekran görüntüsünde solda Geliştirici Araçları dokümanlarının ana sayfası, sağda ise Kaynaklar > Snippet'ler panelinde bazı snippet kaynak kodları gösterilmektedir.

Bir mesajı günlüğe kaydeden ve ana sayfanın HTML gövdesini mesajı içeren bir <p> öğesiyle değiştiren snippet kaynak kodu aşağıda verilmiştir:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Run (Çalıştır) düğmesini tıkladığınızda Console (Konsol) çekmecesi açılır ve snippet'in kaydettiği Hello, Snippets! mesajı gösterilir. Sayfanın içeriği de değişir.

Snippet'ler panelini açma

Snippet'ler bölmesinde snippet'leriniz listelenir. Bir snippet'i düzenlemek için aşağıdaki iki yöntemden birini kullanarak açın:

1. Sources > > Snippets'a gidin.

   

2. Komut Menüsü'nden:

   1. Komut Menüsü'nü açmak için Control+Shift+P (Windows/Linux) veya Command+Shift+P (Mac) tuşlarına basın.
   2. Snippets yazmaya başlayın, Snippet'leri Göster'i seçin ve Enter tuşuna basın.

   

Sources>Snippets bölmesinde, kaydettiğiniz snippet'lerin listesi gösterilir. Bu örnekte liste boştur.

Snippet oluşturun

Snippet'leri Snippet'ler panelinde veya Geliştirici Araçları'nın herhangi bir yerindeki Komut Menüsü'nden ilgili komutu çalıştırarak oluşturabilirsiniz.

Snippets (Snippet'ler) bölmesi, snippet'lerinizi alfabetik sıralama ile sıralar.

Kaynaklar panelinde snippet oluşturma

1. Snippet'ler panelini açın.
2. Yeni snippet'i tıklayın.

3. Snippet'iniz için bir ad girin ve kaydetmek için Enter tuşuna basın.

   

Komut Menüsü'nden snippet oluşturma

1. İmlecinizi Geliştirici Araçları'nın herhangi bir yerine getirin.
2. Komut Menüsü'nü açmak için Control+Shift+P (Windows/Linux) veya Command+Shift+P (Mac) tuşlarına basın.

3. Snippet yazmaya başlayın, Yeni snippet oluştur'u seçin, ardından komutu çalıştırmak için Enter tuşuna basın.

   

Yeni snippet'inize özel bir ad vermek istiyorsanız Snippet'leri yeniden adlandırma bölümüne bakın.

Snippet'leri düzenleme

1. Snippet'ler panelini açın.

2. Snippet'ler bölmesinde, düzenlemek istediğiniz snippet'in adını tıklayın. Kaynaklar paneli, dosyayı Kod Düzenleyici'de açar.

   

3. Snippet'inizdeki kodu düzenlemek için Kod Düzenleyici'yi kullanın. Snippet adının yanındaki yıldız işareti, değişikliklerinizi henüz kaydetmediğiniz anlamına gelir.

   

4. Kaydetmek için Ctrl+S (Windows/Linux) veya Command+S (Mac) tuşlarına basın.

Snippet'leri çalıştırma

Snippet oluşturmaya benzer şekilde, snippet'i hem Snippet'ler panelinde hem de Komut Menüsü'nden çalıştırabilirsiniz.

Kaynaklar panelinde snippet çalıştırma

1. Snippet'ler panelini açın.
2. Çalıştırmak istediğiniz snippet'in adını tıklayın. Kaynaklar paneli, dosyayı Kod Düzenleyici'de açar.

3. Düzenleyicinin alt kısmındaki işlem çubuğunda Çalıştır'ı tıklayın veya Control+Enter (Windows/Linux) ya da Command+Enter (Mac) tuşlarına basın.

   

Komut Menüsü'nden snippet çalıştırma

1. İmlecinizi Geliştirici Araçları'nın herhangi bir yerine getirin.
2. Komut Menüsü'nü açmak için Control+O (Windows/Linux) veya Command+O (Mac) tuşlarına basın.

3. ! karakterini ve ardından çalıştırmak istediğiniz snippet'in adını yazın.

   

4. Snippet'i çalıştırmak için Enter tuşuna basın.

Snippet'leri yeniden adlandırma

1. Snippet'ler panelini açın.
2. Snippet adını sağ tıklayın ve Yeniden adlandır'ı seçin.

Snippet'leri silme

1. Snippet'ler panelini açın.
2. Snippet adını sağ tıklayıp Kaldır'ı seçin.