JavaScript snippet'lerini çalıştır

Sofia Emelianova
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.

Snippet'i çalıştırmadan önce Geliştirici Araçları belgeleri ana sayfası. Çalıştır düğmesi vurgulanıyor.

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&#39;ı tıklayın. Ç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&#39;i çalıştırdıktan sonraki ana sayfa.

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 &gt; Daha fazla sekme. &gt; Snippet'ler bölümüne gidin.

    Kaynaklar bölmesindeki Diğer sekmeler menüsü.

  2. Komut Menüsünden:

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

    Komut Menüsünden Snippet&#39;leri Göster&#39;i seçerek.

Kaynaklar&gt;Snippet'ler bölmesinde, kaydettiğiniz snippet'lerin listesi bu örnekte boş olarak gösterilir.

Boş bir Snippet&#39;ler bölmesi.

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. Yeni snippet'i tıklayın.
  3. Snippet'iniz için bir ad girin ve kaydetmek için Enter tuşuna basın.

    Snippet&#39;e ad verme.

Komut menüsünden snippet oluşturma

  1. İmlecinizi Geliştirici Araçları'nda herhangi bir yere odaklayın.
  2. Command+Üst Karakter+P (Windows/Linux) veya Command+Üst Karakter+P (Mac) tuşlarına basarak Command 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.

    Komut menüsünden Yeni snippet oluştur&#39;u seçin.

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.

    Kod Düzenleyici&#39;de bir snippet açıldı.

  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.

    Snippet adının yanında, kaydedilmemiş kodu gösteren yıldız işareti.

  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, bu kaynağı Kod Düzenleyici'de açar.
  3. Düzenleyicinin alt kısmındaki işlem çubuğunda Çalıştır&#39;ı tıklayın. Çalıştır'ı tıklayın. veya Ctrl+Enter (Windows/Linux) ya da Command+Enter (Mac) tuşlarına basın.

    Çalıştır düğmesi.

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.

    Aç Menüsünden bir snippet çalıştırma.

  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.