JavaScript snippet'lerini çalıştır

Aynı kodu Konsol'da tekrar tekrar çalıştırıyorsanız kodu snippet olarak kaydetmeyi düşünebilirsiniz. Snippet'ler sayfanın JavaScript bağlamına erişebilir. Bunlar, yer işareti uygulamalarına bir alternatiftir.

Snippet'leri Kaynaklar panelinde yazabilir 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ı ana sayfası ve sağ tarafta Kaynaklar > Snippet'ler bölmesinde bazı snippet kaynak kodları gösterilmektedir.

Bazı iletileri günlüğe kaydeden ve ana sayfanın HTML gövdesini, iletiyi içeren bir <p> öğesiyle değiştiren snippet kaynak kodunu burada görebilirsiniz:

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 kaydedildiğini ve sayfa içeriğinin değiştiğini belirten Hello, Snippets! mesajını görüntülemek için Konsol çekmecesi açılır.

Snippet'ler bölmesini 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. Kaynaklar > > Snippet'ler bölümüne gidin.

   

2. Komut Menüsü'nden:

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

   

Kaynaklar>Snippet'ler bölmesi, bu örnekte boş olarak kaydettiğiniz snippet'lerin bir listesini gösterir.

Snippet oluşturun

Snippet'leri Snippet'ler bölmesinde veya Geliştirici Araçları'nın herhangi bir yerinde Komut Menüsü'nden ilgili komutu çalıştırarak 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. Snippet'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. Control+Üst Karakter+P (Windows/Linux) veya Command+Üst Karakter+P (Mac) tuşlarına basarak Komut Menüsü'nü açın.

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

Snippet'leri düzenle

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, kaynak panelini 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 Control+S (Windows/Linux) ya da Command+S (Mac) tuşlarına basın.

Snippet'leri çalıştır

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

Kaynak 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, kaynak panelini 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 Geliştirici Araçları'nda herhangi bir yere odaklayın.
2. Control+O (Windows/Linux) veya Command+O (Mac) tuşlarına basarak Command Menu'yü açı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ırın

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

Snippet'leri sil

1. Snippet'ler bölmesini açın.
2. Snippet adını sağ tıklayın ve Kaldır'ı seçin.