Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Menjalankan cuplikan kode dari laman apa saja

Cuplikan adalah skrip kecil yang bisa ditulis dan dieksekusi dalam panel Sources pada Chrome DevTools. Anda bisa mengakses dan menjalankannya dari laman apa saja. Bila dijalankan, cuplikan kode akan dieksekusi dari konteks laman yang dibuka saat ini.

Jika Anda memiliki utilitas kecil atau skrip debug yang digunakan berulang-ulang pada banyak laman, pertimbangkan untuk menyimpan skrip sebagai cuplikan. Anda juga bisa menggunakan cuplikan sebagai alternatif untuk bookmarklets.

TL;DR

  • Cuplikan kode adalah skrip kecil yang bisa dijalankan dari laman apa saja (serupa dengan bookmarklet).
  • Jalankan sebagian cuplikan dalam Console dengan fitur "Evaluate in Console".
  • Ingatlah bahwa fitur populer dari panel Sources, seperti breakpoint, juga bisa digunakan bersama cuplikan.

Membuat cuplikan

Untuk membuat cuplikan, buka panel Sources, klik pada tab Snippets, klik-kanan dalam Navigator, kemudian pilih New.

membuat cuplikan

Masukkan kode Anda di editor. Bila ada perubahan yang belum disimpan, di sebelah nama skrip akan ada tanda bintang, seperti dalam tangkapan layar di bawah ini. Tekan Command+S (Mac) atau Ctrl+S (Windows, Linux) untuk menyimpan perubahan.

cuplikan belum disimpan

Menjalankan cuplikan

Ada tiga cara untuk menjalankan cuplikan Anda:

  • Klik kanan pada nama file cuplikan (di panel sebelah kiri yang menampilkan daftar semua cuplikan) dan pilih Run.
  • Klik tombol Run (tombol 
  run snippet).
  • Tekan Command+Enter (Mac) atau Ctrl+Enter (Windows, Linux).

Untuk mengevaluasi bagian cuplikan dalam Console, sorot bagian tersebut, klik kanan di mana saja dalam editor, dan pilih Evaluate in Console, atau gunakan pintasan keyboard Command+Shift+E (Mac) atau Ctrl+Shift+E (Windows, Linux).

evaluate in console

Menampilkan local modifications

Untuk menampilkan perbandingan modifikasi yang Anda buat pada cuplikan, klik kanan di editor (selagi cuplikan ditampilkan) dan pilih Local modifications.

local modifications

Sebuah tab baru bernama History akan muncul di panel samping Console.

riwayat cuplikan

Masing-masing stempel waktu merepresentasikan modifikasi. Luaskan tanda karat di sebelah stempel waktu untuk menampilkan perbedaan modifikasi pada titik waktu itu. Tautan revert akan membuang riwayat revisi. Mulai 27 Juni 2016, tautan apply revision content dan apply original content tampaknya tidak berfungsi sebagaimana mestinya.

Menyetel breakpoint

Sebagaimana skrip lainnya, breakpoint bisa disetel pada cuplikan. Lihat Menambahkan breakpoint untuk mempelajari cara menambahkan breakpoint dari dalam panel Sources.