48334


本件は[自身掲載の前回の案件](https://ja.stackoverflow.com/questions/48316/%E5%A4%96%E9%83%A8js%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E4%BD%8D%E7%BD%AE%E6%AC%A1%E7%AC%AC%E3%81%A7-%E6%8C%99%E5%8B%95%E3%81%8C%E5%A4%89%E3%82%8F%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%8A%E3%81%95%E3%82%89%E3%81%84%E3%81%97%E3%81%9F%E3%81%84)に引き続き、JSの大変初歩的な質問です。  
当初当方は以下のコーディングをクリックイベント自体の意味合いと解釈してしまっていたのですが、≪対象要素へイベント内容を登録する意味合いが本来≫、と理解を改めることができました（.onclick=の記載で確かにそうだ、と納得）。

[code]

    document.addEventListener("DOMContentLoaded", function(){
        document.getElementById("text-button").onclick = function() {
            document.getElementById("text").innerHTML = "クリックされた！";
            console.log("You're getting on my nerves!");
        };
    });
    
[/code]

そこで、また別の疑問が沸いてきてしまいました。

ブラウザの開発ツールで、ブレークポイントを付けてステップ実行できれば デバッグが本当にはかどるだろうなぁと以前から考えてきました。  
認識を誤っていた自分は、上記のような要素へのイベント登録のコーディング部分にブレークポイントをはって、クリック時の通過具合を検証していた気がします。（ステップ実行できた試しがない）

素人考えでExcelVBAのようにイベントの発火時にブレークポイントを仕掛けられれば、と思ってきたのですが、先のコーディングの意味合いからするとJSでは
それは無理=イベント察知部分にブレークポイントを仕掛けることはできない、ということなのでしょうか

イベント察知ができている・できていない、という確認作業は作業の上で頻発することだと思うのですが、皆様は如何しているのでしょうか？

妙な質問で申し訳ありませんがご見解を頂けましたら幸いです。


CC BY-SA 4.0
2018-09-12T17:36:28.313
48333
2018-09-12T18:06:28.113
25696
question
javascript jquery
JavaScriptのイベント系デバッグ作業　ステップ実行を試せるのか知りたい


イベントの発火時、すなわち今回の場合はクリック時にブレークポイントを仕掛ける方法についてご説明します。  
そもそも、イベントの発火時、すなわちクリックされたときに何が起こるのかというのは、イベントとして **関数** を登録することにより指定します。  
このプログラムの、`... .onclick =`の後ろの部分に注目してください。その部分は、以下のような **関数式** になっています。

[code]

    function() {
        document.getElementById("text").innerHTML = "クリックされた！";
        console.log("You're getting on my nerves!");
    }
    
[/code]

この関数をclickイベントに登録するということは、クリックされるたびにこの関数を呼び出してくださいという意味になります。

* * *

余談ですが、関数定義の方法をご存知であれば、以下の例のように別の場所で定義した関数を登録することもできます。

[code]

    document.addEventListener("DOMContentLoaded", function(){
        document.getElementById("text-button").onclick = clickedFunc;
    });
    function clickedFunc() {
        document.getElementById("text").innerHTML = "クリックされた！";
        console.log("You're getting on my nerves!");
    }
    
[/code]

* * *

さて、クリックされるたびにこの関数が呼び出されるということは、この関数の中にブレークポイントを仕込んでおくことによって、クリックイベントの発火に応じてデバッグやステップ実行を開始することができるということです。例えば、開発者ツールで下の例のコメントに示す行にブレークポイントを設定してみてください。

[code]

    document.addEventListener("DOMContentLoaded", function(){
        document.getElementById("text-button").onclick = function() {
            // ↓↓↓↓↓↓↓ この行 ↓↓↓↓↓↓↓
            document.getElementById("text").innerHTML = "クリックされた！";
            console.log("You're getting on my nerves!");
        };
    });
    
[/code]

そうすれば、クリックするたびにここでブレークすることが確認できます。

* * *

また、JavaScriptでは、開発者ツールからブレークポイントを指定するほかに、プログラム中でブレークポイントを指定することもできます。こちらも便利なので紹介いたします。

これは、ブレークポイントとしたい地点に`debugger;`という文を書くものです。この例では、以下のようにすることで、`debugger;`に到達した時点でブレークします。ただし、開発者ツールを開いている状態でないと`debugger;`文は効果がないため注意してください。

[code]

    document.addEventListener("DOMContentLoaded", function(){
        document.getElementById("text-button").onclick = function() {
            debugger;
            document.getElementById("text").innerHTML = "クリックされた！";
            console.log("You're getting on my nerves!");
        };
    });
    
[/code]


CC BY-SA 4.0
2018-09-12T18:06:28.113
48334
2018-09-12T18:06:28.113
30079
48333
answer