JavaScript snippet'lerini çalıştır

Kayce Basques

Sofia Emelianova

Console'da aynı kodu tekrar tekrar çalıştırdığınızı fark ederseniz kodu snippet olarak kaydedebilirsiniz. Snippet'ler, sayfanın JavaScript bağlamına erişebilir. Bookmarklet'lere alternatif olarak kullanılabilirler.

Kaynaklar panelinde snippet'ler 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 DevTools dokümanları ana sayfası, sağda ise Kaynaklar > snippet'ler bölmesinde bazı snippet kaynak kodları gösterilmektedir.

Belirli 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);

Çalıştır düğmesini tıkladığınızda, snippet'in günlüğe kaydettiği Hello, Snippets! mesajını görüntülemek için Console çekmecesi açılır ve sayfanın içeriği değişir.

Snippet'ler bölmesini açma

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

1. Kaynaklar > > snippet'ler'e gidin.

   

2. Komut Menüsü'nden:

   1. Komut Menüsü'nü açmak için Ctrl+Üst Karakter+P (Windows/Linux) veya Komut+Üst Karakter+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.

   

Kaynaklar>Kısa Parçalar bölmesinde, kaydettiğiniz kısa parçaların listesi gösterilir. Bu örnekte bu liste boştur.

Snippet oluşturun

Snippet'ler bölmesinde veya DevTools'un herhangi bir yerindeki Komut Menüsü'nden ilgili komutu çalıştırarak snippet oluşturabilirsiniz.

Snippet'ler bölmesi, snippet'lerinizi alfabetik olarak sıralar.

Kaynaklar panelinde snippet oluşturma

1. Snippet'ler bölmesini açın.
2. Yeni snippet'i tıklayın.

3. Sana Özel içeriğiniz için bir ad girin ve kaydetmek üzere Enter tuşuna basın.

   

Komut menüsünden snippet oluşturma

1. İmlecinizi DevTools'un herhangi bir yerine getirin.
2. Komut Menüsü'nü açmak için Ctrl+Üst Karakter+P (Windows/Linux) veya Komut+Üst Karakter+P (Mac) tuşlarına basın.

3. Snippet yazmaya başlayın, Yeni snippet oluştur'u seçin ve 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 başlıklı makaleyi inceleyin.

Snippet'leri düzenleme

1. Snippet'ler bölmesini açın.

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

   

3. Snippet'inizdeki kodu düzenlemek için Kod Düzenleyici'yi kullanın. Sana Özel snippet'inin 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

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

Kaynaklar panelinde snippet çalıştırma

1. Snippet'ler bölmesini açın.
2. Çalıştırmak istediğiniz snippet'in adını tıklayın. Kaynaklar panelinde, dosyayı Kod Düzenleyici'de açabilirsiniz.

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

   

Komut menüsünden snippet çalıştırma

1. İmlecinizi DevTools'un herhangi bir yerine getirin.
2. Komut menüsünü açmak için Ctrl+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. Sana Özel snippet'ini çalıştırmak için Enter tuşuna basın.

Snippet'leri yeniden adlandırma

1. Snippet'ler bölmesini açın.
2. Sana Özel snippet'ini sağ tıklayıp Yeniden adlandır'ı seçin.

Snippet'leri silme

1. Snippet'ler bölmesini açın.
2. Sana Özel snippet'ini sağ tıklayın ve Kaldır'ı seçin.