Lihat variabel di Sumber

Chrome DevTools memungkinkan Anda melihat beberapa variabel dengan mudah di seluruh aplikasi. Mengamati variabel dalam Sumber akan membuat Anda tidak perlu membuka konsol dan berfokus untuk meningkatkan kualitas kode.

Panel Sumber menyediakan kemampuan untuk memantau variabel dalam aplikasi Anda. Bagian ini terletak di bagian watch pada sidebar debugger. Dengan memanfaatkan fungsi ini, Anda tidak perlu berulang kali mencatat objek ke konsol.

Menonton bagian debugger

Menambahkan variabel

Untuk menambahkan variabel ke daftar tonton, gunakan ikon tambahkan di sebelah kanan judul bagian. Tindakan ini akan membuka input inline tempat Anda memberikan nama variabel yang akan diamati. Setelah diisi, tekan tombol Enter untuk menambahkannya ke daftar.

Tombol Tambahkan ke daftar tontonan

Pengamat akan menampilkan nilai variabel saat ini saat ditambahkan. Jika variabel tidak ditetapkan atau tidak dapat ditemukan, variabel tersebut akan menampilkan untuk nilai.

Variabel yang tidak ditentukan dalam daftar tontonan

Memperbarui variabel

Nilai variabel dapat berubah saat aplikasi terus beroperasi. Daftar pantau bukan tampilan langsung variabel kecuali jika Anda melangkah melalui eksekusi. Saat Anda menelusuri eksekusi menggunakan breakpoints, nilai yang dipantau akan diperbarui secara otomatis. Untuk memeriksa ulang variabel dalam daftar secara manual, tekan tombol muat ulang di sebelah kanan judul bagian.

Tombol muat ulang variabel smartwatch

Saat refresh diminta, status aplikasi saat ini akan diperiksa ulang. Setiap item yang ditonton akan diperbarui dengan nilai saat ini.

Variabel yang diperbarui sedang diamati

Menghapus variabel

Agar hal yang Anda lihat tetap minimal untuk pekerjaan yang lebih cepat, Anda mungkin perlu menghapus variabel dari daftar pantau. Hal ini dapat dilakukan dengan mengarahkan kursor ke variabel, lalu mengklik ikon penghapusan yang muncul di sebelah kanan.

Arahkan kursor ke variabel untuk menghapus dari daftar tontonan