web-dev-qa-db-ja.com

Chrome Developer ToolsでJavaScriptホバーを検査する

ホバーに要素を表示するJavascriptがあります。この要素のスタイルを設定したいので、Chrome開発ツールを使用してブラウザーでホバー状態をトリガーする必要があります。

これはCSSで簡単に行え、開発ツール内で要素の状態を設定できます。 JavaScriptでこれを行うための最良の方法は何ですか？

コード例：

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

    function() {
        $('#dropdown').hide();
    }
);
javascriptjquerygoogle-chrome-devtools
26
raison

ホバーのドロップダウンを表示するメニューの以下のスニペットを取ります：

$('#menu').hover(
  function() {
    $('#dropdown').show();
  }, function() {
    $('#dropdown').hide();
  }
);
#menu {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
}
#dropdown {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
  display: none;
}
<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>

Chrome Dev ToolsではJavaScriptを使用してこのiframe内の要素を選択することはできません。次に、Dev Tools Consoleで次を実行して、このスニペットをローカルドキュメントにコピーします。

$('#menu').trigger('mouseover');

これはドロップダウンメニューを表示します。これは本当に見苦しい、スタイルのないリストです。ここで、マウスを使用して要素を右クリックし、[要素の検証]を選択する代わりに、コンソールで次のように操作して慣れていると思います。

$('#dropdown');

または、スタイル/操作する要素のセレクター。コンソールには、関連するjQueryオブジェクトであるステートメントの結果が表示されます。次に、コンソールでそのオブジェクトを右クリックし、[要素パネルで公開]を選択します。これで、これまでと同じように[スタイル]タブを使用でき、マウスがmouseoutイベントをトリガーしたことがなく、ホバーが終了しました。

9
T Nguyen

もう1つの方法は、マウスで要素の上にカーソルを合わせ、F8キーを押して（これはChromeでのみ機能します）、スクリプトの実行を一時停止することです。ホバー状態は表示されたままになります。

36
mrbut

F12を押して開発ツールを開き、右上隅にある要素の切り替え状態をクリックします。ここでホバー状態をアクティブ化できます

Toggle the Hover

pdate：クリックイベントだとすると、hover/mouseover/mouseenterイベントをトリガーできます。

$("#menu").click(function() {    
    $(this).trigger("mouseover");    
    $(this).trigger("hover");    
    $(this).trigger("mouseenter"); 
});
10
Fueled By Coffee

@missemmの答えが最も簡単ですが、Chrome=の別の使用可能なオプションは、（開発ツールパネルが既に開いている状態で）メニューをトリガーし、検査する要素を右クリックして、開発ツールメニューから[ページソースの表示]オプションを選択します。これにより、別のウィンドウが開き、検査していたウィンドウからフォーカスが削除されるため、メニューがpointeroutイベントをリッスンしている場合はトリガーされません。ページソースを閉じるだけですタブを使用し、マウスを元のウィンドウのビューポートに近づけない限り、メニューは開いたままですが、開発ツールパネルは引き続き使用できます。

これは、通常 'fn'と 'f8'を同時に押す必要がある場合に便利です（片手で行うストレッチです）。

0
tv13

他の回答に従って、DevToolsショートカットを介してJSの実行を一時停止できます。ただし、これを機能させるには、DevToolsウィンドウに集中する必要があります。 DevToolsウィンドウにフォーカスせずに一時停止する必要がある場合は、次のようにdebuggerステートメントをkeypressイベントにバインドできます。

document.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })

コンソールでこのスニペットを実行すると、F12キーを押したときにコードの実行を一時停止するリスナーが追加されます。

0
Ian deBoisblanc