Yalnızca diğer öğe fareyle üzerine getirildiğinde / girildiğinde görünen öğeyi inceleyin

Genellikle, yalnızca başka bir öğe fare üzerine getirildiğinde / girildiğinde görünen bir öğeyi (örn. Araç ipucu) incelemek istiyorum. Görünen öğe, jQuery'nin mouseenter olayı aracılığıyla görünür hale getirilir.

Araç ipucu, farem içeren öğeyi terk ettiğinde kaybolduğu için araç ipucunu inceleyemiyorum.

JS olaylarını duraklatmanın bir yolu var mı, böylece öğenin üzerine gelip sonra tarayıcının JS'sini duraklatabilir ve başarılı bir şekilde inceleyebilirim?

Bir örnek olarak, Twitter önyükleme araç ipuçlarını incelemeyi deneyin: http://getbootstrap.com/javascript/#tooltips .

Chrome 38.0.2094.0'da oldukça kolaydır.

İşte nasıl görüneceği:

Adım adım:

1. Kaynaklar panelinde DevTools'u açın
2. Fareyle düğmenin üzerine gelerek ipucunun görünmesini sağlayın
3. Sayfayı dondurmak için F8'e basın
4. Öğeler paneline geçin ve araç ipucunu seçmek için sol üstteki büyüteç simgesini kullanın

Araç ipucu CSS nedeniyle görünüyorsa, işte bu durumda yapabilecekleriniz:

Adım adım:

1. DevTools'u açın
2. Geliştirme araçlarında tetikleyici öğeyi seçin (bağlantı)
3. Sağ tıklayın, "element durumunu zorla" yı seçin ve ": üzerine gelme" yi seçin
4. CSS ipucunu inceleyin

Eğer geçiş yapabilirsiniz Hem Safari'nin ve Chrome'un Web Müfettiş teklifler onay kutuları :active, :focus, :hoverve :visitedbir öğenin durumunu. Bunları kullanmak daha da kolay olabilir.

Safari:

Krom:

Bunu yapmanın başka bir zor yolu da var:

1. Araç ipucunuzun görünmesini sağlayan öğenin üzerine gidin.
2. Bağlamsal menüyü açmak için sağ tıklayın.
3. Farenizi geliştirici aracı pencerenize getirin ve geliştirici araç panelinde herhangi bir yere sol tıklayın.

İpucunuz görünür kalacak, ardından onu Öğe sekmesinde inceleyebileceksiniz.

Chrome'da test edildi. Firefox'ta çalışmıyor gibi görünüyor.

İken @ SomeGuy cevabı (t-up animasyonlu videoları için) mükemmel, alternatif olarak her zaman programlı yapabilirsiniz. Konsolu açın ve etkinlik adını yazın

document.getElementById('id').dispatchEvent(new Event('event-type'));

(salt javascript'e özgü sözdizimi tarayıcıya göre değişebilir)

JQuery ile daha da kolay:

$('#id').trigger('event-type');

Örneğinizde ( http://getbootstrap.com/javascript/#tooltips ), konsolu açın ve örneğin şunu yazın:

$("button:contains('Tooltip on right')").mouseenter();

Ve araç ipucu DOM'da görünür ve manuel olarak incelenebilir / değiştirilebilir:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

Yorumlarda olduğu gibi, fare işaretçisini sayfa çerçevesi üzerinde hareket ettirirseniz, gibi diğer olayları tetikleyebilirsiniz mouseout. Bunu önlemek için F8(acc. Yanıttaki gibi) tuşuna basabilir veya yazabilirsiniz debugger;(komut dosyası karşılığı budur)