web-dev-qa-db-ja.com

開発者コンソールでスクリプトの実行を一時停止する方法

回転バナー（JavaScript＆CSS）を作成しようとしています。開発者コンソールのCSSなどでデバッグと変更を行うために、JavaScriptの実行を一時停止して、変更を加えてから実行したいと思います。では、ブラウザでスクリプトの実行を一時停止する方法はありますか？

javascriptdebuggingconsole
24
ptamzz

「ブレークポイント」を探しています。

どのブラウザを使用していますか？

Chromeでは、デベロッパーツールですぐにブレークポイントをサポートしています。
F12（またはCtrl-Shift-I）、「スクリプト」タブ、ドロップダウンからスクリプトを選択、行番号をクリック。
更新：
PCの場合： F12 または Ctrl+Shift+I / Macの場合： Cmd+Alt+I
[ソース]タブを選択し、左側のファイルペインからスクリプトを選択して、行番号をクリックします。

Firefoxでは、Firebug拡張機能を使用します。
PCおよびMacの場合： F12、
「スクリプト」タブ、必要に応じてアクティブ化および再読み込み、ドロップダウンからスクリプトを選択、行番号をクリック。

Javascriptがブレークポイントで一時停止すると、両方のブラウザーが通常のデバッグツールを提供して、コードを1ステップで実行し、変数値を検査して変更し、式を監視します...

22
Jpsy

katspaugh彼らのコメント での言及として：

F8

これは、開発者ツールウィンドウのソースタブからのみ機能しますChrome 59.0.3071.115（Mac OS X））。

14
Kenny Evitt

一時停止コードを自分で書くことができます。デバッガーを使用してJavaScriptの実行を一時停止します。 chromeコンソールで、次を実行：

window.addEventListener('keydown', function(event) { 
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }
  let handled = false;
  if (event.keyCode == 123) {
    handled = true;
    debugger;  // 123 is the keyCode of F12
  }
  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
});

インスペクターで要素を強調表示

ヒットF12

1
Zihao Zhao