Inspecionar elemento pairado no Chrome?

106

Estou tentando visualizar, por meio das ferramentas de desenvolvedor do Chrome, como as dicas de ferramentas são estruturadas em um site. No entanto, mesmo quando estou focado sobre o item, quando "inspeciono o elemento", nada aparece para a dica de ferramenta no html. Eu sei que posso definir o estilo para :hover, mas ainda não consigo ver o html ou css da dica de ferramenta.

Alguma ideia?

html css hover google-chrome-devtools Skitterm
fonte

Você pode encontrar outra solução aqui para Chrome e Firefox

Muhammed Abdelfattah

80

Na verdade, encontrei um truque para fazer isso com as dicas do Twitter Bootstrap. Se você abrir as ferramentas de desenvolvimento (F12) em outro monitor, passe o mouse sobre o elemento para abrir a dica de ferramenta, clique com o botão direito como se fosse selecionar 'Inspecionar Elemento'. Deixando esse menu de contexto aberto, mova o foco para as ferramentas de desenvolvimento. O html para a dica de ferramenta deve aparecer próximo ao elemento, é uma dica de ferramenta para o HTML. Então você pode olhar para ele como se fosse outro elemento. Se você voltar para o Chrome, o HTML desaparece, então é apenas algo para se estar ciente.

Um jeito meio estranho, mas funcionou para mim, então achei que deveria compartilhá-lo.

Justin Chmura
fonte

12

Bem, sim, mas não no Mac.

actimel

2

- Etapa 1: inspecione o elemento que gera a dica de ferramenta para abrir as ferramentas Chrome Dev. - Etapa 2: ao passar o mouse sobre o elemento, sua dica de ferramenta aparecerá. Sem sair do elemento, abra uma nova janela (Command-N no Mac, Ctrl-N em outro lugar) - Etapa 3: arraste a nova janela abaixo da janela antiga, para que você ainda possa ver a dica de ferramenta e mova o cursor para o inspetor de elemento . - Etapa 4: role até o final, onde sua dica de ferramenta é anexada ao DOM. Clique no elemento para ver seu estilo.

pgblu

2

PS, isso não funciona para dicas de ferramentas que são geradas via Javascript a partir do próprio atributo title do elemento, como por exemplo acontece no SO. Essas dicas de ferramentas usam um estilo padrão.

pgblu

Isso me ajudou nas dicas de Kendo

k29

1

O truque: primeiro vá para a guia de origem. Então você pode pausar o Javascript com o botão F8. A tecla de pausa está lá com o atalho de F8 / Ctrl + \ (A resposta de @Rajan nesta página)

rostamiani

85

Esta solução funciona sem nenhum código extra.

Clique command-option-jpara abrir o console. Clique no botão de aparência de janela no canto superior direito do console para abrir o console em uma janela diferente.

