Оглянути елемент, що наближається в Chrome

106

Я намагаюсь через інструменти для розробників Chrome переглянути, як підказки структуровані на сайті. Однак, навіть коли я навішується над елементом, коли я "перевіряю елемент", нічого не відображається для підказки в html. Я знаю, що можу встановити стиль :hover, але я все ще не бачу html або css підказки.

Якісь ідеї?

— Скітерм
джерело

Ви можете знайти інше рішення тут для Chrome & Firefox

— Muhammed

80

Я фактично знайшов хитрість зробити це за допомогою підказок Twitter Bootstrap. Якщо ви відкриєте інструменти розробки (F12) на іншому моніторі, наведіть курсор на елемент, щоб відкрити підказку, клацніть правою кнопкою миші, як якщо б ви вибрали "Перевірити елемент". Залишаючи це контекстне меню відкритим, перемістіть фокус на інструменти розробки. HTML-підказка повинна відображатись поруч із елементом його підказки в HTML. Тоді ви можете дивитися на це так, ніби це ще один елемент. Якщо ви повернетесь до Chrome, HTML зникає, тому просто слід пам’ятати.

Якийсь дивний спосіб, але він працював на мене, тому я подумав, що поділюсь ним.

— Джастін Чмура
джерело

12

Ну так, але не на Mac.

— actimel

2

- Крок 1: Перевірте елемент, який генерує підказку для створення інструментів Chrome Dev. - Крок 2: під час наведення курсору на елемент з'явиться підказка. Не виходячи з елемента, відкрийте нове вікно (Command-N на Mac, Ctrl-N в іншому місці) - Крок 3: Перетягніть нове вікно під старе вікно, щоб ви все ще могли побачити підказку, а потім перемістіть курсор в інспектор елементів . - Крок 4: Прокрутіть донизу, де ваша підказка додається до DOM. Клацніть елемент, щоб побачити його стилізацію.

— pgblu

2

PS це не працює для підказок, які генеруються через Javascript з власного атрибута заголовка елемента, як це відбувається, наприклад, на SO. Ці підказки використовують стиль за замовчуванням.

— pgblu

Це допомогло мені підказками в Кендо

— k29

1

Хитрість: спочатку перейдіть на вкладку джерела. Потім ви можете призупинити Javascript за допомогою кнопки F8. Клавіша паузи є із ярликом F8 / Ctrl + \ (Відповідь від @Rajan на цій сторінці)

— rostamiani

85

Це рішення працює без зайвого коду.

Удар command-option-j щоб відкрити консоль. Клацніть на вигляд вікна в правому верхньому куті консолі, щоб відкрити консоль у іншому вікні.

