Menjalankan cuplikan JavaScript

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

Misalnya, screenshot di bawah menunjukkan halaman beranda dokumentasi DevTools di sebelah kiri dan beberapa kode sumber cuplikan di panel Sumber > Cuplikan di sebelah kanan.

Halaman beranda dokumentasi DevTools sebelum menjalankan cuplikan. Tombol Run ditandai.

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 Jalankan., panel samping Console akan muncul untuk menampilkan pesan Hello, Snippets! yang dicatat log cuplikan, dan konten halaman akan berubah.

Halaman beranda setelah menjalankan cuplikan.

Membuka panel Cuplikan

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

  1. Buka Sumber > Tab lainnya. > Cuplikan.

    Menu tab Lainnya di panel Sumber.

  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.

    Memilih Tampilkan Cuplikan dari Menu Perintah.

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

Panel Cuplikan kosong.

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. Cuplikan baru.
  3. Masukkan nama untuk cuplikan Anda, lalu tekan Enter untuk menyimpan.

    Menamai cuplikan.

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

    Memilih Buat cuplikan baru dari Menu Perintah.

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

Mengedit cuplikan

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

    Cuplikan yang dibuka di Code Editor.

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

    Tanda bintang di samping nama cuplikan yang menunjukkan kode yang tidak disimpan.

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

Menjalankan 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 Sumber akan membukanya di Code Editor.
  3. Klik Jalankan. Run di panel tindakan di bagian bawah editor, atau tekan Control+Enter (Windows/Linux) atau Command+Enter (Mac).

    Tombol Run.

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.

    Menjalankan cuplikan dari Menu Buka.

  4. Tekan Enter untuk menjalankan cuplikan.

Mengganti nama cuplikan

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

Menghapus cuplikan

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