Chrome'un geliştirici araçları aracılığıyla, bir sitede araç ipuçlarının nasıl yapılandırıldığını görüntülemeye çalışıyorum. Ancak, öğenin üzerine geldiğimde bile, "öğeyi inceleyin", html'de araç ipucu için hiçbir şey görünmüyor. Stili olarak ayarlayabileceğimi biliyorum :hover, ancak yine de araç ipucunun html veya css'sini göremiyorum.
Herhangi bir fikir?
Yanıtlar:
Aslında bunu Twitter Önyükleme araç ipuçlarıyla yapmak için bir numara buldum. Geliştirme araçlarını (F12) başka bir monitörde açarsanız, araç ipucunu getirmek için imleci öğenin üzerine getirin, 'Öğeyi İncele'yi seçiyormuşsunuz gibi sağ tıklayın. Bu bağlam menüsünü açık bırakarak odağı geliştirme araçlarına kaydırın. Araç ipucunun html'si, HTML'deki araç ipucu öğesinin yanında görünmelidir. O zaman ona başka bir unsurmuş gibi bakabilirsiniz. Chrome'a geri dönerseniz, HTML kaybolur, bu nedenle dikkat edilmesi gereken bir şey olur.
Garip bir yol ama benim için işe yaradı, bu yüzden paylaşacağımı düşündüm.
F8 hata ayıklamayı duraklatacak.
Araç ipucunun üzerine fareyi getirin ve görüntülenirken tuşuna basın F8.
Artık CSS'ye bakmak için denetçiyi kullanabilirsiniz.
Bu çözüm herhangi bir ekstra kod olmadan çalışır.
command-option-jKonsolu açmak için vur . Konsolu farklı bir pencerede açmak için konsolun sağ üst köşesindeki pencereye bakan düğmeye tıklayın.
Ardından, Chrome penceresinde, açılır pencereyi tetikleyen öğenin üzerine gelin command-`, konsola odaklanmanız gereken pek çok kez tıklayın, ardından yazın debugger. Bu, sayfayı dondurur, ardından öğeyi Öğeler sekmesinde inceleyebilirsiniz.
debugger, konsola yazarken odağınızı kaybederseniz alt+tab, öğenin üzerine gelirken tuşuna basabilirsiniz . Windows'taki Chromium uygulamaları için çalıştı.
Araç ipucunu bu şekilde göstermeye zorlamanız gerekir
$('.myelement').tooltip('open');Artık ipucu, fareyle üzerine gelme durumuna bakılmaksızın gösterilecektir.
İşaretlemeyi görmeniz gereken DOM'nin altına yakın bir yere kaydırın.
Güncelleme bkz. Cneuro'nun Bootstrap 3 için yorumu.
$('.myelement').tooltip('show');Güncellemeye bakın Marko Grešak'ın Chrome ve görünüşe göre Safari için cevabına bakın $0, şu anda seçili öğe için kısayol olarak kullanılabilir. Bu, Safari'de de çalışıyor gibi görünüyor.
$($0).tooltip('show').tooltip('show') getbootstrap.com/javascript/#tooltips-methods
$0konsoldaki gibi erişilebilir . Bu nedenle, bir araç ipucunu tetikleyen öğeyi seçip çalıştırabilirsiniz $($0).tooltip('show').
Tıklayın f12konsol sekmesine gidin ve aşağıdakileri ekleyin:
setTimeout(()=> {debugger},5000)Bu, istediğinizi yapmanız için size 5 saniye verecek ve kırılacaktır 5 seconds. Ardından hedef öğeyi inceleyebilirsiniz
(ör. öğenin üzerine gelin ve 5 saniye bekleyin, ardından inceleyin ..)
Benim için kabul edilen cevap işe yaramadı: DevTools'a tıklamak Araç İpucunu hemen kapattı.
Ancak, bana yardımcı olan /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution buldum :
const F12 = 123
window.addEventListener('keydown', function(event) {
if (event.keyCode === F12 ) {
debugger;
}
});Denetçiyle öğeyi vurgulayın
F12'ye basın
DOM'un değişmemesi için JavaScript duraklatılmış olarak artık öğeyi inceleyebilirsiniz.
Kodlama olmadan tek pencere yanıtı
Diğer cevapların hiçbiri tam olarak doğru değil veya yeterince detaya sahip değil, işte benim girişimim.
<div>.<body>JS ile etkinleştirilen araç ipuçları için kod çözümü yok:
Chrome'un geliştiricileriyle, araç ipucunun içeren / üst öğesini inceleyin. "Öğeler" sekmesinde, bu kapsayıcı DOM öğesini sağ tıklayın ve ardından "kesme"> "alt ağaç değişiklikleri" ni seçin. Araç ipucunun bulunduğu DOM parçasının üzerine bir dahaki sefere geldiğinizde, JS kodu duraklatılarak araç ipucunun içeriğini incelemenizi sağlar.
Bu adımları takip et
InspectPencereyi kromda açın .
Fareyi araç ipucunun üzerine getirin.
Basın F8
JS yürütme duraklatılacak ve ardından araç ipucunu inceleyebilirsiniz.
Yürütmeyi F8başlatmak ve F10hata ayıklamak için tekrar basın .
İşte basit bir çözüm: Dinamik araç ipuçlarınız varsa, tetikleme olayını (geçici olarak) olarak değiştirerek bunları "kalıcı" hale getirebilirsiniz click. Bu, araç ipucunun yalnızca bir tıklama durumunda kaybolması gibi bir etkiye sahip olacaktır:
$('body').tooltip({
selector: "[data-toggle='tooltip']",
trigger: "click"
});Bu şekilde, FF'ler veya Chrome'un hata ayıklama araçlarıyla kolayca incelenebilir.
1) F12'ye tıklayarak İncele penceresini açın
2) Kaynak sekmesine gidin (konsolun yanında)
3) Şimdi incelenecek öğenin üzerine gelin ve farenizi orada tutun.
4) Kontrolü duraklat düğmesine veya F8'e taşımak için klavyeyi kullanma (Tab veya shift + tab) Resme bakın
5) Klavye odağı Oynat düğmesindeyken. Enter'a basın. Üzerine gelme öğeniz donacak, şimdi her şeyi yapabilirsiniz
bu araç ipuçlarını düzenlemek çok basit.
Aşama 1 : Araç ipucuna sahip öğeyi inceleyin. Devtools'da mavi ile vurgulandığından emin olun.
Adım 2 : Öğeye sağ tıklayın (geliştirme bölümünde) ve Break on altında nitelik değişiklikleri seçin
3. Adım : İncelenen öğenin üzerine gelin ve sitenin üzerinde küçük bir metinle birlikte gri bir kaplama görünecektir: Hata ayıklayıcıda duraklatıldı
ekranınızın üst kısmında
4. adım : Fareyle üzerine gelme durumu seçilene kadar mavi oka tıklayın.
5. Adım : Araç ipucunu inceleyin ve düzenleyin
İşte bunu Mac'te nasıl yaptım:
Cmd+Shift+Pbenim için çalıştı.Disable JavaScriptve basınEnterBu, JavaScript kullanan tüm araç ipuçlarının solmasını önleyecektir.
Chome on Linux'ta bu, WikiPedia'daki referanslar gibi JS tarafından üretilen araç ipuçları için aşağıdakileri yaparak elde edilebilir:
Yukarıda belirtildiği gibi, geliştirici araçlarını F12 kullanarak açın. Onları başka bir pencerede açın. Araç ipucunu vurgulayın ve Ctrl-Shift-C'yi (HTML Denetçisi) tıklayın. Ucun üzerinden geçtiğinizde, geliştirici penceresi uygun bölümü gösterecektir.
Fareyi üzerindeyken ucu açık tutmanız gerekiyorsa, diğer pencerede daha ayrıntılı olarak inceleyebilmek için, araç ipucuna sağ tıklayın ve içerik menüsünü yukarıda bırakın ve geliştirme araçları penceresine tıklayın. Bu senaryoda ipucunu wikipedia penceresinde bırakır.
Bir dereceye kadar önyükleme ipuçlarıyla da çalışır.
Bazı nedenlerden dolayı, burada verilen yanıtlar benim için Windows'ta çalışmıyordu. Dev araçlarını açıp, ardından araç ipucunu getiren öğenin üzerine gelip ardından o öğeye (araç ipucunu değil) sağ tıklayarak araç ipucunu inceleyebildim. Ardından, imleci denetçi panelinin üzerine getirin ve aşağıya doğru kaydırın. Araç ipucu öğesi hala orada olmalıdır.
Dev araçları, bir araç ipucu gibi gezdirilmiş bir öğeyi incelemenin bir yolunu sağlar.
1 - F12'yi kullanarak geliştirme araçlarını açın.
2 - "Öğeler" sekmesini seçin.
3 - Araç ipucunu içeren ana öğeyi seçin.
4 - "..." (ana öğenin satırında) tıklayın ve "Kes" / "alt ağaç değişiklikleri" ni seçtikten sonra (aşağıdaki resme bakın)
5 - Son olarak uygulamaya geri dönün ve Araç İpucunun görünmesini sağlayın. Araç İpucu görünür olduktan sonra yürütmeyi engellemelidir
Umarım birisi için yararlı olabilir!
command-option-jKonsolu açmak için vur . Konsolu farklı bir pencerede açmak için konsolun sağ üst köşesindeki pencereye bakan düğmeye tıklayın.
Ardından, Chrome penceresinde, açılır pencereyi tetikleyen öğenin üzerine gelin command-, konsola odaklanmanız gereken pek çok kez tıklayın ve ardından yazın debugger. Bu, sayfayı dondurur; daha sonra, Öğeleri Öğeler sekmesinde inceleyebilirsiniz.
Dev araçları içinden: hover durumunu değiştirmenin, yalnızca ipucu metni ilk etapta CSS: hover kuralları aracılığıyla etkinleştirildiğinde bir etkiye sahip olduğunu belirtmek gerekir. Geçiş, yalnızca oluşturma amacıyla öğeye fareyle üzerine gelme durumunu uygular, ancak karşılık gelen bir JavaScript fareyle üzerine gelme olayını tetiklemez.
AngularJS gibi birçok çerçeve, bir hedef öğenin üzerine gelindiğinde JavaScript aracılığıyla belge gövdesinin altına dinamik olarak araç ipucu HTML'yi ekler, bu nedenle hedef öğenin üzerine gelmenin ve incelemenin herhangi bir miktarı yardımcı olmaz.
@ joeyyang'ın cevabı bu senaryoda benim için çok iyi çalıştı.
Bulduğum en kolay yollardan biri şudur:
Yandaki Chrome geliştirme araçlarını açın
Öğenin üzerine gelin
Sağ tık
Geliştirme araçlarına tıklayın
Artık stilleri inceleyebilir ve değiştirebilirsiniz