JavaScript snippet'lerini çalıştır

Kayce Basques

Sofia Emelianova

Konsolda aynı kodu tekrar tekrar kullanıyorsanız kodu snippet olarak kaydedebilirsiniz. Snippet'lerin sayfanın JavaScript bağlamına erişimi vardır. Bunlar yer işareti uygulamalarına bir alternatiftir.

Kaynaklar panelinde snippet'ler yazabilir ve bunları herhangi bir sayfada, 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ğdaki Kaynaklar > Snippet'ler bölmesinde bazı snippet kaynak kodları gösterilmektedir.

Bazı mesajları günlüğe kaydeden ve ana sayfanın HTML gövdesini mesajı içeren bir <p> öğesiyle değiştiren snippet kaynak kodunu aşağıda 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 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ç

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 bölümüne gidin.

   

2. Komut Menüsünden:

   1. Ctrl+Ü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ölmesinde, kaydettiğiniz snippet'lerin listesi bu örnekte boş olarak gösterilir.

Snippet oluşturun

Snippet'ler bölmesinde veya Geliştirici Araçları'nın herhangi bir yerinde 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. 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ı'nda herhangi bir yere odaklayın.
2. Ctrl+Ü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 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, 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 Control+S (Windows/Linux) veya Command+S (Mac) tuşlarına basın.

Snippet'leri çalıştır

Snippet oluşturmaya benzer şekilde, bu 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, 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 Geliştirici Araçları'nda herhangi bir yere odaklayın.
2. Control+O (Windows/Linux) veya Command+O (Mac) tuşlarına basarak Command Menüsü'nü 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ırma

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.