はじめに
こんにちは、この記事は、21卒EGの深尾と眞嶋がお送りします！
早いもので、入社から3か月。この記事では、その間に取り組んできた研修で、先輩方から教えてもらって役に立ったデバッグの小技を、私たちのエピソードとともに紹介していきます！
入社当時のおはなし
誰にでもはじめてってありますよね。
全ての行にブレークポイントを置いたり、仮説を立てるために代入式を爆書きしたり…
デバッグコンソールにデータを全部出力するなんて力技に出た方もいらっしゃるのではないでしょうか。
今となっては目を覆いたくなる…
仮説のデータに書き換える
ブレークポイントで処理が止まると、データの中身を確認できることはご存じかと思います。
ではそのデータを書き換えられることはご存じですか？
データを確認した際、値が入っている箇所をクリックしてみてください。編集画面になるんです！
ここで思うがままにデータを書き換えることができるので、Web系のプロジェクトであればリロードすることで何度でもデータごとの挙動を確認することができます。
ショートカットキーで世界は色を変える
データがおかしいとき、先ほどのように「データを入れているところにブレークポイントを置く」ことで原因を調査していると思います。このとき、一番大変なのは「どこでデータをセットしているか探す」という作業です。
「代入部分を全部見れたらな…」と思う方はきっと多いことでしょう。
その機能、あります！！
調べたい値にカーソルを合わせて「Shift + F12」を押してみてください。下の画像のように変数を呼び出している箇所の一覧が出てきます。十字キーで移動すれば呼び出し個所を一気に確認できるので、代入しているところでブレークポイントを置けばすぐにデータの確認に入れます。
ちなみにブレークポイントは「F9」で置いたり外したりできます。全部削除したい場合は「Ctrl + Shift + F9」でまとめて削除できるので便利ですよ！
チートシート
| 機能 | ショートカットキー |
| ブレークポイント(ON/OFF) | F9 |
| ブレークポイント全削除 | Ctrl + Shift + F9 |
| デバッグ起動 | F5 |
| デバッグ再起動 | Ctrl + Shift + F5 |
| grep検索 | Shift + F12 (対象にカーソルを合わせて) |
| 定義箇所に移動 | Ctrl + 左クリック |
| 置換 | Ctrl + H |
おわりに
いかがでしたでしょうか。
入社して3か月という短い期間で私たちの生産性は飛躍的に向上しました。日々チャレンジし続けることで、調べたことや先輩からのアドバイスを貪欲に吸収して成長することができたのです。私たちは、これからも100倍速での成長をし続けていきます。
最後までお読みいただきありがとうございました！
コメント