Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
318
Help us understand the problem. What is going on with this article?
@fruitriin

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

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

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

debugger - JavaScript | MDN

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

debugger文のいいところ

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

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

タイトルなし.gif

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

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

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

その他のデバッグ術

318
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
318
Help us understand the problem. What is going on with this article?