Menjalankan cuplikan JavaScript

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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.

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

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

Halaman beranda setelah menjalankan cuplikan.

Buka panel Snippet

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

  1. Buka Sumber > Lebih banyak tab. > Cuplikan.

    Menu tab More di panel Sources.

  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.

    Memilih Show Snippets dari Menu Command.

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

Panel Cuplikan kosong.

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. Cuplikan baru.

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

    Menamai cuplikan.

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.

    Memilih Create new snippet dari Command Menu.

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

Edit cuplikan

  1. Buka panel Snippets.

  2. Di panel Snippets, klik nama cuplikan yang ingin Anda edit. Panel Sumber membukanya di Editor Kode.

    Cuplikan terbuka di Code Editor.

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

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

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

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

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

    Menjalankan cuplikan dari Menu Buka.

  4. Tekan Enter untuk menjalankan cuplikan.

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