Em seguida, na janela do Chrome, passe o mouse sobre o elemento que aciona o popover, pressione command-`quantas vezes precisar para se concentrar no console e digite debugger. Isso congelará a página, então você pode inspecionar o elemento na guia Elementos.

joeyyang
fonte

6

Esta resposta é muito boa. Código mínimo, sem jQuery ou configuração de monitor duplo.

uKolka de

1

Funcionou! Inicialmente, devido a algum erro de configuração, eu estava vendo as dicas de ferramentas HTML padrão e não as dicas de bootstrap. Depois de corrigir esse problema, sua solução funcionou. Obrigado.

DFB

2

Além disso, se você perder o foco ao escrever debuggerno console, poderá pressionar alt+tabenquanto passa o mouse sobre o elemento. Funcionou para aplicativos Chromium no Windows.

Orcun

1

Essa foi uma ótima resposta!

Nobita

A página de atalhos de teclado do Chrome DevTools diz que é um control + `em vez de command +` para focar de volta no console. Talvez tenha mudado.

rinat.io

85

F8 irá pausar a depuração.

Passe o mouse sobre a dica de ferramenta e pressione F8enquanto ela é exibida.

Agora você pode usar o inspetor para examinar o CSS.

dwjohnston
fonte

4

Gosto de como em Stackoverflow, contanto que você continue rolando para baixo, você encontrará aquela resposta realmente boa que é muito melhor do que o resto. Isso é simples e fácil, sem scripts extras.

Alexander Dixon

2

F8 não funcionou para mim por algum motivo, mas a pausa também é obrigada a ctrl- \

Bryan Larsen

Melhor solução aqui

NiallMitch14

Nem <kbd> F8 </kbd> nem <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> em meu layout de teclado alemão pausa o depurador.

teste em

63

Você só precisa forçar a dica de ferramenta a ser exibida como tal

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

Agora, a dica de ferramenta será exibida independentemente do estado de pairar.

Role para baixo próximo à parte inferior do DOM, onde você deve ver a marcação.

Atualização, consulte o comentário de cneuro para o Bootstrap 3.

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

Atualização, consulte a resposta de Marko Grešak para o Chrome e, aparentemente, o Safari também, $0pode ser usado como um atalho para o elemento atualmente selecionado. Isso parece funcionar no Safari também.

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

Adam Grant
fonte

1

$ ('. myelement'). tooltip ('open') é o que funcionou para mim.

tekumara

6

No Bootstrap 3, agora é .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

cneuro

2

No Chrome, o elemento atualmente selecionado pode ser acessado como $0no console. Portanto, você pode selecionar o elemento que aciona uma dica de ferramenta e executa $($0).tooltip('show').

Marko Grešak

31

Clique em f12ir para a guia do console e adicione o seguinte:

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

Isso lhe dará 5 segundos para fazer o que quiser e ele quebrará 5 seconds. Então você pode inspecionar o elemento alvo

(por exemplo, passe o mouse sobre o elemento, aguarde 5 segundos e inspecione ...)

Ali Kleit
fonte

Funciona em Electron também.

xmedeko de

24

Para mim, a resposta aceita não funcionou: clicar em DevTools imediatamente fecha o ToolTip.

No entanto, encontrei /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution que me ajudou:

No console :, Execute:

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

Destacar elemento com inspetor
Pressione F12

Agora você pode inspecionar o elemento, com o JavaScript pausado para que o DOM não mude.

mikemaccana
fonte

1

Inteligente ! Exatamente o que eu estava procurando. Obrigado :) Embora não tenha funcionado com F12 na minha configuração por algum motivo, usei keyCode == 13 e pressionei ENTER.

Jeremy F.

2

ótima solução! Eu sugeriria salvar este trecho útil na área SOURCE -> SNIPPETS do chrome para que você possa executá-lo com apenas um clique duplo;)

Magico

1

Esta solução é muito superior à aceita. Vou transformá-lo em um bookmarklet!

Lulu de

1

Ótima solução. Muito esperto.

Charlie Dalsass

1

Perfeito. Deve ser a resposta certa / aceita!

Brosig

10

Resposta de janela única, sem codificação

Nenhuma das outras respostas está totalmente certa ou tem detalhes suficientes, então aqui está minha tentativa.

Abra o DevTools do Chrome usando F12 / Ctrl + Shift + I (Windows / Linux) ou Command + Option + I (Mac).
Selecione a guia Sources na janela DevTools.
Usando o mouse, passe o mouse sobre o elemento que deseja inspecionar para tornar a dica de ferramenta visível.
Pressione F8 (Windows / Linux / Mac) para pausar a execução do script. A janela principal ficará cinza e um pop-up "Pausado no depurador" aparecerá.
Na janela DevTools, selecione a guia Elementos
Para dicas de ferramentas do Bootstrap, a dica aparecerá como a última <div>no<body>

TobyLL
fonte

5

Nenhuma solução de código para dicas de ferramentas ativadas por JS:

Com os devtools do Chrome, inspecione o elemento contendo / pai da dica de ferramenta. Na guia "elementos", clique com o botão direito no elemento DOM do contêiner e escolha "quebrar em"> "modificações de subárvore". Na próxima vez que você passar o mouse sobre a parte do DOM em que a dica de ferramenta está alojada, o código JS será pausado, permitindo que você inspecione o conteúdo da dica de ferramenta.

Clhenrick
fonte

4

Siga esses passos

Abra a Inspectjanela no cromo.
Coloque o mouse sobre a dica de ferramenta.
pressione F8

A execução de JS será pausada e você poderá inspecionar a dica de ferramenta.
Pressione F8novamente para iniciar a execução e F10depurar.

Parvez Ahmed
fonte

2

Aqui está uma solução simples: se você tiver dicas de ferramentas dinâmicas, pode torná-las “persistentes” alterando (temporariamente) o evento de gatilho para click. Isso fará com que a dica de ferramenta apenas desapareça com um clique:

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

Dessa forma, ele pode ser facilmente inspecionado com as ferramentas de depuração do FF ou do Chrome.

lxg
fonte

2

1) Abra a janela Inspecionar clicando em F12

2) Vá para a guia de origem (ao lado do console)

3) Agora passe o mouse sobre o elemento a ser inspecionado e mantenha o mouse ali.

4) Usando o teclado (Tab ou shift + tab) para mover o controle para o botão de pausa ou F8 Consulte a imagem

5) Quando o foco do teclado está no botão Play. Pressione Enter. Seu elemento de foco será congelado, você pode fazer qualquer coisa agora

Rajan
fonte

1

é tão simples editar essas dicas de ferramentas.

Etapa 1 : inspecione o elemento que contém a dica de ferramenta. Certifique-se de que esteja destacado em azul nas ferramentas de desenvolvimento.

Etapa 2 : clique com o botão direito do mouse no elemento (na parte devtools) e selecione: modificações de atributo, em Quebrar em

Etapa 3 : passe o mouse sobre o elemento inspecionado e uma sobreposição cinza aparecerá sobre o site com um pequeno texto: Pausado no depurador

no topo da tela

Etapa 4 : Clique na seta azul até que o estado de foco seja selecionado.

Etapa 5 : inspecione e edite a dica de ferramenta

Catalin
fonte

0

Tive problemas com isso, então fui até a documentação e verifiquei a dica de ferramenta que já está renderizada na página. Isso me ajudou a ver a estrutura dom da dica de ferramenta e editá-la de acordo.

Philip
fonte

0

No Chome no Linux, isso pode ser obtido para dicas de ferramentas geradas por JS, como aquelas para referências na WikiPedia, fazendo o seguinte:

Conforme declarado acima, abra as ferramentas de desenvolvimento usando F12. Abra-os em outra janela. Realce a dica de ferramenta e clique em Ctrl-Shift-C (O Inspetor de HTML). Conforme você avança sobre a dica, a janela de desenvolvimento mostra a seção apropriada.

Se você precisar manter a dica aberta ao tirar o mouse dela, para poder inspecioná-la na outra janela mais detalhadamente, clique com o botão direito na dica de ferramenta e deixe o menu de contexto aberto, e clique na janela de ferramentas de desenvolvimento. Nesse cenário, ele deixa a dica aberta na janela da wikipedia.

Até certo ponto, também funciona com dicas de bootstrap.

user1806949
fonte

0

Por algum motivo, as respostas fornecidas aqui não estavam funcionando para mim no Windows. Consegui inspecionar a dica de ferramenta abrindo as ferramentas de desenvolvimento, passando o mouse sobre o elemento que traz a dica de ferramenta e clicando com o botão direito do mouse nesse elemento (não na dica). Em seguida, mova o cursor para o painel de inspeção e role para baixo até o final. O elemento de dica de ferramenta ainda deve estar lá.

Nolan Lindeke
fonte

0

As ferramentas de desenvolvimento fornecem uma maneira de inspecionar um elemento pairado como uma dica de ferramenta.

1 - Abra as ferramentas de desenvolvimento usando F12.

2 - Selecione a guia "Elementos".

3 - Selecione o elemento pai que contém a dica de ferramenta.

4 - Clique em "..." (na linha do elemento pai) e depois selecione "Quebrar em" / "modificações de subárvore" (ver imagem abaixo)

5 - Por fim volte ao aplicativo e faça aparecer a Tooltip. Deve bloquear a execução após a dica de ferramenta ficar visível

Espero que possa ser útil para alguém!

Ricardo Magalhães
fonte

0

Outra solução que encontrei para este problema. Por meio da visualização Mobile ou Tablet no Chrome, pressione Crt + Shift + M nas ferramentas Chrome Dev para visualização Mobile no Chrome. Clique (toque) no div ToolTip e você pode inspecioná-lo com o botão direito do mouse na tooltip

HERAwais
fonte

0

Clique command-option-jpara abrir o console. Clique no botão de aparência de janela no canto superior direito do console para abrir o console em uma janela diferente.

Em seguida, na janela do Chrome, passe o mouse sobre o elemento que aciona o popover, pressione command-quantas vezes precisar para se concentrar no console e digite debugger. Isso congelará a página; então você pode inspecionar o elemento na guia Elementos.

Okau123
fonte

-1

Vale a pena notar que alternar o estado: hover de dentro das ferramentas de desenvolvimento só tem impacto se o texto de dica for habilitado via CSS: regras de foco em primeiro lugar. A alternância aplica apenas o estado de foco ao elemento para fins de renderização, mas não aciona um evento de mouseover de JavaScript correspondente.

Muitas estruturas, como AngularJS, anexam dinamicamente o HTML da dica de ferramenta à parte inferior do corpo do documento via JavaScript quando um elemento de destino é passado, portanto, qualquer quantidade de pairar e inspecionar o elemento de destino não ajudará.

A resposta de @joeyyang funcionou muito bem para mim neste cenário.

John Rix
fonte

-2

Uma das maneiras mais fáceis que encontrei é:

Abra as ferramentas de desenvolvimento do Chrome na lateral
Passe o mouse sobre o elemento
Clique com o botão direito
Clique nas ferramentas de desenvolvimento
Agora você pode inspecionar e alterar estilos

Kaspars Siricenko
fonte

Isso não é útil @Kaspars

Es Noguera

@EsNoguera poderia ser mais específico por quê. Foi assim que funcionou para mim. Já que encontrei um método que funcionou, por que é ruim ser sugerido?

Kaspars Siricenko

Inspecionar elemento pairado no Chrome?

Respostas: