DOM'dan kaybolan html öğesini odak kaybı durumunda nasıl inceleyebilirim?

Bir girdiden bir tablo hücresine CSS özelliklerini incelemeye çalışıyorum. Girdi tıklandığında beliriyor ve incelemeye çalıştığım zaman olduğu gibi odak kaybolduğunda kayboluyor. Başka bir pencereye (müfettiş) geçerken odağımı kaybetmemek için nasıl yapabilirim?

Chrome tarayıcısında, Geliştirici Araçlarını açın ve Öğeler sekmesini seçin , ardından incelemek istediğiniz öğenin üst düğümünün bağlamsal menüsünü açın, bağlamsal menüde Kes > Alt ağaç değişiklikleri seçeneğine tıklayın .

Daha sonra sadece sayfayı tıklamanız yeterlidir ve odak noktanızı kaybetmeden veya incelemek istediğiniz öğeyi kaybetmeden denetçiye geçersiniz.

JavaScript yürütmesini fareyi hareket ettirmeden klavye kısayoluyla duraklatırsanız, kaybolan öğeyi yakalayabilirsiniz. Bunu Chrome'da şu şekilde yapabilirsiniz:

1. Geliştirici Araçlarını açın ve Kaynaklar'a gidin.

2. Komut dosyası yürütmeyi duraklatmak için kısayolu not edin— F8.

   

3. Öğenin görünmesini sağlamak için kullanıcı arayüzü ile etkileşim kurun.

4. Hit F8.
5. Farenizi nasıl hareket ettirebilirsiniz, DOM'u her ne şekilde inceleyebilirsiniz. Eleman orada kalacak.

Bu numara Firefox'ta ve diğer modern tarayıcılarda da çalışıyor.

Her şey başarısız olursa, bunu Konsol'a yazın:

setTimeout(() => { debugger; }, 5000)

Ardından, hata ayıklamak istediğiniz şeyin görünmesini sağlamak için 5 saniyeniz (veya değeri başka bir şeye değiştirin) var.

Diğer yanıtların hiçbiri benim için işe yaramadı - DOM ağacı , komut dosyası duraklatılmadan hemen önce değiştirilmeye devam etti (yani önem verdiğim şeyler kayboldu) .

Bunun sizin durumunuzda işe yarayıp yaramadığından emin değilsiniz, ancak normalde (ve her durumda bu konuda bahsetmeye değer, çünkü harika bir araç) Chrome Geliştirici Araçlarında öğe durumlarını simüle edebilirsiniz ve biri de öyle :focus.

Bunu yapmak Elementsiçin Geliştirici Araçlarındaki sekmeye gidin Stylesve sağdaki bölümde olduğunuzdan emin olun (bu, Geliştirici Araçlarını başlattığınızda varsayılan konum olmalıdır). Şimdi sağ üst köşedeki Tarzların hemen altında bir simge var Toggle Element State. Bunu tıkladığınızda simüle edebilirsiniz :active, :hover, :focusve :visitedelement için size kod görünümünde solda seçilmiş.

Test edilen sayfanın geliştirici araçları sayfasındaki Chrome'da ... seçenekler menüsünü tıklayın ve tercihler için ayarları açın ... DevTools altında 'Odaklanmış bir sayfayı taklit et' seçeneğini etkinleştirin

Ardından test sayfasında öğelerin görünmesine neden olun. Bu, pop-up arama sonuçlarımın ekranda kalmaya odaklanmasını sağlamak için çalıştı, böylece onunla çalışabilirim.

Gerçek bir çözüm değil, ancak genellikle işe yarıyor (:

1. Öğeye odaklan
2. Bağlam menüsü için sağ tıklayın
3. Geliştirici araçlarına geçin

Çok zor bir durum yaşadım ve buradan hiçbir cevap işe yaramıyordu (cevapları, benim için beden olan kabı veya orijinal olayı değiştirerek doğrulamadım çünkü bilmiyorum). Sonunda, Chrome Inspector'da Kontrol Olayı İşleyici Kesme Noktalarını kırarak bir geçici çözüm buldum. Belki de bu, F8'in veya sağ tıklamanın bile pop-up'ı tekrar gizlediği karmaşık durumlar için bir çapraz tarayıcı yoludur:

Aşağıdaki Javascript'i tarayıcı geliştirici konsoluna yapıştırın:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

Araçları kullanmakta pek iyi olmadığım için daha hızlı bir düzeltme yapıyorum, işte yaptığım şey.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Chrome DevTools'u açar ve ardından klavye kısayollarını kullanarak öğe denetçisini tetiklerseniz, sorunu çözmesi gerekir.

Mac: Cmd+Opt+J ve sonraCmd+Opt+C

Windows: Ctrl+Shift+J ve sonraCtrl+Shift+C

[