Menjalankan cuplikan JavaScript

Kayce Basques

Sofia Emelianova

Jika Anda berulang kali menjalankan kode yang sama di Console, sebaiknya simpan kode tersebut sebagai cuplikan. Cuplikan memiliki akses ke konteks JavaScript halaman. Ekstensi adalah alternatif untuk bookmarklet.

Anda dapat menulis cuplikan di panel Sources dan menjalankannya di halaman mana pun dan dalam mode samaran.

Catatan: DevTools menyimpan cuplikan sebagai preferensi lokal Anda. DevTools tidak menyinkronkan cuplikan dengan setelan dan cuplikan tidak dapat diakses melalui sistem file.

Misalnya, screenshot di bawah menampilkan halaman beranda dokumentasi DevTools di sebelah kiri dan beberapa kode sumber cuplikan di panel Sources > Snippets di sebelah kanan.

Berikut adalah kode sumber cuplikan yang mencatat beberapa pesan ke dalam log dan mengganti isi HTML halaman beranda dengan elemen <p> yang berisi pesan:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Saat Anda mengklik tombol Run, panel samping Console akan muncul untuk menampilkan pesan Hello, Snippets! yang dicatat oleh cuplikan, dan konten halaman akan berubah.

Membuka panel Snippets

Panel Cuplikan mencantumkan cuplikan Anda. Untuk mengedit cuplikan, buka cuplikan dengan salah satu dari dua cara berikut:

1. Buka Sources > > Snippets.

   

2. Dari Menu Perintah:

   1. Tekan Control+Shift+P (Windows/Linux) atau Command+Shift+P (Mac) untuk membuka Menu Perintah.
   2. Mulai ketik Snippets, pilih Show Snippets, lalu tekan Enter.

   

Panel Sources>Snippets menampilkan daftar cuplikan yang Anda simpan, yang kosong dalam contoh ini.

Buat cuplikan

Anda dapat membuat cuplikan di panel Snippets atau dengan menjalankan perintah yang sesuai dari Command Menu di mana saja di DevTools.

Panel Cuplikan mengurutkan cuplikan Anda menurut abjad.

Membuat cuplikan di panel Sumber

1. Buka panel Snippets.
2. Klik New snippet.

3. Masukkan nama untuk cuplikan Anda, lalu tekan Enter untuk menyimpan.

   

Membuat cuplikan dari Menu Perintah

1. Fokuskan kursor Anda di mana saja di dalam DevTools.
2. Tekan Control+Shift+P (Windows/Linux) atau Command+Shift+P (Mac) untuk membuka Menu Perintah.

3. Mulai ketik Snippet, pilih Create new snippet, lalu tekan Enter untuk menjalankan perintah.

   

Lihat Mengganti nama cuplikan jika Anda ingin memberi nama kustom pada cuplikan baru.

Mengedit cuplikan

1. Buka panel Snippets.

2. Di panel Cuplikan, klik nama cuplikan yang ingin Anda edit. Panel Sources akan membukanya di Editor Kode.

   

3. Gunakan Editor Kode untuk mengedit kode di cuplikan Anda. Tanda bintang di samping nama cuplikan berarti Anda belum menyimpan perubahan.

   

4. Tekan Control+S (Windows/Linux) atau Command+S (Mac) untuk menyimpan.

Menjalankan cuplikan

Sama seperti membuat cuplikan, Anda dapat menjalankannya di panel Snippets dan dari Command Menu.

Menjalankan cuplikan di panel Sumber

1. Buka panel Snippets.
2. Klik nama cuplikan yang ingin Anda jalankan. Panel Sources akan membukanya di Editor Kode.

3. Klik Run di panel tindakan di bagian bawah editor, atau tekan Control+Enter (Windows/Linux) atau Command+Enter (Mac).

   

Menjalankan cuplikan dari Menu Perintah

1. Fokuskan kursor Anda di mana saja di dalam DevTools.
2. Tekan Control+O (Windows/Linux) atau Command+O (Mac) untuk membuka Menu Perintah.

3. Ketik karakter ! diikuti dengan nama cuplikan yang ingin Anda jalankan.

   

4. Tekan Enter untuk menjalankan cuplikan.

Mengganti nama cuplikan

1. Buka panel Snippets.
2. Klik kanan nama cuplikan, lalu pilih Ganti nama.

Menghapus cuplikan

1. Buka panel Snippets.
2. Klik kanan nama cuplikan dan pilih Hapus.