Chrome Geliştirici Araçları'nda == $ 0 (çift dolar sıfır olur) ne anlama gelir?

310

Google Chrome'un geliştirici araçlarında bir öğe ==$0seçtiğimde, seçili öğenin yanında görüyorum . Bu ne anlama geliyor?

google-chrome google-chrome-devtools code-inspection

— oneNiceFriend
kaynak

28

Seçilen DOM Düğümü kimliği. Herhangi bir düğümü seçmeye ve $0konsolda yazmaya ve neyin geldiğini görmeye çalışın ;)

— kilitlenme

33

Çok kafa karıştırıcı. Birisi bir komut dosyası etiketi koymayı unuttuğu bazı javascript yazmış gibi görünüyor. On dakika ... Benim kodunda haberci nerede anlamaya çalışırken bir iyi geçirdi

— Kip

2

aşağıdakileri kontrol developer.chrome.com/devtools/docs/commandline-api#0-4

— Mukesh

2

Ben sadece tıklayın satırında farklı arka plan renginin yeterli olması gerektiğini düşünüyorum ... html kaynağına == $ 0 eklemeye gerek görmüyorum ... Kötü fikir. Chrome, Chrome-ish öğelerini kullanır.

— Sergio Abreu

developers.google.com/web/tools/chrome-devtools/console/…

— Pacerier

286

Son seçilen DOM düğümü dizinidir. Chrome, seçtiğiniz her DOM düğümüne bir dizin atar. Böylece $0her zaman seçtiğiniz son düğümü $1işaret ederken , ondan önce seçtiğiniz düğümü gösterecektir. Bunu en son seçilen düğümlerden oluşan bir yığın gibi düşünün.

Örnek olarak aşağıdakileri göz önünde bulundurun

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

Şimdi devtools teselli ve seçilen açtı #sunday, #mondayve #tuesdaybahsedilen sırayla, sen kimlikleri gibi alacak:

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

Not: Düğümün komut dosyalarınızda (veya konsolunuzda) seçilebilir olduğunu bilmek yararlı olabilir, örneğin bunun için popüler bir kullanım açısal öğe seçicidir, bu nedenle düğümünüzü seçip çalıştırabilirsiniz:

angular.element($0).scope()

Voila konsol üzerinden düğüm kapsamına erişebiliyorsunuz.

— çıkmaz
kaynak

9

Bunun faydası / yararı nedir?

— joe_young

6

Hata ayıklamada yardımcı olabileceğine inanıyorum. Denetlenen öğeye basit bir seçici kullanarak erişebilme, hata ayıklama sırasında birçok durumda yardımcı olabilir.

— kilitlenme

6

== $0Kullanıcı arayüzünde her zaman iyi olan nedir? Bilen herkes $0bunun hangi element olduğunu zaten bilecek ve bilmeyen herkes için anlamsız olacaktır.

— BlueRaja - Dany Pflughoeft

6

@joe_young, sanırım fayda, bir şeyleri düzenlerken konsoldaki öğelere hızlı bir şekilde erişebiliyor. İşte bir araya getirdiğim bir video. youtu.be/AKLdx8z6aDk

— RoccoB

1

@LucaDeNardi Evet, üretimde zararlıdır ve her Açısal geliştirici bu satırı ekler: - $ compileProvider.debugInfoEnabled (false); Performans artışı için uygulamalarının yapılandırmasında. Ancak angular.reloadWithDebugInfo (); Konsolda gerektiğinde hata ayıklamak için.

— Varun Sharma

57

$ 0 en son seçilen öğeyi veya JavaScript nesnesini döndürür, $ 1 en son seçilen ikinci öğeyi döndürür, vb.

Bakınız: Komut Satırı API Referansı

— Ani Menon
kaynak

26

Buradaki diğer cevaplar ne anlama geldiğini açık bir şekilde açıkladı.

Sekmedeki bir öğeyi seçip krom sekmeye elementsgeçebilirsiniz console. Sadece $0 or $1veya herhangi bir sayı yazıp enter tuşuna bastığınızda, kullanım için konsolda öğe görüntülenecektir.

— Siva Prakash
kaynak

13

Bu, Chrome'un, konsola 0 TL yazarsanız, söz konusu öğeye eşdeğer olacağını söylemenin ipucudur.

Dahili olarak, Chrome bir yığın tutar; burada $ 0 seçilen öğedir, $ 1 en son seçilen öğedir, 2 $ ise 1 $ 'dan önce seçilen öğedir.

İşte bazı uygulamaları:

Konsoldan DOM öğelerine erişme: $ 0
Özelliklerine konsoldan erişme: $ 0.parentElement
Özelliklerini konsoldan güncelleme: $ 1.classList.add (...)
Konsoldan CSS öğelerini güncelleme: $ 0.styles.backgroundColor = "aqua"
Konsoldan CSS olaylarını tetikleme: $ 0.click ()
Ve çok daha karmaşık şeyler yapmak, örneğin: $ 0.appendChild (document.createElement ("div"))

Tüm bunları çalışırken izleyin:

Destek beyanı:

Evet, bu eylemleri gerçekleştirmenin daha iyi yolları olduğunu kabul ediyorum, ancak bu özellik bir DOM öğesinin tıklanması gerektiğinde olduğu gibi belirli karmaşık senaryolarda kullanışlı olabilir , ancak UI'den yapılması mümkün değildir, çünkü diğer öğeler veya herhangi bir nedenden dolayı o anda kullanıcı arayüzünde görünmez.

— Sagar
kaynak

2

Ben hata ayıklama sırasında html öğesi referans almak için sadece kısa sözdizimi olduğunu söyleyeceğim, normalde bu tür görev bu yöntemle gerçekleştirecek

document.getElementById , document.getElementsByClassName , document.querySelector

bir html öğesini tıklamak ve konsolda bir referans değişkeni ($ 0) elde etmek gün içinde büyük bir zaman tasarrufu sağlar

— malbarmavi
kaynak