Menjalankan cuplikan JavaScript

Kayce Basques

Sofia Emelianova

Jika Anda sering menjalankan kode yang sama di Konsol, sebaiknya simpan kode tersebut sebagai cuplikan. Cuplikan memiliki akses ke konteks JavaScript halaman. Bookmarklet 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 tersebut tidak dapat diakses melalui sistem file.

Misalnya, screenshot di bawah menunjukkan halaman beranda dokumentasi DevTools di sebelah kiri dan beberapa kode sumber cuplikan di panel Sumber > Cuplikan 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 log cuplikan, dan konten halaman akan berubah.

Membuka panel Cuplikan

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

1. Buka Sumber > > Cuplikan.

   

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 Tampilkan Cuplikan, lalu tekan Enter.

   

Panel Sumber>Cuplikan menampilkan daftar cuplikan yang Anda simpan, kosong dalam contoh ini.

Buat cuplikan

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

Panel Cuplikan mengurutkan cuplikan Anda dalam urutan abjad.

Membuat cuplikan di panel Sumber

1. Buka panel Cuplikan.
2. Klik Cuplikan baru.

3. Masukkan nama untuk cuplikan Anda dan tekan Enter untuk menyimpan.

   

Membuat cuplikan dari Menu Perintah

1. Fokuskan kursor 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 Buat cuplikan baru, lalu tekan Enter untuk menjalankan perintah.

   

Lihat Mengganti nama cuplikan jika Anda ingin memberikan nama kustom untuk cuplikan baru.

Mengedit cuplikan

1. Buka panel Cuplikan.

2. Di panel Snippet, klik nama cuplikan yang ingin Anda edit. Panel Sumber akan membukanya di Code Editor.

   

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.

Jalankan cuplikan

Serupa dengan membuat cuplikan, Anda dapat menjalankannya di panel Cuplikan dan dari Menu Perintah.

Menjalankan cuplikan di panel Sumber

1. Buka panel Cuplikan.
2. Klik nama cuplikan yang ingin Anda jalankan. Panel Sources membukanya di Code Editor.

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 Command Menu.

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

   

4. Tekan Enter untuk menjalankan cuplikan.

Ganti nama cuplikan

1. Buka panel Cuplikan.
2. Klik kanan nama cuplikan, lalu pilih Rename.

Hapus cuplikan

1. Buka panel Cuplikan.
2. Klik kanan nama cuplikan, lalu pilih Hapus.