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'lerin alternatifidir.

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.

Bazı mesajları günlüğe kaydeden ve ana sayfanın HTML gövdesini iletiyi 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 Konsol çekmecesi açılarak snippet'in günlüğe kaydettiği ve sayfanın içeriğinin değiştiğini belirten Hello, Snippets! mesajı görüntülenir.

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>Snippet'ler bölmesinde, kaydettiğiniz snippet'lerin listesi bu örnekte boş olarak gösterilir.

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 Geliştirici Araçları'nda herhangi bir yere odaklayın.
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 paneli, bu kaynağı 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ında yıldız işareti bulunması, yaptığınız değişiklikleri 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 paneli, bu kaynağı Kod Düzenleyici'de açar.

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 sil

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