323
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

それ 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 can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
323
Help us understand the problem. What are the problem?