Sprawdzić element najechany kursorem w Chrome?

Question 1

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?

Question 2

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.

Question 3

F8 wstrzyma debugowanie.

Najedź myszą na podpowiedź i naciśnij, F8gdy jest wyświetlana.

Możesz teraz użyć inspektora, aby spojrzeć na CSS.

Question 4

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.

Question 5

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')

Question 6

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ź ...)

Question 7

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:

W konsoli :, Uruchom:

    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.

Question 8

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.

Otwórz narzędzia DevTools Chrome za pomocą F12 / Ctrl + Shift + I (Windows / Linux) lub Command + Option + I (Mac).
Wybierz kartę Źródła w oknie DevTools.
Za pomocą myszy najedź kursorem na element, który chcesz sprawdzić, aby wyświetlić podpowiedź.
Naciśnij klawisz F8 (Windows / Linux / Mac), aby wstrzymać wykonywanie skryptu. Główne okno zostanie wyszarzone i pojawi się wyskakujące okienko „Wstrzymano w debugerze”.
W oknie DevTools wybierz zakładkę Elements
W przypadku etykiet narzędzi Bootstrap, etykietka pojawi się jako ostatnia <div>w<body>

Question 9

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.

Question 10

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.

Question 11

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.

Question 12

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

Question 13

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ź

Question 14

Oto jak to zrobiłem na Macu:

Najedź kursorem na element, który ma podpowiedź z otwartymi narzędziami chrome devtools.
Zaczekaj, aż pojawi się podpowiedź.
Otwórz paletę poleceń devtools za pomocą skrótu klawiaturowego. Cmd+Shift+Ppracował dla mnie.
Wpisz Disable JavaScripti naciśnijEnter

Zapobiegnie to zanikaniu wszystkich podpowiedzi, które używają JavaScript.

Question 15

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ć.

Question 16

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.

Question 17

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ć.

Question 18

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!

Question 19

Znalazłem inne rozwiązanie tego problemu. W widoku urządzenia mobilnego lub tabletu w Chrome naciśnij Crt + Shift + M w Chrome Dev Tools for Mobile View w Chrome. Kliknij (Stuknij) element div ToolTip i możesz go sprawdzić, klikając prawym przyciskiem myszy w dymku

Question 20

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.

Question 21

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.

Question 22

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

Answer 1

108

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?

html css hover google-chrome-devtools Skitterm
źródło

Możesz znaleźć inne rozwiązanie tutaj dla Chrome i Firefox

Muhammed Abdelfattah

Answer 2

Możesz znaleźć inne rozwiązanie tutaj dla Chrome i Firefox

Muhammed Abdelfattah

Answer 3

81

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.

Justin Chmura
źródło

12

No tak, ale nie na Macu.

actimel

2

- Krok 1: sprawdź element, który generuje podpowiedź, aby wywołać narzędzia Chrome Dev. - Krok 2: po najechaniu na element pojawi się Twoja podpowiedź. Nie opuszczając elementu, otwórz nowe okno (Command-N na Macu, Ctrl-N w innym miejscu) - Krok 3: Przeciągnij nowe okno pod stare okno, aby nadal widzieć podpowiedź, a następnie przesuń kursor do Inspektora elementów . - Krok 4: Przewiń do dołu, gdzie Twoja podpowiedź jest dołączona do DOM. Kliknij element, aby zobaczyć jego styl.

pgblu

2

PS Nie działa to w przypadku podpowiedzi generowanych przez Javascript na podstawie własnego atrybutu tytułu elementu, jak na przykład dzieje się w SO. Te podpowiedzi używają domyślnego stylu.

pgblu

Pomogło mi to w przypadku podpowiedzi w Kendo

k29,

1

Sztuczka: najpierw przejdź do zakładki źródła. Następnie możesz wstrzymać Javascript przyciskiem F8. Klawisz pauzy jest tam ze skrótem F8 / Ctrl + \ (odpowiedź od @Rajan na tej stronie)

rostamiani

Answer 4

12

No tak, ale nie na Macu.

actimel

Answer 5

2

- Krok 1: sprawdź element, który generuje podpowiedź, aby wywołać narzędzia Chrome Dev. - Krok 2: po najechaniu na element pojawi się Twoja podpowiedź. Nie opuszczając elementu, otwórz nowe okno (Command-N na Macu, Ctrl-N w innym miejscu) - Krok 3: Przeciągnij nowe okno pod stare okno, aby nadal widzieć podpowiedź, a następnie przesuń kursor do Inspektora elementów . - Krok 4: Przewiń do dołu, gdzie Twoja podpowiedź jest dołączona do DOM. Kliknij element, aby zobaczyć jego styl.

