Jika Anda berulang kali menjalankan kode yang sama di Konsol, pertimbangkan untuk menyimpan kode sebagai cuplikan. Cuplikan memiliki akses ke konteks JavaScript halaman. Bookmark merupakan alternatif untuk bookmarklet.
Anda dapat menulis cuplikan di panel Sumber dan menjalankannya di halaman mana pun dan dalam mode samaran.
Misalnya, screenshot di bawah menampilkan halaman beranda dokumentasi DevTools di sebelah kiri dan beberapa kode sumber cuplikan di panel Sumber > Snippet di sebelah kanan.
Berikut adalah kode sumber cuplikan yang mencatat beberapa pesan dan mengganti isi HTML halaman beranda dengan elemen <p>
yang berisi pesan tersebut:
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 Konsol akan muncul untuk menampilkan pesan
Hello, Snippets!
yang dicatat dalam log cuplikan, dan konten halaman akan berubah.
Buka panel Snippet
Panel Snippets akan mencantumkan cuplikan Anda. Untuk mengedit cuplikan, buka cuplikan dengan salah satu dari dua cara berikut:
Buka Sumber >
> Cuplikan.
Dari Menu Perintah:
- Tekan Control+Shift+P (Windows/Linux) atau Command+Shift+P (Mac) untuk membuka Menu Perintah.
- 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 Menu Perintah di mana saja di DevTools.
Panel Cuplikan mengurutkan cuplikan Anda dalam urutan abjad.
Membuat cuplikan di panel Sumber
- Buka panel Snippets.
- Klik
Cuplikan baru.
Masukkan nama untuk cuplikan Anda dan tekan Enter untuk menyimpan.
Membuat cuplikan dari Menu Perintah
- Fokuskan kursor di mana saja di dalam DevTools.
- Tekan Control+Shift+P (Windows/Linux) atau Command+Shift+P (Mac) untuk membuka Menu Perintah.
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.
Edit cuplikan
- Buka panel Snippets.
Di panel Snippets, klik nama cuplikan yang ingin Anda edit. Panel Sources membukanya di Code Editor.
Gunakan Editor Kode untuk mengedit kode dalam cuplikan Anda. Tanda bintang di samping nama cuplikan berarti Anda belum menyimpan perubahan.
Tekan Control+S (Windows/Linux) atau Command+S (Mac) untuk menyimpan.
Jalankan cuplikan
Mirip dengan membuat cuplikan, Anda dapat menjalankannya di panel Snippets dan dari Menu Perintah.
Menjalankan cuplikan di panel Sources
- Buka panel Snippets.
- Klik nama cuplikan yang ingin Anda jalankan. Panel Sources membukanya di Code Editor.
Klik
Run pada panel tindakan di bagian bawah editor, atau tekan Control+Enter (Windows/Linux) atau Command+Enter (Mac).
Menjalankan cuplikan dari Menu Perintah
- Fokuskan kursor di mana saja di dalam DevTools.
- Tekan Control+O (Windows/Linux) atau Command+O (Mac) untuk membuka Menu Command.
Ketik karakter
!
diikuti dengan nama cuplikan yang ingin Anda jalankan.Tekan Enter untuk menjalankan cuplikan.
Ganti nama cuplikan
- Buka panel Snippets.
- Klik kanan nama cuplikan, lalu pilih Ganti nama.
Hapus cuplikan
- Buka panel Snippets.
- Klik kanan nama cuplikan, lalu pilih Hapus.