Потім у вікні Chrome наведіть курсор на елемент, який спрацьовує на попову, натисніть, command-`проте скільки разів вам потрібно зосередитись на консолі, а потім наберіть debugger. Це заморозить сторінку, тоді ви можете оглянути елемент на вкладці «Елементи».

— жоеянг
джерело

6

Ця відповідь справді приємна. Мінімальний код, відсутність налаштування jQuery або подвійного монітора.

— uKolka

1

Це спрацювало! Спочатку через деяку неправильну конфігурацію я бачив підказки HTML за замовчуванням, а не підказки Bootstrap. Після виправлення цієї проблеми ваше рішення спрацювало. Дякую.

— DFB

2

Крім того, якщо ви втрачаєте фокус під час запису debuggerна консоль, ви можете натискати alt+tab, наклавши курсор на елемент. Він працював для додатків Chromium у Windows.

— Оркун

1

Це була чудова відповідь!

— Nobita

На сторінці клавішних скорочень клавіш Chrome DevTools зазначається, що це керування + `замість команди +` для фокусування назад на консолі. Може, це змінилося.

— rinat.io

85

F8 призупинить налагодження.

Наведіть курсор на підказку та натисніть, F8поки він відображається.

Тепер ви можете використовувати інспектор для перегляду CSS.

— dwjohnston
джерело

4

Мені подобається, як у Stackoverflow, якщо ви продовжуєте прокручувати вниз, ви знайдете ту справді гарну відповідь, яка набагато краща за решту. Це просто і легко без зайвих сценаріїв.

— Олександр Діксон

2

F8 чомусь не працював для мене, але пауза також пов'язана з ctrl- \

— Брайан Ларсен

Найкраще рішення тут

— NiallMitch14

Ні <kbd> F8 </kbd>, ні <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> на моїй німецькій розкладці клавіатури не призупиняють відладчик.

— тестування

63

Вам просто потрібно змусити підказку показуватись як такою

$('.myelement').tooltip('open');

Тепер підказка відображатиметься незалежно від стану наведення.

Прокрутіть униз біля нижньої частини DOM, де ви побачите розмітку.

Оновлення див. У коментарі cneuro для Bootstrap 3.

$('.myelement').tooltip('show');

Оновлення див. Відповідь Марка Грешака для Chrome і, мабуть, також Safari, $0може використовуватися як ярлик для вибраного на даний момент елемента. Схоже, це працює і в Safari.

$($0).tooltip('show')

— Адам Грант
джерело

1

$ ('. myelement'). tooltip ('open') - це те, що працювало для мене.

— tekumara

6

Станом на Bootstrap 3, це тепер .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

— cneuro

2

У Chrome, доступ до поточного обраного елемента можна отримати, як $0у консолі. Тому ви можете вибрати елемент, який запускає підказку та запустити $($0).tooltip('show').

— Марко Грешак

31

Перейдіть f12на вкладку консолі та додайте наступне:

setTimeout(()=> {debugger},5000)

Це дасть вам 5 секунд, щоб робити все, що завгодно, і це зламається при 5 seconds. Потім ви можете оглянути цільовий елемент

(наприклад, наведіть курсор на елемент і почекайте 5 секунд, а потім перевірте ..)

— Алі Клейт
джерело

Працює і в Electron.

— xmedeko

24

Для мене прийнята відповідь не спрацювала: натиснувши DevTools, миттєво закрили ToolTip.

Однак я знайшов /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution, який мені допоміг:

У консолі :, запустіть:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

Виділіть елемент з інспектором
Хіт F12

Тепер ви можете перевірити елемент із JavaScript призупинено, щоб DOM не змінювався.

— mikemaccana
джерело

1

Розумний! Саме те, що я шукав. Дякую :) Хоча це не працювало з F12 з моїм налаштуванням чомусь, тому я використав keyCode == 13 і натиснув ENTER.

— Джеремі Ф.

2

чудове рішення! Я б запропонував зберегти цей корисний фрагмент у ДЖЕРЕЛАВІ -> SNIPPETS з хрому, щоб ви могли виконати його лише подвійним клацанням;)

— Magico

1

Це рішення набагато перевершує прийняте. Я зроблю це в закладку!

— Лулу

1

Прекрасне рішення. Дуже розумний.

— Чарлі Далсасс

1

Ідеально. Повинна бути правильна / прийнята відповідь!

— Brosig

10

Відповідь на одне вікно, без кодування

Жодна з інших відповідей не є коректною або містить детальну інформацію, тож ось моя спроба.

Відкрийте DevTools Chrome за допомогою F12 / Ctrl + Shift + I (Windows / Linux) або Command + Option + I (Mac).
Виберіть вкладку Джерела у вікні DevTools.
За допомогою миші наведіть курсор на елемент, який ви хочете оглянути, щоб зробити підказку видимою.
Натисніть F8 (Windows / Linux / Mac), щоб призупинити виконання сценарію. Головне вікно затьмариться, і з'явиться спливаюче вікно "Призупинено у відладці".
У вікні DevTools виберіть вкладку « Елементи »
Для підказки Bootstrap підказка з’явиться як остання <div>в<body>

— TobyLL
джерело

5

Немає рішення для коду підказки, активованих JS:

За допомогою розробників Chrome перевірте вміст / батьківський елемент підказки. На вкладці "елементи" клацніть правою кнопкою миші на цьому елементі DOM контейнера, а потім виберіть "перехід"> "модифікації піддіаграми". Наступного разу, коли ви наведіть курсор миші на частину DOM, підказка розміщена, код JS буде призупинено, що дозволяє вам перевірити вміст підказки.

— Кленрік
джерело

4

Виконайте ці кроки

Відкрити Inspectвікно в хромі.
Поставте мишу над підказкою.
Натисніть F8

Виконання JS буде призупинено, і тоді ви можете оглянути підказку.
Натисніть F8ще раз, щоб почати виконання та F10налагоджувати.

— Парвес Ахмед
джерело

2

Ось просте рішення: Якщо у вас є динамічні підказки, ви можете зробити їх "стійкими", (тимчасово) змінивши подію тригера на click. Це призведе до того, що підказка зникає лише при натисканні:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

Таким чином, його можна легко перевірити за допомогою інструментів налагодження FF або Chrome.

— lxg
джерело

2

1) Відкрийте вікно Огляд, натиснувши F12

2) Перейдіть на вкладку "Джерело" (поруч із консоллю)

3) Тепер наведіть курсор на елемент, який слід оглянути, і тримайте там мишу.

4) За допомогою клавіатури (Tab або Shift + вкладка) для переміщення елемента керування кнопкою паузи або F8 Перевірте зображення

5) Якщо фокус клавіатури знаходиться на кнопці "Відтворити". Натисніть Enter. Ваш елемент наближення буде заморожено, ви можете робити що завгодно зараз

— Раджан
джерело

1

так просто редагувати ці підказки.

Крок 1 : Перевірте елемент, який містить підказку. Переконайтеся, що він виділений синім кольором у чортах.

Крок 2 : клацніть правою кнопкою миші на елементі (у частині devtools) та виберіть: модифікації атрибутів, під розділом Перерва на

Крок 3 : Наведіть курсор на елемент, який перевіряється, і над сайтом з’явиться сірий наклад з невеликим текстом: Призупинено у відладці

у верхній частині екрана

Крок 4 : Клацніть на синю стрілку, поки не буде вибрано стан наведення.

Крок 5 : Перевірте та відредагуйте підказку

— Каталін
джерело

0

У мене були проблеми з цим, тому я перейшов до документації та оглянув підказку, яка вже відображається на сторінці. Це допомогло мені побачити структуру dom підказки та відредагувати її відповідно.

— Філіп
джерело

0

У Chome в Linux цього можна досягти для створених JS підказок, таких як посилання на WikiPedia, виконавши наступне:

Як зазначено вище, відкрийте інструменти розробки, використовуючи F12. Відкрийте їх в іншому вікні. Виділіть підказку та натисніть Ctrl-Shift-C (Інспектор HTML). Коли ви переходите через наконечник, у вікні розробки з’явиться відповідний розділ.

Якщо вам потрібно тримати підказку відкритою під час миші на ній, щоб мати можливість ретельніше перевірити її в іншому вікні, то клацніть правою кнопкою миші на підказці та залиште контекстне меню вгору, а потім натисніть на вікно інструментів розробки. У цьому випадку він залишає підказку у вікні вікіпедії.

До певної міри це також працює з підказками щодо завантаження.

— user1806949
джерело

0

Чомусь відповіді, надані тут, не працювали для мене в Windows. Мені вдалося оглянути підказку, відкривши інструменти розробки, потім навести курсор на елемент, який відображає підказку, а потім клацнути правою кнопкою миші на цьому елементі (не підказці). Потім перемістіть курсор на панель інспектора та прокрутіть донизу. Елемент підказки все одно повинен бути там.

— Нолан Ліндеке
джерело

0

Засоби розробки надають спосіб оглянути завислий елемент на зразок підказки.

1 - Відкрийте інструменти розробки, використовуючи F12.

2 - Виберіть вкладку «Елементи».

3 - Виберіть батьківський елемент, який містить підказку.

4 - Клацніть на "..." (у рядку батьківського елемента) і після виберіть "Перерва на" / "модифікації піддерева" (див. Зображення нижче)

5 - Нарешті поверніться до програми та зробіть показ підказки. Він повинен блокувати виконання після того, як підказка стане видимою

Сподіваюся, це може бути корисним для когось!

— Рікардо Магалхес
джерело

0

Ще одне рішення, яке я знайшов для цієї проблеми. У режимі перегляду мобільних пристроїв або планшетів у Chrome натисніть Crt + Shift + M у інструментах Chrome Dev для перегляду мобільних пристроїв у Chrome. Клацніть (Tap) на ToolTip div, і ви можете переглянути його правою кнопкою миші на підказці

— HERAwais
джерело

0

Натисніть,command-option-j щоб відкрити консоль. Клацніть на вигляд вікна в правому верхньому куті консолі, щоб відкрити консоль у іншому вікні.

Потім у вікні Chrome наведіть курсор на елемент, який спрацьовує на попову, натисніть, command-проте скільки разів вам потрібно зосередитись на консолі, а потім наберіть debugger. Це заморозить сторінку; то ви можете оглянути елемент на вкладці «Елементи».

— Окау123
джерело

-1

Варто зауважити, що зміна стану: наведення курсора з інструментів розробника впливає лише в тому випадку, якщо текст підказки ввімкнено в першу чергу через правила CSS: наведення. Перемикання застосовує стан наведення лише до елемента для цілей візуалізації, але не викликає відповідну подію перемикання JavaScript.

Багато фреймворків, таких як AngularJS, динамічно прикріплюють підказку HTML у нижній частині корпусу документа через JavaScript, коли цільовий елемент завис, тому будь-яка кількість навішування та перевірки цільового елемента не допоможе.

@ joeyyang відповідь спрацювала для мене дуже добре в цьому сценарії.

— Джон Рікс
джерело

-2

Один із найпростіших способів, який я знайшов:

Відкрийте інструменти для розробників Chrome збоку
Наведіть курсор на елемент
Клацніть правою кнопкою миші
Клацніть на інструменти розробки
Тепер ви можете оглянути та змінити стилі

— Каспар Сириченко
джерело

Це не корисно @Kaspars

— Es Noguera

@EsNoguera може бути більш конкретним, чому. Це так, як це працювало для мене. Оскільки я знайшов метод, який спрацював, чому це погано пропонувати?

— Каспар Сириченко