Lihat variabel di Sumber

Chrome DevTools memudahkan Anda melihat beberapa variabel di seluruh aplikasi. Dengan melihat variabel dalam Source, Anda tidak perlu membuka konsol dan fokus untuk meningkatkan kualitas kode.

Panel Sources menyediakan kemampuan untuk melihat variabel dalam aplikasi Anda. Ini terletak di bagian smartwatch pada sidebar debugger. Dengan memanfaatkan fungsi ini, Anda tidak akan perlu berulang kali mencatat objek ke konsol.

Bagian smartwatch debugger

Menambahkan variabel

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

Tombol tambahkan ke daftar tontonan

Watcher akan menunjukkan nilai variabel saat ini ketika ditambahkan. Jika variabel tidak ditetapkan atau tidak dapat ditemukan, variabel akan menampilkan untuk nilai.

Variabel yang belum ditentukan dalam daftar pantauan

Memperbarui variabel

Nilai variabel dapat berubah saat aplikasi terus beroperasi. Daftar tontonan bukanlah tampilan langsung variabel kecuali jika Anda sedang melangkah melalui eksekusi. Saat Anda memasuki eksekusi menggunakan titik henti sementara, nilai yang dipantau akan diperbarui secara otomatis. Untuk memeriksa kembali variabel secara manual dalam daftar, tekan tombol refresh di sebelah kanan judul bagian.

Tombol muat ulang variabel watch

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

Variabel yang sedang dipantau

Menghapus variabel

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

Variabel arahkan kursor yang akan dihapus dari daftar pantauan