Pertama buka Baidu, lalu tekan F12 untuk membukanya. Jika bukan item konsol, klik item konsol karena kami ingin mengoperasikannya di konsol. .
Lihat konten berikut:
Oke, mari kita hapus konten terlebih dahulu, Anda dapat mengklik kanan dan memilih menu Clear Console, atau masukkan Clear ().
Selanjutnya, kami memasukkan Document.GetElementById ('KW1'); dan kemudian tekan ENTER untuk melihat informasi elemen dengan ID KW1.
Bukankah itu sangat sederhana? Langkah selanjutnya adalah menggunakan Console.dir untuk melihat informasi elemen.
Masukkan console.dir (document.getElementById ('kw1')); Dan kemudian tekan Enter dan sesuatu yang aneh keluar.
Anda dapat mengklik hal ini, dan itu akan memperluas dan mendaftar semua metode atribut. Sederhananya, ini adalah metode atribut DOM dari elemen ini.
Oke, saya tidak akan membahas detail tentang ini. Ngomong -ngomong, metode DIR juga merupakan salah satu alat debugging.
Pertanyaan -pertanyaan ini sebenarnya merupakan pertanda konten saat ini. Kami baru saja melihat cara melihat elemen dan metode atributnya di konsol.
Bahkan, konsol memberi kita banyak API baris perintah. Sederhananya, ini adalah fungsi yang hanya dapat digunakan konsol.
Saat ini, metode dan sifat konsol adalah: (Chrome 34)
Salinan kode adalah sebagai berikut:
["$$", "$ x", "dir", "dirxml", "kunci", "nilai", "profil", "profileD", "monitorevents", "unmonitorevents", "inspecping", "copy", "clear", "$ 2 getEventListeners", "undurkan", "monitor", "" "" "" "" "" "$ 4", "$ _"]
PS: Mengenai cara melihat hal -hal ini, saya akan membicarakannya nanti. Saya khawatir Anda tidak akan memahaminya untuk saat ini.
Anda juga dapat merujuk ke "Objek Konsol #3. Command Line API" untuk melihat beberapa penggunaannya.
Apa yang sering kita gunakan adalah $, $ _, $ 0- $ 4, dir, kunci, nilai. Jika Anda tertarik atau ingin belajar secara mendalam, silakan baca materi sendiri.
Salinan kode adalah sebagai berikut:
$ // Cukup pahami itu adalah dokumen.QuerySelector.
$$ // Cukup mengerti itu adalah dokumen.QuerySelectorall.
$ _ // adalah nilai dari ekspresi sebelumnya, dan objek konsol #3. API baris perintah dijelaskan.
$ 0- $ 4 // adalah elemen DOM yang dipilih di Panel 5 Elemen terakhir, dan akan dibahas nanti.
dir // itu sebenarnya console.dir
Keys // Ambil nama kunci objek, kembalikan array yang terdiri dari nama kunci
Nilai // Hapus nilai objek dan kembalikan array nilai
Ok, memang tidak sulit untuk dipahami dari penjelasan, tetapi belum pernah dilakukan sebelumnya, dan tidak ada yang tahu apa yang akan terjadi.
Sialan Baidu, itu benar -benar memuat jQuery 1.10.2. Awalnya, lingkungan Baidu bersih dan lebih tepat untuk membicarakan hal ini, tetapi ternyata bodoh. .
Mari kita ubah ke Soso untuk menjelaskan. . Buka http://www.soso.com/ lalu buka konsolnya.
Sekarang kami menggunakan $ untuk melihat elemen dengan kueri ID (seperti elemen KW1 di Baidu), dan kemudian periksa metode atribut elemen.
Fungsi yang sama seperti sebelumnya, tetapi kode sekarang sangat sederhana. Menggunakan tiga properti konsol dan metode $, dir, $ _, apakah itu langsung membuat debug lebih mudah?
Beberapa orang mungkin mengatakan bahwa saat ini, jQuery biasanya digunakan, apa yang harus saya lakukan jika saya ingin memeriksa ini?
Kembali ke Baidu, mari kita lakukan operasi sekarang.
Ini sedikit berbeda dari yang baru saja, karena langkah $ ('#kw1') mendapatkan objek jQuery, sehingga metode atribut jQuery yang kami dirikan juga.
Jika Anda ingin melihat metode atribut dari elemen nyata, tambahkan [0]
Tentu saja, jika Anda hanya ingin melihat objek jQuery, maka tidak ada masalah. . Sedangkan untuk debugging, tentu saja Anda harus mencobanya sambil menyesuaikan diri. .
Bahkan, ada metode lain yang sangat sederhana, yaitu mengklik ikon kaca pembesar di sudut kiri atas dan pilih kotak input.
Dengan cara ini, kita dapat secara langsung menggunakan $ 0 untuk melihatnya. Kami telah memperkenalkan $ 0- $ 4 sekarang. Ini fungsinya, sederhana.
Mari kita bicara secara singkat tentang kunci dan nilai, yang akan digunakan nanti. . Tetapi beberapa orang masih suka melihatnya secara langsung.
Salinan kode adalah sebagai berikut:
var obj = {name: 'nima', usia: 22, desc: 'silk one'};
Saya percaya bahwa Anda dapat memahaminya secara sekilas dan memahaminya sekilas.
Oke, konten hari ini hampir semua itu. Tentu saja, saya harus mencobanya sendiri, kalau tidak saya tidak akan dapat benar -benar mempelajari poin -poin pengetahuan ini. .
Jika kita bisa membacanya, kita semua akan menjadi pencetak gol terbanyak dalam ujian masuk perguruan tinggi, bukan?
Akhirnya, izinkan saya memberi tahu Anda sedikit trik, yaitu menggunakan perintah yang saya masukkan sebelumnya, Anda tidak perlu masuk kembali. Anda dapat mencari ke atas dan ke bawah melalui tombol panah ↑ dan ↓. Fungsi ini mirip dengan CMD dan sangat nyaman. .
Latihan After-Class: (Sekarang tekan F12 secara langsung untuk membuka konsol)
1. Periksa kode sumber fungsi yang direkomendasikan oleh fungsi ini di bawah artikel (tentu saja Anda dapat mengklik rekomendasi, saya tidak menghentikan Anda. O (∩_∩) o)
2. Posisi ke lokasi file tempat fungsi berada. (Klimaks akan datang)
3. Ubah fungsi untuk membatalkannya. (Faktanya, ini hanyalah modifikasi dan debugging global yang sederhana.)
Akhirnya, jika apa yang dikatakan salah, atau tidak dapat mengerti, atau kemajuan tidak dapat mengimbangi, dll., Silakan posting dan mengeluh.
Juga, jika Anda ingin saya menambahkan sesuatu, atau men-debug proyek nyata atau plug-in, Anda juga dapat mempostingnya. Tentu saja, jika itu adalah proyek yang sangat merepotkan, saya tidak dapat menulis artikel untuk memperkenalkannya. Saya bukan artikel. . .