Menjalankan cuplikan JavaScript

Jika Anda menjalankan kode yang sama di Konsol berulang kali, pertimbangkan untuk menyimpan kode sebagai cuplikan. Cuplikan memiliki akses ke konteks JavaScript halaman. Library ini adalah alternatif untuk bookmarklets.

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

Misalnya, screenshot di bawah menunjukkan 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 membuat log beberapa pesan 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 dalam log cuplikan, dan konten halaman tersebut berubah.

Membuka panel Snippet

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

1. Buka Sumber > > Cuplikan.

   

2. Dari Command Menu:

   1. Tekan Control+Shift+P (Windows/Linux) atau Command+Shift+P (Mac) untuk membuka Menu Command.
   2. Mulai ketik Snippets, pilih Tampilkan Cuplikan, 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 Menu Perintah di mana saja di DevTools.

Panel Snippets mengurutkan cuplikan Anda dalam urutan abjad.

Membuat cuplikan di panel Sumber

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

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

3. Mulai ketik Snippet, pilih Buat cuplikan baru, lalu tekan Enter untuk menjalankan perintah.

   

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

Edit cuplikan

1. Buka panel Snippets.

2. Di panel Snippets, klik nama cuplikan yang ingin Anda edit. Panel Sources 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 Snippets dan dari Menu Perintah.

Menjalankan cuplikan di panel Sumber

1. Buka panel Snippets.
2. Klik nama cuplikan yang ingin dijalankan. Panel Sources akan membukanya di Code Editor.

3. Klik Run pada 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 Command.

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.

Hapus cuplikan

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