Apa yang dimaksud dengan == $ 0 (dobel sama dengan dolar nol) di Alat Pengembang Chrome?

310

Di alat pengembang Google Chrome, ketika saya memilih elemen, saya melihat di ==$0sebelah elemen yang dipilih. Apa artinya?

Tangkapan layar

google-chrome google-chrome-devtools code-inspection oneNiceFriend
sumber
28
Ini DOM Node id yang dipilih. coba pilih sembarang simpul dan tulis $0di konsol dan lihat apa yang muncul;)
kebuntuan
33
Sangat membingungkan. Sepertinya seseorang menulis beberapa javascript yang mereka lupa taruh dalam tag skrip. Saya menghabiskan sepuluh menit yang baik untuk mencari tahu di mana saya telah mengacaukan kode saya ...
Kip
2
periksa berikut developer.chrome.com/devtools/docs/commandline-api#0-4
Mukesh
2
Saya pikir hanya warna latar belakang yang berbeda pada baris yang diklik harus cukup ... Saya melihat tidak perlu menambahkan == $ 0 ke sumber html ... Gagasan buruk. Chrome melakukan hal-hal Chrome-ish.
Sergio Abreu
developers.google.com/web/tools/chrome-devtools/console/…
Pacerier

Jawaban:

286

Ini adalah indeks simpul DOM yang dipilih terakhir. Chrome menetapkan indeks untuk setiap simpul DOM yang Anda pilih. Jadi $0akan selalu menunjuk ke simpul terakhir yang Anda pilih, sementara $1akan menunjuk ke simpul yang Anda pilih sebelumnya. Anggap saja seperti setumpuk node yang paling baru dipilih.

Sebagai contoh, pertimbangkan hal berikut

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

Sekarang Anda membuka konsol devtools dan memilih #sunday, #mondaydan #tuesdaydalam urutan yang disebutkan, Anda akan mendapatkan id seperti:

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

Catatan: Mungkin bermanfaat untuk mengetahui bahwa simpul dapat dipilih dalam skrip (atau konsol) Anda, misalnya salah satu penggunaan populer untuk ini adalah pemilih elemen sudut, sehingga Anda dapat memilih simpul Anda, dan menjalankan ini:

angular.element($0).scope()

Voila Anda mendapat akses ke lingkup simpul melalui konsol.

jalan buntu
sumber
9
Apa gunanya / manfaatnya ini?
joe_young
6
Saya percaya ini dapat membantu dalam debugging. Kemampuan untuk mengakses elemen yang diinspeksi menggunakan pemilih sederhana dapat membantu dalam banyak situasi selama debugging.
jalan buntu
6
Jadi apa gunanya selalu ditampilkan == $0di UI? Siapa pun yang tahu tentang $0akan tahu elemen mana itu, dan itu tidak berarti bagi siapa pun yang tidak.
BlueRaja - Danny Pflughoeft
6
@ Jooeyoung, saya pikir manfaatnya adalah dapat dengan cepat mengakses elemen di konsol ketika mengutak-atik hal. Berikut adalah video yang saya buat menunjukkannya! youtu.be/AKLdx8z6aDk
RoccoB
1
@LucaDeNardi Ya, itu berbahaya dalam produksi dan setiap pengembang Angular menambahkan baris ini: - $ compileProvider.debugInfoEnabled (false); di konfigurasi App mereka, untuk meningkatkan kinerja. Namun Anda dapat dengan mudah menjalankan angular.reloadWithDebugInfo (); di Konsol untuk melakukan debug saat diperlukan.
Varun Sharma
57

$ 0 mengembalikan elemen atau objek JavaScript yang paling baru dipilih, $ 1 mengembalikan yang kedua paling baru dipilih, dan seterusnya.

Rujuk: Referensi API Baris Perintah

Ani Menon
sumber
26

Jawaban lain di sini dengan jelas menjelaskan apa artinya. Saya ingin menjelaskan penggunaannya.

Anda dapat memilih elemen di elementstab dan beralih ke consoletab di chrome. Cukup ketik $0 or $1atau nomor apa saja dan tekan enter dan elemen akan ditampilkan di konsol untuk Anda gunakan.

tangkapan layar alat dev chrome

Siva Prakash
sumber
13

Ini adalah petunjuk Chrome untuk memberi tahu Anda bahwa jika Anda mengetik $ 0 di konsol, itu akan setara dengan elemen spesifik itu.

Secara internal, Chrome mengelola tumpukan, di mana $ 0 adalah elemen yang dipilih, $ 1 adalah elemen yang terakhir dipilih, $ 2 akan menjadi yang dipilih sebelum $ 1 dan seterusnya.

Berikut beberapa aplikasinya:

  • Mengakses elemen DOM dari konsol: $ 0
  • Mengakses propertinya dari konsol: $ 0.parentElement
  • Memperbarui properti mereka dari konsol: $ 1.classList.add (...)
  • Memperbarui elemen CSS dari konsol: $ 0.styles.backgroundColor = "aqua"
  • Memicu peristiwa CSS dari konsol: $ 0.klik ()
  • Dan melakukan banyak hal yang lebih rumit, seperti: $ 0.appendChild (document.createElement ("div"))

Tonton semua ini dalam aksi:

masukkan deskripsi gambar di sini

Pernyataan dukungan:

Ya, saya setuju ada cara yang lebih baik untuk melakukan tindakan ini, tetapi fitur ini dapat berguna dalam skenario rumit tertentu , seperti ketika elemen DOM perlu diklik tetapi tidak mungkin melakukannya dari UI karena dicakup oleh elemen lain atau, karena alasan tertentu, tidak terlihat di UI saat itu.

Sagar
sumber
2

Saya akan mengatakan itu hanya sintaks singkatan untuk mendapatkan referensi elemen html selama waktu debug, biasanya tugas semacam ini akan dilakukan dengan metode ini

document.getElementById , document.getElementsByClassName , document.querySelector

jadi mengklik pada elemen html dan mendapatkan variabel referensi ($ 0) di konsol adalah menghemat waktu sepanjang hari

malbarmavi
sumber