Popover incelemesi için krom hata ayıklayıcı / DevTools panelindeki ekranı dondurur musunuz?

394

z-indexBir twitter bootstrap popover'ı denemek ve analiz etmek için krom denetçisini kullanıyorum ve son derece sinir bozucu buluyorum ...

İlişkili CSS'yi değerlendirebilmem ve değiştirebilmem için popover'ı (gösteriliyorken) dondurmanın bir yolu var mı?

İlişkili bağlantıya sabit bir 'fareyle üzerine gelme' yerleştirilmesi, popover'ın görünmesine neden olmaz.

css  google-chrome  google-chrome-devtools 
— Abram
kaynak
7
Açılır pencere gösterildikten hemen sonra JavaScript'inizde bir kesme noktası ayarlamayı deneyin ( debugger;)
— Hope4You
5
Ben 5 saniye içinde window.setTimeouttetiklemek için kullanın debugger, sonra öğenin üzerine gelin ve bekleyin.
— grimmdude
Merhaba, DevTools teknik yazarı. Hepiniz bana sorunu gösteren MVCE'leri gönderebilir misiniz ? 2019'dan itibaren hile yapması gereken birkaç araç var ( olay dinleyici kesme noktaları , sözde sınıf geçişleri ), ancak durumunuzu yeniden üretene kadar ayrıntılı bir cevap veremiyorum.
— Kayce Baskları
Burada Chrome & Firefox
— Muhammed AbdElFatah için
@KayceBasques İşte bir örnek: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Açmak için açılır listeyi tıklayın, ardından Elements görünümünde liste içeriği popover'ini incelemeyi deneyin.
— RMorrisey

Yanıtlar:

704

Çalıştı. İşte benim prosedürüm:

  1. İstediğiniz sayfaya göz atın
  2. Geliştirici konsolunu açın - F12Windows / Linux'ta veya macOS'ta option+ ⌘+J
  3. SourcesKrom denetçisinde sekmeyi seçin
  4. Web tarayıcısı penceresinde popover'ı başlatmak için imleci istediğiniz öğenin üzerine getirin
  5. Hit F8Windows'un / Linux (veya fn+ F8MacOS üzerinde) popover gösterilirken. Asıl sayfada herhangi bir yeri tıkladıysanız F8 hiçbir şey yapmaz. Son tıklamanızın, kaynak sekmesi gibi denetçide bir yerde olması gerekir
  6. ElementsMüfettişteki sekmeye git
  7. Popover'inizi bulun (tetikleyici öğesinin HTML'sinde yuvalanır)
  8. CSS'yi değiştirirken iyi eğlenceler
