LoginSignup
322

More than 3 years have passed since last update.

[JavaScriptデバッグテクニック]メソッド実行中の変数の中とか見たくない?

Last updated at Posted at 2020-07-12

それ debugger文 でできるよ
開発者ツールを開いていれば debugger とコードに書かれたところが実行された瞬間で止まってくれます。
コードに直接記載できるブレークポイントみたいなものですね。
(開発者ツールを閉じていると特に何も起きません)

サンプル.js
function hoge(){
  const test = 1
  debugger
}
hoge() // debugger文で止まってソースパネルが開く

debugger - JavaScript | MDN

debugger ステートメントは、ブレークポイントの設定のような任意の利用可能なデバッグ機能を呼び出します。デバッグ機能が利用可能ではない場合、このステートメントは効果がありません。

debugger文のいいところ

昨今はトランスパイルが流行りなので、コンパイル済みコードにブレークポイントを仕掛けるのは面倒ですが、
この方法ならイベントで起動するメソッドなど、どんなところでも簡単にブレークポイントを貼れます。

変数の中とか見たいしメソッドも実行したい

タイトルなし.gif

止まっている時にconsoleタブに戻ることができます。
この時、スコープは止まっているメソッドの中になります。

なので、現在のスコープにある変数に直接操作したりできるので
「コードを書いて保存して動かして動作を確認して、駄目ならまたコードを書き換えて…」みたいな煩わしさから開放されます!

是非活用してみてください。

その他のデバッグ術

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
322