ブラウザでJSを停める方法

Question

firefoxやchromeでJSが動いてるときに「ボタン１つで一時停止」のような機能はありませんでしょうか？

F12を押した瞬間に停まって、また押すと動き出す。のような。
または動き出さなくても指定時間で停まってくれればいいのですが…

ずっと止めるのではなく、動いてる最中に「今だ」と停めたいです。

Comments

[m.ts10806]

要件不明瞭につきあまり的確な回答にならず、回答者だけの推測で話がまとまらなくなっています。要件の具体化と自身が実現に向けて調べたことやってみたことを追記してください

Answer 1

デバッグ的な用途で使うなら

グローバルにフラグ変数を用意しといて

window.stop = false;

ソースコードのいたるところにこんなの埋め込んどいて

if (window.stop) debugger;

好きなタイミングでwindow.stop = trueにしてあげれば、debugger;のところで停止します。
再開はデベロッパツールから再開で。
再開させる際にwindow.stop = falseに書き換えないとまたすぐ止まるので、再開時にはフラグを落としましょう。

Comments

[think49]

高評価が集まっていますが、動いてる最中に「今だ」と停める現実的な方法はあるのでしょうか。
私はclickイベントハンドラで止める想像をしていましたが、どうやっても、処理完了後に発火するように思います。
setTimeoutで処理を分割して、flagで実行管理すれば、clickイベントハンドラで割り込めるかもしれませんが、どこまで処理を細分化するか、という問題があります。
ブレイクポイントのように、1行単位でやりたいとしたら、変数管理が極めて煩雑になることは想像に難くありません。

[spookybird]

質問者さんの意図と用途がまったくわからないので、とりあえず提案したまでです。

[think49]

私は私自身の質問の意図を明確にしたつもりです。

[m.ts10806]

think49さん
そこまで突っ込むのはこの回答の回答者へではなくて質問者へ、だと思います。
「要件をはっきりしてね。じゃないと回答の方向性定まらないから回答者を右往左往させるだけだから」って。

[think49]

To: mts10806 さん
質問の意図が不明瞭な質問に回答するのは「if文付で回答する意図」があると理解しています。
回答の「もし、～ならば～である」は質問の意図とは無関係に成立する論理です。
私はspookybirdさんの回答の解釈に確信を持てなかった為、spookybirdさんに質問しましたが、答えは「質問の意図」に対するものでした。
私はspookybirdさんが想定した「意図」と「用途」を期待しました。

[yukihisa]

そもそも「再開はデベロッパーツールで」ということならわざわざコード埋め込んだりせずにデベロッパーツールでブレイクポイント設定して動かすだけでいい気がするのですがだめなのでしょうか・・・？

[spookybird]

先に mts10806 さんがブレークポイントを使う方法を回答されていたので、別解として提案しました。
なにもこれが最良の方法だと思っているわけではありません。
私が自分で解析するなら間違いなくブレークポイントを使いますので。

[spookybird]

think49 さん、私は質問者さんの意図と用途をまったく考えていません。
こんな方法でも止められるよね、やってみたら面白いんじゃね？とかその程度の気持ちでした。

[yukihisa]

spookybird　様
なるほど、横から失礼しました。
やはりブレイクポイント使って流してくのが手っ取り早いですよね。

話の流れを見ていて、もし他の初心者がこの質問、回答を見た場合に「高評価が集まってるし、途中で止めるならこのやり方がいいのか」とわざわざ面倒なやり方を覚えるのは危険かなぁ。。。と思いまして、確認させていただきました。

個人的には確認で止める場合、知りたい変数でalert出してみたり、似たようなことをやってるのでこういうやり方もあるよね、という意味ではとても共感できます。
ブレイクポイント的に止めると言うのが今回の要件であるといいのですが、質問者様は現れませんね。。。

[think49]

どうやら、想定しているシナリオ、ゴールが私と皆さんで違うようです。
私が想定する理想的なゴールは「質問者が解決」し、「同じ問題を抱える人が解決できる情報を残す」ことですが、質問が曖昧なケースでは、前者の達成率が極めて低い事を経験的に知っているので、後者を優先しました。
質問者が置いてけぼりで情報交換が進むのは、質問者が回答を放置しているのが原因なので、自業自得と思っています。
「質問者の解決」を優先するのであれば、質問の意図とは違った回答がノイズになることから、「回答せずに質問者に補足要求する」が最適解と考えます。

