Kaybolan öğeyi bir tarayıcıda nasıl inceleyebilirim?

Farem uzaklaştığında kaybolan bir öğeyi nasıl inceleyebilirim?

Kimlik, sınıf veya başka bir şey olduğunu bilmiyorum ama incelemek istiyorum.

Denediğim çözümler:

JQuery selector'ı konsolun içinde çalıştırın, $('*:contains("some text")')ancak hiç şansınız olmadı çünkü öğe gizli değil ama muhtemelen DOM ağacından kaldırılmış.

DOM ağacını değişiklikler için manuel olarak incelemek bana hiçbir şey vermiyor, çünkü neyin değiştiğini fark etmek için çok hızlı görünüyor.

BAŞARI:

Etkinlik kesme noktaları konusunda başarılı oldum. Özellikle - benim durumumda fare aşağı. Sources-> Event Listener Breakpoints-> Mouse-> mousedownChrome'a gitmeniz yeterli . Ondan sonra incelemek istediğim öğeyi tıkladım ve içinde Scope Variablesbazı yararlı talimatlar gördüm.

(Bu cevap yalnızca Chrome Geliştirici Araçları için geçerlidir. Aşağıdaki güncellemeye bakın.)

Kaybolan öğeyi içeren bir öğe bulun. Öğeye sağ tıklayın ve "Kes ...> Alt Ağaç Değişiklikleri" ni uygulayın. Bu, öğe kaybolmadan önce bir hata ayıklayıcıyı duraklatır ve bu, duraklatılmış bir durumda öğeyle etkileşim kurmanıza olanak tanır.

22 Ekim 2019 güncellemesi: 70. sürümün yayınlanmasıyla birlikte, FireFox sonunda bu tür hata ayıklamayı 2 3 destekliyor gibi görünüyor :

15 Eylül 2020 Güncellemesi: Chrome, tam da bu ihtiyaç için bir "Odaklanmış bir sayfayı taklit et" seçeneğine sahiptir (bunu [⌘] + [P] Komut Menüsünden veya Genel Tercihlerden edinebilirsiniz). 5 - h / t @sulco Twitter'da

Chrome'da alternatif bir yöntem:

• DevTools'u açın (F12).
• "Kaynaklar" sekmesini seçin.
• İstediğiniz öğe görüntülenirken F8'e (veya Ctrl + /) basın. Bu, komut dosyasının çalışmasını kesecek ve DOM'u tam olarak görüntülendiği gibi "donduracaktır".
• Bu noktadan sonra, öğeyi seçmek için Ctrl + Shift + C tuşlarını kullanın.

1. Konsolu aç
2. Yazın setTimeout(()=>{debugger;},5000);
3. Enter tuşuna basın

Artık elementinizin görünmesi için 5 saniyeniz var. Göründüğünde, hata ayıklayıcıya ulaşana kadar bekleyin. Devam etmediğiniz sürece, elementinizle oynayabilirsiniz ve kaybolmaz.

Yukarıdaki adımları her seferinde tekrarlamaktan kaçınmak için faydalı bir ipucu:

bunu yer imi olarak ekleyin:

1. Herhangi bir sayfayı yer imlerine ekleyin
2. Bu yeni yer işaretini düzenleyin
3. URL'yi / konumu şununla değiştirin: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Bir dahaki sefere bunu kullanmak istediğinizde, bu yer işaretine tıklayın / dokunun.

Mac'te chrome kullanıyorum, yukarıdaki adımları izledim ancak biraz daha açıklamaya çalışacağım:

1. Sağ tıklayın ve öğeyi inceleyin.
2. Kaynaklar sekmesine gidin.
3. Ardından öğenin üzerine gelin.
4. Ardından klavyeyi F8 veya kullanarak Command(Window) \. Ekranı statik bir durumda duraklatacak ve öğenin üzerine gelindiğinde kaybolmayacaktır.

Firebug'da bunun için farklı çözümler vardır:

1. HTML panelinin içinde Break On Mutate'i kullanabilirsiniz . (bununla, hangi element olduğunu da öğrenebileceksiniz)
2. Öğeye sağ tıklayıp Firebug ile Öğeyi İncele'yi seçebilirsiniz.

Ayrıca , belirli olayları geçici olarak engellemenin bir yolunu arayan 551 numaralı sorunu takip etmek isteyebilirsiniz .

Düzenle:

O da etkinleştirebilirsiniz hangi eleman öğrenmek için HTML paneli seçenekleri Değişiklikleri vurgulayın , Değişiklikleri Expand ve Kaydırma Değişiklikleri içine Görünümü HTML paneli içindeki eleman görünür kılmak için.

Sebastian

Benim durumumda, google chrome'da yinelemeli olarak genişlet seçeneğini kullandım :

Adımlar:

1. Açılır alanı inceleyin
2. Dinamik DOM'u (mor vurgu) bulun
3. Bu dinamik DOM'a sağ tıklayın
4. Yinelemeli olarak Genişlet'i seçin :
5. Tüm unsurların orada olduğunu görebiliriz

İşte bir demo:

Komut dosyasının yürütülmesini duraklatmak için farenizle öğenin üzerine gelin ve F8'e (Chrome'da bu) basın. Fareyle üzerine gelme durumu size görünür durumda kalacaktır.

Sizi kaynaklar sekmesine götürür. Öğeler sekmesine geri dönün. Bu zaman kodu ortadan kalkmayacaktır.

Denetçide görünen ve kaybolan öğeleri öğeler altında görüntüleyebilirsiniz. Öğeye görünür olduğunda giderseniz, kaybolduğunu veya durumu değiştiğinde css'sinin değiştiğini görebilmeniz gerekir.

Bu, firefox'ta firebug veya chrome'da yerleşik denetçi ile mümkündür.

aynı sorunu yaşadım ama Firefox kullanıyorum, denetleme öğesini açar açmaz kayboluyor: 4 çizgiyi (ayarlar) açın, web geliştiricisine gidin> Hata Ayıklayıcı'ya gidin ve hemen komut dosyasını durduran duraklamanın kısayolu olan F8'e basın geliştirici araçlarını açtığınızı algılamadan önce