jsでbinding.pryっぽいデバッグ

検証ツールでjavascriptでもbinding.pryのようなことが出来ると教えてもらい、初めて知りました。

今までチェックしたい値を変数に入れて、console.log()で確認、ということをコマコマしていたのですが、教えてもらった方法の方がお手軽で便利でした。

その方法についてです。

 

方法

以下のように、

①検証ツールを開き、

②Sourcesを選択し、

③検証したいjsファイルを開き、

④処理を止めたい行をクリックして選択します。

gyazo.com

 

あとはbinding.pryの時と同じように、止めた場所の処理に流れるよう、ブラウザで操作します。

すると、選択した場所で処理が止まってくれます!

その状態で、検証ツールのコンソールで変数の中身を確認することもできます!

 

お手軽だったのでデバックする際この方法を活用していこうと思います!