TIPSChromeコメントを書くぼーっとしていたら三連休が終わってしまいました...、悲しい気持ちの網干です。Chromeのデベロッパーツールを使って、JavaScriptのデバッグを行う方法を記載します。おおまかな内容としては...1ブレークポイントを張る2プログラムの途中で変数の値を変更する上記に関して記載します。最後にデバッグとは“デバッグ”とはプログラムのバグを取り除く作業のことです。デバッグを行うには、プログラムがどのように動いているのか確認をしなければなりません。プログラムの動作を確認するには、下記のような方法があります。1コンソール画面にログを出力する2ログファイルを出力するですが、上記の方法はプログラムを動かして動作が完了するまで待機しなければなりません。そのため、プログラムが複雑であったり、長い時間動かすことを想定したプログラムの場合は、デバッグ作業に大幅な時間を使うことになります。非常に特殊な条件でしか発生しない分岐がある場合は、動作確認が不可能になってしまう場合もあります。上記のようなデバッグで発生する問題を解決してしまう機能がデベロッパーツールには備わっています!無料のツールなのに、どこまで素晴らしい機能を備えているのか...。Chromeさんは非常に恐ろしいです。Chromeを起動してデバッグを行うページを開いてください。ページ内にカーソルを合わせて”F12′′キーを押すと、横(または下)にデベロッパーツールのウインドウが表示されます。今回は吉見さんの時とは違って「Elements」タブではなく「Sources」タブを表示します。「Sources」の画面でスクリプトを記載したファイルを選択してソースコードを表示させます。file...」を選択してください。ファイルやらなにやらの一覧が表示されるので、その中からスクリプトを記載したファイルを選択してください。これで準備は完了しました。次に、デバッグで重要なブレークポイントを張っていきましょう。デベロッパーツールでブレークポイントを張るブレークポイントとは、実行中のプログラムを停止させるポイントになります。...たった1行でブレークポイントの説明をしたので、湧き上がる感動が一切ありませんでしたが...。実行中のプログラムを停止させるポイントが設定できるのです!そう!これがデベロッパーツールの凄いところなんです!基本的に、デバッグはプログラムが動いた結果を見て動作を確認しなければならないのですが、プログラムが動いている最中に確認ができてしまうのです!さて、ではどうやってブレークポイントを張るのかというと...。ソースコードが表示されている画面で、プログラムを止めたい行にマウスカーソルを合わせて左クリックします。クリックした行数が青色になって、右のウインドウの「Breakpoints」に行の内容が表示されます。はい、ブレークポイントの設置は以上で完了です。本当に使いやすいUIですね。ブレークポイントを張った状態でプログラムを動作させてみましょう。今回はストップウォッチのようなプログラムを組んで動作させました。以下、ソースコードになります。タイマーを止めるclearInterval(timer1);}}ストップウォッチの設置が完了したのでスタートボタンを押してみましょう。debugger」と書かれたメニューが表示されたり、ブレークポイントを張った行が青色で囲われたりしています。これは、プログラムがブレークポイントの位置に達したため、停止している状態になります。今回ブレークポイントを張った位置は「sec変数が60になったら処理を行う」という条件で入ってくる部分になります。※sec変数は秒数を格納しています。本当にsec変数は60になっているのか、確認してみましょう。デベロッパーツールの「Watch」タブの「+」を押します。sec変数がどうなっているか確認したいので、「sec」を入力してEnterキーを押します。すると...sec変数の現在の値が表示されました!期待通り、sec変数が60になってから条件の中に入っていますね!ちなみに、変数の確認方法はもう一つあります。プログラムの停止中に、変数にマウスカーソルを当てると変数の値が表示されます。1つ1つ確認するのは面倒なので、確認したい変数を全てWatchに登録しましょう!登録した変数の内容が全て表示されましたね!※ブレークポイントの位置でプログラムが停止しているため、min++が実行されていないことにも注目してください。これで知りたい情報を全て知ることが可能になりました。デバッグ作業を行うブレークポイントを張ることで、プログラムを停止させて変数の値を確認することができるようになりました。ブレークポイントを張って変数の値を確認するだけでは、デバッグの方法としてはコンソールの表示やログの出力と大差ありません。60)となっているため、60分間待ってから確認をしなければなりません。この無駄な時間を解消してくれる凄い機能が、デベロッパーツールに備わっています!では、何をするのかというと...。ブレークポイントでプログラムが止まっている状態で、変数の値を変更しちゃいます。今回の例では、minの値を60にして条件に入ることを確認しちゃいます。実際にやってみましょう。Window」をクリックします。リストに項目が大量に並んでいますが、下の方へスクロールしてmin変数を探します。min変数の値をダブルクリックします。min変数に59を入力します。※min++の実行がまだなので、min変数に59を入力すると次の行で60になります。右上の矢印ボタンを押して再度プログラムを動かします。==60)の条件式の中に入るはず...。右上の湾曲した矢印のアイコンをクリックして、プログラムを1行だけ実行させます。条件式の中に入りましたね!無事にmin変数を60に変更することができました。無駄な時間を省いてデバッグができるようになります!最後にいかがでしたか?今回はブレークポイントと変数の代入に関して記事を書かせていただきました。最低限のデバッグは今回の記事で可能ですが、デベロッパーツールにはもっと便利な機能があります。今回は「ステップオーバー」「ステップイン」「ステップアウト」等のデバッグに欠かせない機能の説明を省いているので、どこかのタイミングでブログに書こうと思います。!この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。裕介Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URLお祭りやイベントにぴったり!お祭り用象の耳のチラシ&WEBサイトを制作しました!助成金の申請書を自社で作成。Animateを利用したアニメーションを作ってみる。超初心者なのでプログラミング学習のProgeteをやってみました。株式会社imacocoe様のWEBサイトを作成させていただきました。ホームページ制作、WEBマーケティングページ上部へ戻る。