Google Chrome tidak hanya digunakan untuk menjelajahi internet, tetapi untuk pengembang, itu lebih seperti alat bantuan pengembangan yang kuat.
Jika Anda ingin melakukan pekerjaan dengan baik, terlebih dahulu Anda harus mempertajam alat Anda. Selanjutnya, saya akan berbagi dengan Anda beberapa cara untuk menggunakan Chrome.
Jika pembaca tahu cara menambahkan breakpoint JavaScript ke Chrome, silakan lanjutkan membaca; Kalau tidak, buat sendiri.
Jika ada kode seperti itu:
Salinan kode adalah sebagai berikut:
var a = 1;
function test () {
var a, b, c, d, e;
a = 2;
b = a - 1;
B = 9;
C = 3;
d = 4;
e = (a + b * c) * (a - d);
mengembalikan e;
}
tes();
Kode itu sendiri tidak masalah, yang penting adalah formulirnya.
Jika E adalah hasil yang kita butuhkan pada akhirnya, tetapi temukan bahwa hasilnya salah, kami menetapkan breakpoint pada garis di mana kami menetapkan nilai ke e.
Setelah mengatur breakpoint, pindahkan mouse ke variabel dan tetap untuk sementara waktu, Chrome akan meminta nilai variabel saat ini.
Tetapi ekspresinya cukup rumit, dan tidak ada gunanya melihat nilai variabel tunggal. Semuanya terlihat normal, tapi itu salah setelah perhitungan.
Pada saat ini, Anda cenderung ingin mengetahui hasil dari bagian (A + BC). Jangan khawatir, pilih ekspresi terlebih dahulu, lalu pindahkan mouse ke area yang dipilih dan tetap untuk sementara waktu.
Chrome akan memberi tahu Anda jawabannya secara langsung. Apa yang lebih menarik masih di belakang.
Klik kanan langsung di area yang dipilih, dan menu akan muncul. Dua item teratas adalah: [Tambahkan ke Watch] dan [Evaluasi di Konsol]. Gambar referensi tampilan yang sesuai.
Jam tangan yang disebut dapat dipahami sebagai pemantauan. Beberapa ekspresi lebih penting dan mungkin memerlukan pemantauan waktu nyata dari nilai ekspresi selama seluruh proses debugging. Saat ini, Anda dapat menggunakan Watch.
Misalnya, kami mengatur breakpoint ke garis "b = 9;" dan kemudian tambahkan jam tangan: "a - b", dengan nilai 1. Seperti yang ditunjukkan pada gambar:
Klik Langkah Berikutnya dan Jalankan "B = 9;", yang berarti bahwa nilai B telah berubah. Pada saat ini, lihat nilai jam tangan: "a - b" dan -7.
Ini mencapai efek pemantauan waktu nyata dan membuat debugging lebih nyaman dan lebih cepat.
Selanjutnya, mari kita lihat apa yang terjadi dengan konsol.
Tentu saja, konsol adalah konsol, dan ekspresi dapat dievaluasi langsung di konsol.
Misalnya, jika Anda ingin mengetahui hasil (a + bc), salin langsung ke konsol dan tekan enter, dan hasilnya akan keluar.
Tunggu, sepertinya ada sesuatu yang salah, mengapa konsol mengetahui nilai -nilai A, B, dan C?
Mengeksekusi kode JavaScript di konsol tanpa breakpoint adalah global. Dengan kata lain, pada saat ini, variabel X didefinisikan dalam konsol, dan ruang lingkup x ini adalah global.
Jika konsol digunakan jika terjadi gangguan program, ruang lingkup konsol berorientasi pada ruang lingkup pada gangguan. Artinya, di mana pun breakpoint diatur (atau di mana kode dieksekusi), ruang lingkup konsol adalah tempatnya.
Dalam contoh ini, variabel A didefinisikan dalam ruang lingkup global dengan nilai 1; dan variabel lokal A didefinisikan dalam ruang lingkup uji fungsi dengan nilai 2. Tetapkan breakpoint pada "a = 2;", masukkan A di konsol, masukkan, dan cetak tidak ditentukan.
Karena program terganggu di dalam uji fungsi saat ini dan program dijalankan dalam uji fungsi, ruang lingkup konsol juga dalam tes fungsi. Oleh karena itu, input A akses ke variabel lokal A, dan variabel lokal A tidak ditetapkan pada saat ini, sehingga hasilnya tidak terdefinisi.
Saya akan berbagi begitu banyak kali ini dulu. Saya akan terus membagikannya ketika saya bertemu dengan orang yang kuat di masa depan. Saya berharap ini akan membantu pembaca.