Untersuchen Sie Javascript Hover in den Chrome Developer Tools

Habe ich einige Javascript, das zeigt ein element schweben. Ich möchte den Stil dieses element und müssen daher zum auslösen des hover-Status im browser mit Chrome-Dev-Tools.

Dies ist einfach zu tun mit CSS, wo Sie festlegen können, der Status eines Elements innerhalb der Dev-Tools. Was ist der beste Weg, dies zu tun mit Javascript?

Code Beispiel:

$('#menu').hover(
    function() {
        console.log('test');
        $('#dropdown').show();
    },

    function() {
        $('#dropdown').hide();
    }
);

Rechtsklick auf element-Knoten im Inspektor -> Force element state -> hover
Das ist eine gute Frage, ohne eine gute Antwort. Es sollte mehr Stimmen.

InformationsquelleAutor raison | 2014-08-26

8

Nehmen Sie die unten-snippet ein Menü, das zeigt eine dropdown on hover:

JS:
```
$('#menu').hover(
  function() {
    $('#dropdown').show();
  }, function() {
    $('#dropdown').hide();
  }
);
```
CSS:
```
#menu {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
}
#dropdown {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
  display: none;
}
```
HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">menu</div>
<div id="dropdown">
  <ul>
    <li>menu item 1</li>
    <li>menu item 2</li>
    <li>menu item 3</li>
  </ul>
</div>
```
Kopieren Sie das snippet in ein lokales Dokument, als Chrome-Dev-Tools nicht erlauben Ihnen, Javascript zu verwenden, wählen Sie ein beliebiges element in diesem iframe. Dann, in Ihre Dev-Tools-Konsole ausführen:
```
$('#menu').trigger('mouseover');
```
Dies zeigt das dropdown-Menü, welches ein wirklich hässlich, unstyled Liste. Nun, statt mit der Maus mit der rechten Maustaste auf das element klicken und die Option "Element Untersuchen", die ich mir vorstellen könnte ist, wie Ihr es gewohnt sind, Dinge zu tun, führen Sie in der Konsole:
```
$('#dropdown');
```
Oder was auch immer-Selektor für welches element Sie wollen Stil/manipulieren. Die Konsole zeigt das Ergebnis deiner Aussage, was ist der relevante jQuery-Objekt. Jetzt klicken Sie rechts auf das Objekt in der Konsole und wählen Sie Zeigen im Elemente-Bedienfeld. Jetzt können Sie mit der Registerkarte "Stile", wie du es gewohnt bist, und deine Maus hat nie ausgelöst, die mouseout Ereignis, Ende der hover.
- Danke, dass endlich gearbeitet!
InformationsquelleAutor T Nguyen
33

Andere alternative wäre es, den Mauszeiger über das element mit der Maus und drücken Sie die F8-Taste (das funktioniert nur in Chrome) zum anhalten der Skript-Ausführung. Den hover-Zustand bleiben Sie sichtbar.
- sehr handlich und mit einem einzigen Tastendruck!
- Obwohl Chrome auf OS X behauptet, dass Sie die F8-Taste würde den trick tun, es zeigte auch Befehl-\ (backslash) als eine andere Tastenkombination für die gleiche Sache. Nur Befehl-\ für mich gearbeitet.
- In OS X, fn + F8 für mich gearbeitet.
InformationsquelleAutor missemm
10

Open-dev-tools durch drücken F12 und klicken Sie auf das toggle element state in der oberen rechten Ecke. Hier aktivieren Sie den hover-Zustand

Update:
Sie können auslösen des hover/mouseover/mouseenter-events auf sagen, es ist click-Ereignis:
```
$("#menu").click(function() {    
    $(this).trigger("mouseover");    
    $(this).trigger("hover");    
    $(this).trigger("mouseenter"); 
});
```
- Dies funktioniert nur mit CSS bin ich auf der Suche für eine Lösung, die mit Javascript-bitte. Dank
- Siehe Edit orig. post
- Ich ändern, damit die Funktion ausgelöst wird, durch ein anderes element, weil es nicht funktionieren - wegen der hover-ausblenden beim bewegen der Maus ausgeschaltet element. Ich möchte auch erwähnen, dieser code kann nicht Hinzugefügt werden, in den Chrome Dev Tools-Konsole. Ideal ist es, wo kann ich testen das hover.
InformationsquelleAutor Fueled By Coffee
0

Pro die anderen Antworten, können Sie pause JS-Ausführung über die DevTools shortcuts; Sie müssen jedoch den Fokus auf die DevTools-Fenster für diese zu arbeiten. Wenn Sie eine pause benötigen, ohne die Fokussierung auf die DevTools-Fenster, können Sie binden ein debugger - Anweisung, um ein keypress-Ereignis wie folgt:
```
document.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })
```
Läuft dieses snippet in der Konsole wird, einen listener hinzufügen, die Pausen, die die Ausführung von code, wenn Sie F12 drücken.

InformationsquelleAutor Ian deBoisblanc
0

Während @missemm 's Antwort ist die einfachste, eine weitere brauchbare option in Chrome (mit den dev-tools-Bedienfeld bereits geöffnet ist) trigger-Menü, dann mit der rechten Maustaste auf das element, das Sie wollen, um zu überprüfen, und wählen Sie" Ansicht-Seite Quelle " - option aus dem Dev-Tools-Menü. Diese öffnet sich ein weiteres Fenster und entfernt den Fokus von dem Fenster, das Sie waren zu inspizieren, so, wenn Sie im Menü ist hören für eine pointerout Ereignis wird nicht ausgelöst. Nur schließen Sie die Seite Quelle " und wie lange halten Sie Ihre Maus deutlich von der ursprünglichen Fenster, viewport, das Menü bleibt geöffnet, aber man kann immer noch die dev-tools-panel.

Dies ist manchmal bequemer, wenn Sie müssen in der Regel drücken Sie " fn " und " f8 " zur gleichen Zeit (das ist eine Strecke zu tun, one-handed).

InformationsquelleAutor tv13

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.