pgblu

Answer 6

2

PS Nie działa to w przypadku podpowiedzi generowanych przez Javascript na podstawie własnego atrybutu tytułu elementu, jak na przykład dzieje się w SO. Te podpowiedzi używają domyślnego stylu.

pgblu

Answer 7

Pomogło mi to w przypadku podpowiedzi w Kendo

k29,

Answer 8

1

Sztuczka: najpierw przejdź do zakładki źródła. Następnie możesz wstrzymać Javascript przyciskiem F8. Klawisz pauzy jest tam ze skrótem F8 / Ctrl + \ (odpowiedź od @Rajan na tej stronie)

rostamiani

Answer 9

86

F8 wstrzyma debugowanie.

Najedź myszą na podpowiedź i naciśnij, F8gdy jest wyświetlana.

Możesz teraz użyć inspektora, aby spojrzeć na CSS.

dwjohnston
źródło

4

Podoba mi się, jak w Stackoverflow, o ile przewijasz w dół, znajdziesz naprawdę dobrą odpowiedź, która jest znacznie lepsza niż reszta. Jest to proste i łatwe bez dodatkowych skryptów.

Alexander Dixon,

2

F8 nie działał dla mnie z jakiegoś powodu, ale pauza jest również związana z ctrl- \

Bryan Larsen

Najlepsze rozwiązanie tutaj

NiallMitch 14

Ani <kbd> F8 </kbd>, ani <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> na moim niemieckim układzie klawiatury nie wstrzymuje debugera.

testowanie

Answer 10

4

Podoba mi się, jak w Stackoverflow, o ile przewijasz w dół, znajdziesz naprawdę dobrą odpowiedź, która jest znacznie lepsza niż reszta. Jest to proste i łatwe bez dodatkowych skryptów.

Alexander Dixon,

Answer 11

2

F8 nie działał dla mnie z jakiegoś powodu, ale pauza jest również związana z ctrl- \

Bryan Larsen

Answer 12

Najlepsze rozwiązanie tutaj

NiallMitch 14

Answer 13

Ani <kbd> F8 </kbd>, ani <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> na moim niemieckim układzie klawiatury nie wstrzymuje debugera.

testowanie

Answer 14

85

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.

joeyyang
źródło

6

Ta odpowiedź jest naprawdę fajna. Minimalny kod, brak konfiguracji jQuery lub dwóch monitorów.

uKolka

1

Zadziałało! Początkowo z powodu jakiejś błędnej konfiguracji widziałem domyślne podpowiedzi HTML, a nie podpowiedzi Bootstrap. Po naprawieniu tego problemu Twoje rozwiązanie zadziałało. Dzięki.

DFB

2

Dodatkowo, jeśli stracisz koncentrację podczas pisania debuggerdo konsoli, możesz nacisnąć przycisk alt+tab, najeżdżając na element. Działało w aplikacjach Chromium w systemie Windows.

Orcun,

1

To była świetna odpowiedź!

Nobita

Strona skrótów klawiaturowych Chrome DevTools mówi, że jest to Ctrl + `zamiast Command +`, aby skupić się z powrotem na konsoli. Może to się zmieniło.

rinat.io

Answer 15

6

Ta odpowiedź jest naprawdę fajna. Minimalny kod, brak konfiguracji jQuery lub dwóch monitorów.

uKolka

Answer 16

1

Zadziałało! Początkowo z powodu jakiejś błędnej konfiguracji widziałem domyślne podpowiedzi HTML, a nie podpowiedzi Bootstrap. Po naprawieniu tego problemu Twoje rozwiązanie zadziałało. Dzięki.

DFB

Answer 17

2

Dodatkowo, jeśli stracisz koncentrację podczas pisania debuggerdo konsoli, możesz nacisnąć przycisk alt+tab, najeżdżając na element. Działało w aplikacjach Chromium w systemie Windows.

Orcun,

Answer 18

1

To była świetna odpowiedź!

Nobita

Answer 19

Strona skrótów klawiaturowych Chrome DevTools mówi, że jest to Ctrl + `zamiast Command +`, aby skupić się z powrotem na konsoli. Może to się zmieniło.

rinat.io

Answer 20

63

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')

Adam Grant
źródło

1

$ ('. myelement'). tooltip ('open') jest tym, co zadziałało dla mnie.

tekumara

6

Od wersji Bootstrap 3 jest to teraz .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

cneuro

2

W przeglądarce Chrome dostęp do aktualnie wybranego elementu można uzyskać tak samo, jak $0w konsoli. Dlatego możesz wybrać element, który wyzwala podpowiedź i uruchomić $($0).tooltip('show').

