css - показ - инструменты разработчика chrome недоступны




См. Раздел «Состояние зависания» в инструментах разработчика Chrome. (8)

В моем случае, я хочу, чтобы dubug bootstrap tooltip. Но методы выше не работают для меня. Я думаю, что bootstrap реализовал это как-то вроде события ввода / вывода мыши.

Во всяком случае, когда я нажимаю кнопку, он будет генерировать элемент html брата под кнопкой, поэтому я выбираю родительский элемент кнопки на вкладке «Элементы» окна «Инструменты разработчика», навешивает кнопку и «Ctrl + C», то я могу вставить исходный код, который содержит сгенерированный код. В последний раз найдите сгенерированный код и добавьте его в исходный код «Редактировать как HTML» на вкладке «Элементы».

Надеюсь, это может помочь кому-то.

Я хочу увидеть стиль :hover для привязки, который я нахожу в Chrome. В Firebug есть раскрывающийся список стилей, который позволяет мне выбирать разные состояния для элемента. Я не могу найти ничего подобного в Chrome. Я что-то пропустил?


В случае, если это помогает, это, по-видимому, проще в последнем Chrome (47.0.2526.106):

Осмотрите элемент, а затем нажмите на три белые точки в левом желобе:

Затем выберите нужное состояние элемента из этого раскрывающегося списка:


Существует несколько способов увидеть стили HOVER STATE в инструментах разработчика Chrome.

Способ 01

Способ 02

С Firefox Developer Developer Toll

С Firebug


Теперь вы можете видеть как правила psuedo-класса, так и их элементы.

Чтобы увидеть такие правила, как :hover на панель «Стили», нажмите маленький текст :hov в правом верхнем углу.

Чтобы принудительно ввести элемент в состояние :hover , щелкните его правой кнопкой мыши.

Дополнительные советы на панели элементов в ярлыках инструментов разработчика Chrome .


Я знаю, что то, что я делаю, довольно обходное решение, однако оно отлично работает, и я так делаю это каждый раз.

Затем выполните следующие действия:

  • Сначала убедитесь, что Chrome Developer Tools отстыкована.
  • Затем просто перемещайте любую сторону окна Dev Tools до середины элемента, который вы хотите проверить, когда он зависает.

  • Наконец, наведите элемент, щелкните правой кнопкой мыши и осмотрите элемент, переместите указатель мыши в окно Dev Tools, и вы сможете играть со своим элементом: hover css.

Ура!


Я мог бы увидеть стиль, выполнив следующие шаги, предложенные Babiker: «Щелкните правой кнопкой мыши элемент, но НЕ перемещайте указатель мыши от элемента, держите его в режиме наведения. Выберите элемент проверки с клавиатуры, как в стрелке вверх и затем введите ключ. "

Для изменения стиля выполните описанные выше шаги, а затем - измените вкладку своего браузера, нажав ctrl + TAB на клавиатуре. Затем нажмите на вкладку, которую вы хотите отлаживать. Ваш экран зависания все равно будет там. Теперь аккуратно наведите курсор мыши на область инструмента разработчика.


Я отлаживал состояние hover меню с Chrome и делал это, чтобы видеть код состояния зависания:

На панели « Elements нажмите кнопку « Toggle Element state и выберите :hover .

На панели « Scripts перейдите в раздел « Event Listeners Breakpoints в правой нижней части и выберите « Mouse -> mouseup .

Теперь осмотрите меню и выберите нужное поле. Когда вы отпустите кнопку мыши, она должна остановиться и отобразить выбранное состояние наведения Elements панели « Elements (смотрите раздел « Styles »).


Я хотел увидеть состояние зависания на всплывающих подсказках Bootstrap. Принудительное: состояние hover в Chrome dev Инструменты не создали требуемый вывод, но запуск события mouseenter через консоль сделал трюк в Chrome. Если на странице существует jQuery, вы можете запустить:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');





google-chrome-devtools