— Abram
kaynak
9
Bu iş akışı bana kesme noktası hata ayıklayıcısına kısa ve kullanışlı bir giriş yaptı ve Konsol tıklamasında kaybolduğu için stil zor olan bir menünün izole edilmesine yardımcı oldu.
— Trevor Pierce
22
DOM öğesi gizlemek için focusout olayını kullanıyorsa F8 tuşuna basma şansınız yok!
— Marcel
2
@ Dean F8 tetiklemek için kullanmanız gerekir fn!
— mik01aj
10
Daha fazla bilgi için F8kısayolun yaptığı şey aslında hata ayıklayıcıyı duraklatmaktır (kod yürütme). Ve ctrl + \ ayrıca çalışıyor. ( cmd + \ MacOS'ta).
— LeOn - Han Li
1
Veya F8iki kez basabilirsiniz
— samdd
274

Herhangi bir elemanı inceleyebilmek için aşağıdakileri yapın. Fareyle üzerine gelme durumunu çoğaltmak zor olsa bile bu işe yarar:

  • Konsolda aşağıdaki javascript'i çalıştırın. Bu, 5 saniye içinde hata ayıklayıcıya girecektir.

    setTimeout(function(){debugger;}, 5000)

  • Git öğenizi gösterin (fareyle veya üzerine tıklayarak) ve Chrome Hata Ayıklayıcı'ya girene kadar bekleyin.

  • Şimdi ElementsChrome İnceleyicisi'ndeki sekmeyi tıklayın . Öğenizi orada arayabilirsiniz.
  • Ayrıca Find Elementsimgeyi tıklayabilirsiniz (büyüteç gibi görünür) ve Chrome, öğeyi sağ tıklayıp ardından seçerek sayfada incelemenize ve bulmanıza izin verir.Inspect Element

Bu yaklaşımın, bu sayfadaki diğer büyük cevaba göre küçük bir varyasyon olduğunu unutmayın .

— Brad Parks
kaynak
7
frzsombor'un cevabına uygun saygı gösterdiğinize saygı duyuyorum. Güzel.
— Jeremy Moritz
4
Bu ihtiyacım olan şeydi, çünkü işlevsellik js Focus'a eklenen bir DOM öğesinin olması ve dev araçlarına geçtiğinizde her zaman gerçekleşen bulanıklıktan kaldırılmasıydı.
— trudesign
6
Abram'ın F8 çözümü benim için çalışmadı. Bunu yaptı. Teşekkürler!
— Ralf
3
Teşekkür. Birlikte bir yer imi yapılmış başlığı : ❚❚, adresi : javascript:debugger;. F8çalışır, ancak fare kullanmayı tercih edenler için bu daha uygun olabilir.
— Tymek
1
Diğerlerinin yorumladığı gibi F8 yanıtı benim için işe yaramadı ve beni tamamen deli ediyordu! Bu bir cazibe gibi çalışır. Teşekkür ederim!
— DoYouEvenCodeBro
70

GÜNCELLEME: Brad Parks'ın yorumunda yazdığı gibi, sadece bir JS kodu satırı ile çok daha iyi ve daha kolay bir çözüm var:

çalıştırın setTimeout(function(){debugger;},5000);, sonra öğenizi gösterin ve Hata Ayıklayıcı'ya girene kadar bekleyin

Orijinal cevap:

Aynı problemi yaşadım ve bence "evrensel" bir çözüm buldum. (sitenin jQuery kullandığı varsayılarak)
Umarım birine yardımcı olur!

  1. Denetçideki öğeler sekmesine git
  2. Sağ tıklayın <body>ve " HTML Olarak Düzenle " yi tıklayın
  3. Aşağıdaki öğeyi sonra ekleyin ve <body>ardından Ctrl + Enter tuşlarına basın:
    <div id="debugFreeze" data-rand="0"></div>
  4. Bu yeni öğeye sağ tıklayın ve "Kes şunu ..." -> "Özellik değişiklikleri" ni seçin
  5. Şimdi Konsol görünümüne gidin ve aşağıdaki komutu çalıştırın:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Şimdi tarayıcı penceresine geri dönün ve öğenizi bulmak için 5 saniyeniz var ve kesme noktası vurulmadan ve tarayıcı "donacak" önce / hover / focus / etc düğmesini tıklayın.
  7. Artık tıkladığınız / üzerine gelindiğiniz / odaklandığınız / vb. Öğelerinizi huzur içinde inceleyebilirsiniz.

Fikri alırsanız, elbette javascript ve zamanlamayı değiştirebilirsiniz.

— frzsombor
kaynak
11
Hey! Harika fikir ... ekstra div eklemenize bile gerek yok ... Bunun yerine bu javascript'i çalıştırın setTimeout(function(){debugger;}, 5000);, sonra öğenizi gösterin ve Hata Ayıklayıcı'ya girene kadar bekleyin. Ardından, Chrome Denetçisindeki "Öğeler" sekmesini tıklayın; öğenizi orada arayabilirsiniz. Ayrıca "Öğeyi Bul" simgesini (büyüteç gibi görünür) tıklayabilirsiniz ve Chrome, sağ tıklayarak ve ardından "Öğeyi Denetle" yi seçerek öğenizi sayfada incelemenize ve bulmanıza olanak tanır.
— Brad Parks
5
Bunu bir cevap olarak eklemeniz gerektiğini düşünüyorum, çünkü bu çözüm sadece benimkinden daha iyi değil, buradaki diğerlerinden daha iyi. Gerçekten hoş!
— frzsombor
38
  1. Elements Sekmesi içinde herhangi bir yere sağ tıklayın
  2. Seç Breakon... > subtree modifications
  3. Görmek istediğiniz pop-up'ı tetikleyin ve DOM'da değişiklikler görürse dondurulur
  4. Hala pop-up'ı görmüyorsanız, görmek istediğiniz pop-up'ı dolana kadar kromun üst orta kısmının Step over the next function(F10)yanındaki düğmeyi tıklayın Resume(F8).
— Adrian Enriquez
kaynak
3
TEŞEKKÜR EDERİM! Bunu bilmiyordum ve beni kurtarıyor
— R Claven
14

Bunun Chrome'da gerçekten iyi çalıştığını buldum.

İncelemek istediğiniz öğeye sağ tıklayın, ardından Eleman Durumunu Zorla> ​​Fareyle üzerine tıklayın. Ekran görüntüsü eklendi.

Kuvvet unsuru durumu

— Leah Huyghe
kaynak
5
Yalnızca popover css tarafından tetiklenirse çalışır.
— mik01aj
6

Bunu konsol sekmesine koyun:

setTimeout(function(){debugger;}, 5000)

Ardından, 5s sonra pop-up'ın nerede gösterileceğini tıklayın - ekran donacak ve CSS'yi özelleştirecek.

— Parker Lucenzo
kaynak
0

Benim basit yolum:

setTimeout(function(){ debugger; }, 3000);
— Nadav B
kaynak
7
Bu Brad Parks'ın çözümü ile 3 yıl önce
— aynıdır
-2

Burada diğer çözümleri denedim, işe yarıyorlar ama tembelim bu yüzden bu benim çözümüm

  1. genişletilmiş durumu tetiklemek için öğenin üzerine gelin
  2. ctrl+ shift+c
  3. imleci tekrar öğenin üzerine getirin
  4. sağ tık
  5. hata ayıklayıcıya git

sağ tıkladığınızda, bir bağlam menüsü açıldığı için artık fare olayını kaydetmez, böylece fareyi güvenle uzaklaştırabilirsiniz

— Vincent Tang
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.