Marko Grešak

Answer 21

1

$ ('. myelement'). tooltip ('open') jest tym, co zadziałało dla mnie.

tekumara

Answer 22

6

Od wersji Bootstrap 3 jest to teraz .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

cneuro

Answer 23

2

W przeglądarce Chrome dostęp do aktualnie wybranego elementu można uzyskać tak samo, jak $0w konsoli. Dlatego możesz wybrać element, który wyzwala podpowiedź i uruchomić $($0).tooltip('show').

Marko Grešak

Answer 24

31

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ź ...)

Ali Kleit
źródło

Działa też w Electronie.

xmedeko

Answer 25

Działa też w Electronie.

xmedeko

Answer 26

24

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:

W konsoli :, Uruchom:

    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.

mikemaccana
źródło

1

Sprytny ! Dokładnie to, czego szukałem. Dziękuję :) Chociaż z jakiegoś powodu nie działało z F12 w moim setupie, więc użyłem keyCode == 13 i nacisnąłem ENTER.

Jeremy F.

2

świetne rozwiązanie! sugerowałbym zapisanie tego użytecznego fragmentu w obszarze SOURCE -> SNIPPETS w chrome, aby można było go uruchomić podwójnym kliknięciem;)

Magico

1

Świetne rozwiązanie. Bardzo mądry.

Charlie Dalsass

Answer 27

1

Sprytny ! Dokładnie to, czego szukałem. Dziękuję :) Chociaż z jakiegoś powodu nie działało z F12 w moim setupie, więc użyłem keyCode == 13 i nacisnąłem ENTER.

Jeremy F.

Answer 28

2

świetne rozwiązanie! sugerowałbym zapisanie tego użytecznego fragmentu w obszarze SOURCE -> SNIPPETS w chrome, aby można było go uruchomić podwójnym kliknięciem;)

Magico

Answer 29

1

Świetne rozwiązanie. Bardzo mądry.

Charlie Dalsass

Answer 30

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.

Otwórz narzędzia DevTools Chrome za pomocą F12 / Ctrl + Shift + I (Windows / Linux) lub Command + Option + I (Mac).
Wybierz kartę Źródła w oknie DevTools.
Za pomocą myszy najedź kursorem na element, który chcesz sprawdzić, aby wyświetlić podpowiedź.
Naciśnij klawisz F8 (Windows / Linux / Mac), aby wstrzymać wykonywanie skryptu. Główne okno zostanie wyszarzone i pojawi się wyskakujące okienko „Wstrzymano w debugerze”.
W oknie DevTools wybierz zakładkę Elements
W przypadku etykiet narzędzi Bootstrap, etykietka pojawi się jako ostatnia <div>w<body>

Answer 31

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.

Answer 32

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.

Answer 33

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.

Answer 34

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

Answer 35

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ź

Answer 36

Oto jak to zrobiłem na Macu:

Najedź kursorem na element, który ma podpowiedź z otwartymi narzędziami chrome devtools.
Zaczekaj, aż pojawi się podpowiedź.
Otwórz paletę poleceń devtools za pomocą skrótu klawiaturowego. Cmd+Shift+Ppracował dla mnie.
Wpisz Disable JavaScripti naciśnijEnter

Zapobiegnie to zanikaniu wszystkich podpowiedzi, które używają JavaScript.

Answer 37

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ć.

Answer 38

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.

Answer 39

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ć.

Answer 40

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!

Answer 41

Znalazłem inne rozwiązanie tego problemu. W widoku urządzenia mobilnego lub tabletu w Chrome naciśnij Crt + Shift + M w Chrome Dev Tools for Mobile View w Chrome. Kliknij (Stuknij) element div ToolTip i możesz go sprawdzić, klikając prawym przyciskiem myszy w dymku

Answer 42

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.

Answer 43

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.

Answer 44

-2

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

Kaspars Siricenko
źródło

To nie jest pomocne @Kaspars

Es Noguera

@EsNoguera może być bardziej szczegółowe, dlaczego. Tak to działa dla mnie. Skoro znalazłem metodę, która zadziałała, dlaczego źle jest być sugerowanym?

Kaspars Siricenko

Answer 45

To nie jest pomocne @Kaspars

Es Noguera

Answer 46

@EsNoguera może być bardziej szczegółowe, dlaczego. Tak to działa dla mnie. Skoro znalazłem metodę, która zadziałała, dlaczego źle jest być sugerowanym?

Kaspars Siricenko

Sprawdzić element najechany kursorem w Chrome?

Odpowiedzi: