Ispezionare l'elemento al passaggio del mouse in Chrome?

106

Sto cercando di visualizzare, tramite gli strumenti per sviluppatori di Chrome, come sono strutturati i suggerimenti su un sito. Tuttavia, anche quando si passa con il mouse sopra l'elemento, quando "ispeziono l'elemento", non viene visualizzato nulla per il suggerimento nell'html. So di poter impostare lo stile su :hover, ma non riesco ancora a vedere l'html o il css del tooltip.

Qualche idea?

— Skitterm
fonte

Puoi trovare un'altra soluzione qui per Chrome e Firefox

— Muhammed Abdelfattah

80

In realtà ho trovato un trucco per farlo con i suggerimenti di Twitter Bootstrap. Se apri gli strumenti di sviluppo (F12) su un altro monitor, quindi passa con il mouse sull'elemento per visualizzare la descrizione comando, fai clic con il tasto destro come se dovessi selezionare "Ispeziona elemento". Lasciando aperto il menu contestuale, sposta il focus sugli strumenti di sviluppo. L'html per il suggerimento dovrebbe apparire accanto all'elemento è un suggerimento per nell'HTML. Quindi puoi guardarlo come se fosse un altro elemento. Se torni a Chrome, l'HTML scompare, quindi è solo qualcosa di cui essere a conoscenza.

Un po 'strano, ma ha funzionato per me, quindi ho pensato di condividerlo.

— Justin Chmura
fonte

12

Ebbene sì, ma non su Mac.

— actimel

2

- Passaggio 1: ispeziona l'elemento che genera la descrizione comando per visualizzare gli strumenti di sviluppo di Chrome. - Passaggio 2: mentre si passa con il mouse sull'elemento, verrà visualizzato il suggerimento. Senza lasciare l'elemento, apri una nuova finestra (Comando-N su Mac, Ctrl-N altrove) - Passaggio 3: trascina la nuova finestra sotto la vecchia finestra, in modo da poter ancora vedere il suggerimento, quindi sposta il cursore nell'ispettore degli elementi . - Passaggio 4: scorri fino in fondo, dove la tua descrizione comandi viene aggiunta al DOM. Fare clic sull'elemento per visualizzarne lo stile.

— pgblu

2

PS questo non funziona per i tooltip che sono generati tramite Javascript dall'attributo title dell'elemento, come ad esempio accade su SO. Questi suggerimenti utilizzano uno stile predefinito.

— pgblu

Questo mi ha aiutato per i suggerimenti in Kendo

— k29

1

Il trucco: prima vai alla scheda sorgente. Quindi puoi mettere in pausa Javascript con il pulsante F8. Il tasto di pausa è lì con la scorciatoia di F8 / Ctrl + \ (La risposta di @Rajan in questa pagina)

— rostamiani

85

Questa soluzione funziona senza alcun codice aggiuntivo.

Premi command-option-jper aprire la console. Fare clic sul pulsante a forma di finestra nell'angolo in alto a destra della console per aprire la console in una finestra diversa.

Quindi, nella finestra di Chrome, passa con il mouse sull'elemento che attiva il popover, premi command-`tutte le volte che devi concentrarti sulla console, quindi digita debugger. Ciò bloccherà la pagina, quindi potrai ispezionare l'elemento nella scheda Elementi.

— joeyyang
fonte

6

Questa risposta è davvero carina. Codice minimo, nessuna configurazione jQuery o doppio monitor.

— uKolka

1

Ha funzionato! Inizialmente a causa di alcuni errori di configurazione, vedevo i suggerimenti HTML predefiniti e non i suggerimenti di Bootstrap. Dopo aver risolto il problema, la tua soluzione ha funzionato. Grazie.

— DFB

2

Inoltre, se perdi la concentrazione mentre scrivi debuggersulla console, puoi premere alt+tabmentre passi il mouse sopra l'elemento. Ha funzionato per le app Chromium su Windows.

— Orcun

1

Questa è stata un'ottima risposta!

— Nobita

La pagina delle scorciatoie da tastiera di Chrome DevTools dice che è un controllo + `invece di comando +` per concentrarsi nuovamente sulla console. Forse è cambiato.

— rinat.io

85

F8 metterà in pausa il debug.

Passa il mouse sul suggerimento e premi F8mentre è visualizzato.

Ora puoi utilizzare l'ispettore per esaminare il CSS.

— dwjohnston
fonte

4

Mi piace come in Stackoverflow, finché continui a scorrere verso il basso, troverai quella risposta davvero buona che è di gran lunga migliore rispetto al resto. Questo è semplice e facile senza script aggiuntivi.

— Alexander Dixon

2

F8 non ha funzionato per me per qualche motivo, ma la pausa è anche vincolata a ctrl- \

— Bryan Larsen

La migliore soluzione qui

— NiallMitch14

Né <kbd> F8 </kbd> né <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> sulla mia tastiera tedesca mettono in pausa il debugger.

— test il

63

Dovresti solo forzare la visualizzazione del suggerimento come tale

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

Ora il suggerimento verrà visualizzato indipendentemente dallo stato di passaggio del mouse.

Scorri verso il basso vicino alla parte inferiore del DOM dove dovresti vedere il markup.

Aggiorna vedi il commento di cneuro per Bootstrap 3.

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

Aggiorna vedi la risposta di Marko Grešak per Chrome e apparentemente anche Safari, $0può essere utilizzato come scorciatoia per l'elemento attualmente selezionato. Sembra funzionare anche in Safari.

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

— Adam Grant
fonte

1

$ ('. myelement'). tooltip ('open') è ciò che ha funzionato per me.

— tekumara

6

A partire da Bootstrap 3, ora è .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

— cneuro

2

In Chrome, è possibile accedere all'elemento attualmente selezionato come $0nella console. Pertanto è possibile selezionare l'elemento che attiva un suggerimento ed eseguire $($0).tooltip('show').

— Marko Grešak

31

Fare clic su f12vai alla scheda della console e aggiungere quanto segue:

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

Questo ti darà 5 secondi per fare quello che vuoi e si interromperà 5 seconds. Quindi puoi ispezionare l'elemento di destinazione

(es. passa con il mouse sull'elemento e attendi 5 secondi, quindi ispeziona ..)

— Ali Kleit
fonte

Funziona anche in Electron.

— xmedeko

24

Per me, la risposta accettata non ha funzionato: facendo clic su DevTools si chiudeva immediatamente la descrizione comando.

Tuttavia, ho trovato /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution che mi ha aiutato:

Nella console :, Esegui:

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

Evidenzia elemento con ispettore
Premi F12

Ora puoi ispezionare l'elemento, con JavaScript in pausa in modo che il DOM non cambi.

— mikemaccana
fonte

1

Intelligente! Esattamente quello che stavo cercando. Grazie :) Anche se per qualche motivo non ha funzionato con F12 con la mia configurazione, ho usato keyCode == 13 e ho premuto INVIO.

— Jeremy F.

2

ottima soluzione! Suggerirei di salvare questo utile snippet nell'area SOURCE -> SNIPPETS di chrome in modo da poterlo eseguire con un solo doppio clic;)

— Magico

1

Questa soluzione è di gran lunga superiore a quella accettata. Lo trasformerò in un bookmarklet!

— Lulu

1

Ottima soluzione. Molto intelligente.

— Charlie Dalsass

1

Perfetto. Dovrebbe essere la risposta giusta / accettata!

— Brosig

10

Risposta a finestra singola, senza codifica

Nessuna delle altre risposte è corretta, o ha abbastanza dettagli, quindi ecco il mio tentativo.

Apri DevTools di Chrome utilizzando F12 / Ctrl + Maiusc + I (Windows / Linux) o Comando + Opzione + I (Mac).
Seleziona la scheda Sorgenti nella finestra DevTools.
Usando il mouse, passa con il mouse sull'elemento che vuoi ispezionare, per rendere visibile il suggerimento.
Premere F8 (Windows / Linux / Mac) per sospendere l'esecuzione dello script. La finestra principale apparirà in grigio e apparirà un popup "Paused in debugger".
Nella finestra DevTools, seleziona la scheda Elements
Per i suggerimenti di Bootstrap, il suggerimento apparirà come l'ultimo <div>nel file<body>

— TobyLL
fonte

5

Nessuna soluzione di codice per i tooltip attivati da JS:

Con i devtools di Chrome ispeziona l'elemento contenitore / genitore del tooltip. Nella scheda "elementi", fai clic con il pulsante destro del mouse sull'elemento DOM del contenitore, quindi scegli "interrompi"> "modifiche alla sottostruttura". La prossima volta che si passa con il mouse sulla parte del DOM in cui è ospitato il tooltip, il codice JS verrà messo in pausa permettendovi di ispezionare il contenuto del tooltip.

— clhenrick
fonte

4

Segui questi passi

InspectFinestra aperta in Chrome.
Posiziona il mouse sulla descrizione comando.
stampa F8

L'esecuzione di JS verrà sospesa e sarà quindi possibile esaminare il suggerimento.
Premere di F8nuovo per avviare l'esecuzione e F10per eseguire il debug.

— Parvez Ahmed
fonte

2

Ecco una soluzione semplice: se disponi di descrizioni comandi dinamiche, puoi renderle "persistenti" modificando (temporaneamente) l'evento di attivazione in click. Ciò avrà l'effetto che il suggerimento scompare solo al clic:

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

In questo modo, può essere facilmente ispezionato con gli strumenti di debug di FF o Chrome.

— lxg
fonte

2

1) Aprire la finestra Inspect facendo clic su F12

2) Vai alla scheda sorgente (accanto alla console)

3) Ora passa con il mouse sull'elemento da ispezionare e tieni il mouse sopra.

4) Utilizzando la tastiera (Tab o Maiusc + Tab) per spostare il controllo per mettere in pausa il pulsante o F8 Fare riferimento all'immagine

5) Quando il focus della tastiera è sul pulsante Play. Premi invio. Il tuo elemento al passaggio del mouse verrà bloccato, puoi fare qualsiasi cosa ora

— Rajan
fonte

1

è così semplice modificare questi suggerimenti.

Passaggio 1 : ispeziona l'elemento che ha la descrizione comando. Assicurati che sia evidenziato in blu in devtools.

Passaggio 2 : fare clic con il pulsante destro del mouse sull'elemento (nella parte devtools) e selezionare: modifiche degli attributi, in Interrompi

Passaggio 3 : passa il mouse sull'elemento ispezionato e sul sito apparirà una sovrapposizione grigia con un piccolo testo: In pausa nel debugger

nella parte superiore dello schermo

Passaggio 4 : fare clic sulla freccia blu fino a selezionare lo stato del passaggio del mouse.

Passaggio 5 : ispezionare e modificare la descrizione comando

— Catalin
fonte

0

Ho avuto problemi con questo, quindi sono andato alla documentazione e ho controllato il tooltip che è già reso nella pagina. Questo mi ha aiutato a vedere la struttura dom del tooltip e a modificarlo di conseguenza.

— philip
fonte

0

In Chome su Linux questo può essere ottenuto per i tooltip generati da JS come quelli per i riferimenti su WikiPedia facendo quanto segue:

Come detto sopra, apri gli strumenti di sviluppo usando F12. Aprili in un'altra finestra. Evidenzia la descrizione comando e fai clic su Ctrl-Maiusc-C (Impostazioni HTML). Mentre ti sposti sulla punta, la finestra di sviluppo mostrerà la sezione appropriata.

Se è necessario tenere il suggerimento aperto quando si sposta il mouse fuori da esso, per poterlo ispezionare in modo più approfondito nell'altra finestra, fare clic con il pulsante destro del mouse sul suggerimento e lasciare il menu di scelta rapida e fare clic sulla finestra degli strumenti di sviluppo. In questo scenario lascia la punta nella finestra di wikipedia.

In una certa misura funziona anche con i suggerimenti di bootstrap.

— user1806949
fonte

0

Per qualche motivo le risposte fornite qui non funzionavano per me su Windows. Sono stato in grado di ispezionare il suggerimento aprendo gli strumenti di sviluppo, quindi passando con il mouse sull'elemento che fa apparire il suggerimento, quindi facendo clic con il pulsante destro del mouse su quell'elemento (non il suggerimento). Quindi, sposta il cursore nel pannello di ispezione e scorri fino in fondo. L'elemento tooltip dovrebbe essere ancora lì.

— Nolan Lindeke
fonte

0

Gli strumenti di sviluppo forniscono un modo per ispezionare un elemento al passaggio del mouse come un suggerimento.

1 - Apri gli strumenti di sviluppo usando F12.

2 - Seleziona la scheda "Elementi".

3 - Seleziona l'elemento genitore che contiene la descrizione comando.

4 - Fare clic su "..." (sulla riga dell'elemento genitore) e dopo selezionare "Interrompi" / "modifiche alla sottostruttura" (vedi immagine sotto)

5 - Infine torna all'applicazione e fai apparire il Tooltip. Dovrebbe bloccare l'esecuzione dopo che il Tooltip diventa visibile

Spero possa essere utile per qualcuno!

— Ricardo Magalhães
fonte

0

Un'altra soluzione che ho trovato per questo problema. Tramite la visualizzazione Mobile o Tablet in Chrome, premi Crt + Maiusc + M nella visualizzazione Chrome Dev tools per Mobile in Chrome. Fai clic (Tap) su ToolTip div e puoi ispezionarlo con il tasto destro del mouse sul tooltip

— HERAwais
fonte

0

Premi command-option-jper aprire la console. Fare clic sul pulsante a forma di finestra nell'angolo in alto a destra della console per aprire la console in una finestra diversa.

Quindi, nella finestra di Chrome, passa con il mouse sull'elemento che attiva il popover, premi command-tutte le volte che devi concentrarti sulla console, quindi digita debugger. Questo bloccherà la pagina; quindi puoi ispezionare l'elemento nella scheda Elementi.

— Okau123
fonte

-1

Vale la pena notare che l'attivazione dello stato: hover dall'interno degli strumenti di sviluppo ha un impatto solo se il testo del suggerimento è abilitato tramite le regole CSS: hover in primo luogo. L'interruttore applica lo stato al passaggio del mouse all'elemento solo per scopi di rendering, ma non attiva un evento mouseover JavaScript corrispondente.

Molti framework come AngularJS allegano dinamicamente il tooltip HTML alla parte inferiore del corpo del documento tramite JavaScript quando si passa con il mouse su un elemento di destinazione, quindi qualsiasi quantità di passaggio del mouse e ispezione dell'elemento di destinazione non sarà di aiuto.

La risposta di @ joeyyang ha funzionato molto bene per me in questo scenario.

— John Rix
fonte

-2

Uno dei modi più semplici che ho trovato è:

Apri gli strumenti di sviluppo di Chrome sul lato
Passa il mouse sopra l'elemento
Pulsante destro del mouse
Fare clic su strumenti di sviluppo
Ora puoi ispezionare e modificare gli stili

— Kaspars Siricenko
fonte

Questo non è utile @Kaspars

— Es Noguera

@EsNoguera potrebbe essere più specifico perché. Questo è il modo in cui ha funzionato per me. Da quando ho trovato un metodo che ha funzionato, perché è sbagliato essere suggerito?

— Kaspars Siricenko