[spookybird]

私は最適解だけがすべてだと思っていませんので、こんな方法もあるのか、こういう考え方もあるのか、といった気づきだったり別のことを思いつくきっかけのためにもあらゆる可能性を提示するのがいいんじゃないかと考えています。
プログラムも同じで、ベストプラクティスだけがすべてではなく、どんなに回りくどい方法であっても、意味不明なぐらい短縮されていても、それぞれが思う「面白い」方法で書ければそれでいいんだと思うんです。
デバッグだってやり方は一つじゃなく、十人いれば十通り方法があっていいと思うんです。
それがたとえ一般的に見て効率の悪い方法であっても。

[m.ts10806]

あまり論争になっても疲弊するだけかと思いますので、質問者さんの反応待ちでいいのではないでしょうか。
いずれの意見も正しいと思いますが、平行線の水掛け論を続けても要件が具体化されない限りは良い方向に向かわないように思います。

Answer 2

「指定箇所で止める」ブレイクポイントというのがありますがそれでは要件と違いますか？

でなければ任意のタイミングでsetTimeOut使うとかですかね。
今の質問内容だけでは具体的な要件が見えてこないですね

Comments

[think49]

処理の「途中」で止めるなら、私もブレイクポイントを推します。
動いてる最中に「今だ」と停めるのは無理ではないかなあ。

[m.ts10806]

如何様にもとれる要件不明瞭な質問内容なのでどれか引っ掛かればいいかなくらいですね。
ちゃんと要件書かずに損するのは結局質問者さんですしね。

[think49]

ブレイクポイントは「常に指定位置で止めて、任意のタイミングで [再開] する機能」なので、質問者が期待した「ボタン１つで一時停止」とは逆転の発想ですね。
「または動き出さなくても指定時間で停まってくれればいい」の要件には近いと感じました。

[m.ts10806]

まあ、質問者さんの反応まちですね待ちですね。
「やりたい方法」と「その表現」と「適切な方法」が合致しないことなんて幾らでもありますし。

Answer 3

firefoxはアドオン文化があるので、探せばいくつもでてきますね
chromeも拡張機能でjsoffするものがあるようです。
逆に本体の機能では難しいかもしれません

Comments

[退会済みユーザー]

質問者様はコードベースの質問ではなくてchromeとfirefoxで一時停止的な機能があるのかな？？って意図な気がします。
なのでこの方の回答が的を得てる気がしますね。

Answer 4

コード上で止める

コード上のロジックで止めるのなら、関数コード単位で処理の実行/停止を判定させる必要があります。

• clickされたら、強制終了 - JSFiddle

<input type="button" id="stop" value="stop" />

<script>
'use strcit';
(() => {
  function handleClick (event) {
    this.iterator1.stop = true;
    event.preventDefault();
  }

  function handleTimeout (iterator1) {
    const result = iterator1.next();

    console.log(result.value);
    if (!result.done) setTimeout(handleTimeout, 1000, iterator1);
  }

  (() => {
    const iterator1 = {
      i: 0,
      length: 100,
      stop: false,
      next: function next () {
        return {value: ++this.i, done: this.stop || this.i >= this.length};
      }
    };

    document.getElementById('stop').addEventListener('click', {
      handleEvent: handleClick,
      iterator1: iterator1
    }, false);

    setTimeout(handleTimeout, 1000, iterator1);
  })();
})();
</script>

止めやすいように、setTimeout で遅延処理を入れていますが、通常は手動で止める間もなく、処理が終了してしまうと思われます。
また、コメントでも書きましたが、JavaScriptはシングルスレッドで動作するので、処理の途中で割り込んで止めるのは難しいと思います。
(ServiceWorker でマルチスレッド化する事で実現可能となる可能性があるので、不可能とまではいいません)

開発者ツール

ブラウザの開発者ツールを利用する場合、「ブレークポイント」「ステップ実行」が想定されている用途に近いと思われます。

• Pause Your Code With Breakpoints  |  Tools for Web Developers  |  Google Developers
• コードをステップ実行する方法  |  Tools for Web Developers  |  Google Developers
• ブレークポイントを設置する - 開発ツール | MDN
• コードをステップ実行する - 開発ツール | MDN

Re: skipping さん