Próbuję sprawdzić, za pomocą narzędzi programistycznych Chrome, jak zorganizowane są podpowiedzi w witrynie. Jednak nawet po najechaniu kursorem na element, kiedy „sprawdzam element”, w podpowiedzi w html nie pojawia się nic. Wiem, że mogę ustawić Styl na :hover, ale nadal nie widzę html ani css podpowiedzi.
Jakieś pomysły?
Odpowiedzi:
Właściwie znalazłem sztuczkę, aby to zrobić, dzięki podpowiedziom Twitter Bootstrap. Jeśli otworzysz narzędzia deweloperskie (F12) na innym monitorze, a następnie najedziesz kursorem na element, aby wyświetlić podpowiedź, kliknij prawym przyciskiem myszy, tak jakbyś miał wybrać opcję „Sprawdź element”. Zostawiając otwarte menu kontekstowe, przenieś fokus na narzędzia programistyczne. HTML dla podpowiedzi powinien pojawić się obok elementu, dla którego jest to podpowiedź w kodzie HTML. Następnie możesz spojrzeć na to jak na kolejny element. Jeśli wrócisz do Chrome, kod HTML zniknie, więc warto o tym pamiętać.
To trochę dziwne, ale dla mnie zadziałało, więc pomyślałem, że podzielę się tym.
F8 wstrzyma debugowanie.
Najedź myszą na podpowiedź i naciśnij, F8gdy jest wyświetlana.
Możesz teraz użyć inspektora, aby spojrzeć na CSS.
To rozwiązanie działa bez dodatkowego kodu.
Naciśnij, command-option-jaby otworzyć konsolę. Kliknij przycisk przypominający okno w prawym górnym rogu konsoli, aby otworzyć konsolę w innym oknie.
Następnie w oknie Chrome najedź kursorem na element, który uruchamia wyskakujące okienko, naciśnij command-`tyle razy, ile potrzebujesz, aby skupić się na konsoli, a następnie wpisz debugger. Spowoduje to zablokowanie strony, a następnie możesz sprawdzić element na karcie Elementy.
debuggerdo konsoli, możesz nacisnąć przycisk alt+tab, najeżdżając na element. Działało w aplikacjach Chromium w systemie Windows.
Wystarczy wymusić wyświetlanie podpowiedzi jako takiej
$('.myelement').tooltip('open');Teraz podpowiedź będzie wyświetlana niezależnie od stanu najechania kursorem.
Przewiń w dół w pobliże dolnej części DOM, gdzie powinien pojawić się znacznik.
Aktualizacja patrz komentarz cneuro do Bootstrap 3.
$('.myelement').tooltip('show');Aktualizacja - patrz odpowiedź Marko Grešaka na Chrome i najwyraźniej również Safari, $0mogą być używane jako skrót do aktualnie wybranego elementu. Wydaje się, że działa to również w Safari.
$($0).tooltip('show').tooltip('show') getbootstrap.com/javascript/#tooltips-methods
$0w konsoli. Dlatego możesz wybrać element, który wyzwala podpowiedź i uruchomić $($0).tooltip('show').
Kliknij f12przejdź do zakładki konsoli i dodaj:
setTimeout(()=> {debugger},5000)Daje ci to 5 sekund na zrobienie tego, co chcesz, a przy tym się zepsuje 5 seconds. Następnie możesz sprawdzić element docelowy
(np. najedź na element i odczekaj 5 sekund, a następnie sprawdź ...)
Dla mnie zaakceptowana odpowiedź nie zadziałała: kliknięcie w DevTools natychmiast zamknęło ToolTip.
Jednak znalazłem /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution, które pomogło mi:
const F12 = 123
window.addEventListener('keydown', function(event) {
if (event.keyCode === F12 ) {
debugger;
}
});Podświetl element za pomocą inspektora
Naciśnij F12
Możesz teraz sprawdzić element z wstrzymanym JavaScriptem, więc DOM się nie zmieni.
Odpowiedź w jednym oknie, bez kodowania
Żadna z pozostałych odpowiedzi nie jest całkiem poprawna ani nie zawiera wystarczająco dużo szczegółów, więc oto moja próba.
<div>w<body>Brak rozwiązania kodu dla aktywowanych podpowiedzi JS:
Za pomocą narzędzi devtools Chrome sprawdź element zawierający / nadrzędny podpowiedzi. Na karcie „Elementy” kliknij prawym przyciskiem myszy element kontenera DOM, a następnie wybierz „Przerwij”> „Modyfikacje poddrzewa”. Następnym razem, gdy najedziesz kursorem na część DOM, w której znajduje się podpowiedź, kod JS zostanie wstrzymany, co pozwoli Ci na sprawdzenie zawartości podpowiedzi.
Wykonaj poniższe czynności
Otwórz Inspectokno w chromie.
Umieść kursor myszy nad etykietką.
naciśnij F8
Wykonywanie JS zostanie wstrzymane, a następnie możesz przejrzeć podpowiedź.
Naciśnij F8ponownie, aby rozpocząć wykonywanie i F10debugowanie.
Oto proste rozwiązanie: jeśli masz dynamiczne podpowiedzi, możesz uczynić je „stałymi”, zmieniając (tymczasowo) zdarzenie wyzwalające na click. Spowoduje to, że podpowiedź znika tylko po kliknięciu:
$('body').tooltip({
selector: "[data-toggle='tooltip']",
trigger: "click"
});W ten sposób można go łatwo sprawdzić za pomocą narzędzi do debugowania FF lub Chrome.
1) Otwórz okno Inspect, klikając F12
2) Przejdź do zakładki źródła (obok konsoli)
3) Teraz najedź kursorem na element, który ma zostać sprawdzony i trzymaj kursor tam.
4) Za pomocą klawiatury (Tab lub Shift + Tab) przenieś kontrolkę na przycisk wstrzymania lub F8 Skorzystaj z obrazu
5) Gdy fokus klawiatury jest na przycisku Play. Wciśnij Enter. Twój element najechania zostanie zamrożony, możesz teraz zrobić wszystko
edytowanie tych podpowiedzi jest tak proste.
Krok 1 : Sprawdź element, który ma podpowiedź. Upewnij się, że w devtools jest podświetlony na niebiesko.
Krok 2 : kliknij prawym przyciskiem myszy element (w części devtools) i wybierz: modyfikacje atrybutów, pod Przerwij
Krok 3 : Najedź kursorem na sprawdzany element, a na stronie pojawi się szara nakładka z małym tekstem: Wstrzymano w debugerze
u góry ekranu
Krok 4 : Kliknij niebieską strzałkę, aż zostanie wybrany stan najechania.
Krok 5 : Sprawdź i edytuj podpowiedź
Oto jak to zrobiłem na Macu:
Cmd+Shift+Ppracował dla mnie.Disable JavaScripti naciśnijEnterZapobiegnie to zanikaniu wszystkich podpowiedzi, które używają JavaScript.
Miałem z tym problemy, więc przeszedłem do dokumentacji i sprawdziłem podpowiedź, która jest już renderowana na stronie. To pomogło mi zobaczyć strukturę dom podpowiedzi i odpowiednio ją edytować.
W Chome na Linuksie można to osiągnąć w przypadku etykiet narzędzi generowanych przez JS, takich jak te dla odniesień na WikiPedia, wykonując następujące czynności:
Jak wspomniano powyżej, otwórz narzędzia programistyczne za pomocą F12. Otwórz je w innym oknie. Podświetl podpowiedź i kliknij Ctrl-Shift-C (Inspektor HTML). Gdy przesuniesz się po wskazówce, okno programisty wyświetli odpowiednią sekcję.
Jeśli chcesz mieć otwartą końcówkę po odjechaniu myszą, aby móc dokładniej sprawdzić ją w innym oknie, kliknij prawym przyciskiem myszy etykietkę, pozostaw menu kontekstowe i kliknij okno narzędzi deweloperskich. W tym scenariuszu pozostawia końcówkę do góry w oknie wikipedii.
Do pewnego stopnia działa również z końcówkami bootstrap.
Z jakiegoś powodu podane tutaj odpowiedzi nie działają dla mnie w systemie Windows. Mogłem sprawdzić podpowiedź, otwierając narzędzia deweloperskie, a następnie najeżdżając kursorem na element, który wywołuje podpowiedź, a następnie klikając prawym przyciskiem myszy na ten element (nie na podpowiedź). Następnie przesuń kursor do panelu inspektora i przewiń w dół. Element podpowiedzi powinien nadal tam być.
Narzędzia deweloperskie zapewniają sposób na sprawdzenie elementu, na którym znajduje się kursor, np. Podpowiedzi.
1 - Otwórz narzędzia programistyczne za pomocą F12.
2 - Wybierz zakładkę „Elementy”.
3 - Wybierz element nadrzędny, który zawiera podpowiedź.
4 - Kliknij „...” (w wierszu elementu nadrzędnego), a następnie wybierz „Przerwij na” / „modyfikacje poddrzewa” (patrz obrazek poniżej)
5 - Na koniec wróć do aplikacji i pokaż etykietkę. Powinien blokować wykonanie po wyświetleniu etykiety narzędzi
Mam nadzieję, że komuś się przyda!
Trafienie command-option-jaby otworzyć konsolę. Kliknij przycisk przypominający okno w prawym górnym rogu konsoli, aby otworzyć konsolę w innym oknie.
Następnie w oknie Chrome najedź kursorem na element, który uruchamia wyskakujące okienko, naciśnij command-tyle razy, ile potrzebujesz, aby skupić się na konsoli, a następnie wpisz debugger. To zamrozi stronę; wtedy możesz sprawdzić element w zakładce Elementy.
Warto zauważyć, że przełączanie stanu: hover z poziomu narzędzi deweloperskich ma wpływ tylko wtedy, gdy tekst podpowiedzi jest włączony przez CSS: reguły hover w pierwszej kolejności. Przełącznik stosuje stan najechania na element tylko w celu renderowania, ale nie wyzwala odpowiedniego zdarzenia najechania myszą JavaScript.
Wiele frameworków, takich jak AngularJS, dynamicznie dołącza HTML podpowiedzi do dolnej części treści dokumentu za pomocą JavaScript, gdy element docelowy jest najechany, więc jakakolwiek ilość najeżdżania i sprawdzania elementu docelowego nie pomoże.
Odpowiedź @ joeyyang bardzo mi się przydała w tym scenariuszu.
Jednym z najłatwiejszych sposobów, które znalazłem, jest:
Otwórz narzędzia deweloperskie Chrome z boku
Najedź na element
Kliknij prawym przyciskiem myszy
Kliknij narzędzia programistyczne
Teraz możesz przeglądać i zmieniać style