【プログラミング】alertデバッグの方法(JavaScript編)

2021年7月17日 2021年7月27日

itechsearchmanager

本記事の内容

目的
デバッグ方法
- alertデバッグ
  - alertの使い方
  - alertの表示場所
    - Safari
    - Google Chrome
まとめ

エンジニアである以上、避けては通れないものがあります。

それは作成したプログラムの動作確認です。

今回はそんな悩めるエンジニアに向けて、alertデバッグの方法を記載いたします。

自分も何回も調べることなので、備忘録として方法論をまとめておきたいと思います。

目的

プログラムが正常に動作しない時に確認する時はどうすればいいのかを提示することが最大の目的です。

本投稿で不具合の解答は示してはいません。

どのようにすれば、プログラムに潜む問題を洗い出すことが出来るのかを記載していきます。

デバッグ方法

alertデバッグ

alertデバッグとは、alert関数を用いたデバッグ手法で、printデバッグと同様、処理の前後や必要な箇所に関数を差し込んで使用します。

基本的なコードイメージはprintデバッグと同様の使い方になります。

printデバッグの具体例と同様に考えてみたいと思います。

具体的な使用例としては、下記の画像の「コードイメージ」のように処理の前後に１つ１つalert関数を入れ込んでいきます。

処理３に不具合があると仮定した場合は、コンソール画面には処理３開始までしか出力されず、処理４開始と完了の文字は出力されません。

printデバッグと異なる点は表示の方法になります。

アラート通知がブラウザ上に表示され、ブラウザにアラート通知が表示されている間はプログラムが停止します。

閉じるを押さないと次の画面表示が行われない点はprintデバッグと異なる点になります。

alertの使い方

//コメントをそのまま表示したい場合
alert('test1'); //シングルクオーテーション
alert("test2"); //ダブルクオーテーション
alert(`test3`); //バッククオーテーション Macの場合 shift + @で「`」が入力できます

//変数の中身を表示したい場合
let val = "test4";

alert(val);

//変数とコメントを合わせて表示したい場合
let val2 = "test5";

alert(val2 + "test6");

//改行したい場合(\nで改行を行います。)
let val3 = "test7";

alert(val3 + "\ntest8"); //バックスラッシュ Macの場合 option + ¥で「\」が入力できます