TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Android StudioでAndroidアプリのデバッグをする方法【初心者向け】
Androidアプリ開発

Android StudioでAndroidアプリのデバッグをする方法【初心者向け】

Android StudioでAndroidアプリの【デバッグ】をする方法を初心者向けに解説した記事です。開発したアプリは、Android Studioのデバッガを利用して、アプリが正常に動いているか事前に確認しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Androidアプリをリリースする前に、実際にアプリを実行してバグがないかを確認する必要があります。これがデバッグの作業です。

Android Studioのデバッガを利用すると、アプリの実行を途中で停止しながら、アプリが正常に動いているか確認することができます。

今回は、初心者向けにデバッグの方法を紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター！！簡単なAndroidアプリを開発してみたんですけど、デバッグってどうやるんですか〜？

田島悠介

デバッグはAndroid Studioでできるよ。教えてあげるね。

大石ゆかり

はい、お願いします♪

 

Android Studioでデバッグをする流れ

Androidアプリのデバッグは、以下のような手順で進めていきます。

それでは手順をおって説明していきます。

 

 

ブレイクポイントを設定する

デバッグ時にアプリの動作を一時的に停止し、変数の状態などを確認することができます。まずは、一時的に停止するポイント（ブレイクポイント）を設定しましょう。

 

対象のコードをコードエディターで開き、ブレイクポイントを設定したい行の左端をクリックします。

すると、ブレイクポイントが設定されると赤丸が表示されます。

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

アプリをデバッグで実行する

ブレイクポイントが設定できたら、アプリをデバッグで実行します。

 

ツールバーから、「Debug」をクリックします。

これでアプリがデバッグモードで起動します。

 

アプリを操作し、ブレイクポイントを設定した箇所を通ると、現在止まっている行が青矢印で示されています。また、下部のデバッグビューで現在の変数の状態などを確認することができます。

 

ステップ実行をする

キーボードの「F8」ボタンをクリックすると、1行ずつコードが実行されます。変数に変化があった場合は、変数ビューで確認をすることができます。

 

デバッグを終了する

左下の「Resume Program 」をクリックすると、ステップ実行を終了できます。

ツールバーまたは左下の「Stop ‘app’」をクリックすると、デバッグを終了できます。

 

 

Android StudioでAndroidアプリのデバッグをする方法は以上です。

デバッグが完了したら、Androidアプリを実機でテストしてみてください。

 

大石ゆかり

こうやってデバッグするんですね！

田島悠介

うん。デバッグは大事だから、Android Studioで手軽にできるのはいいね。でも実際の機種で試すことももちろん大事だよ！

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

記事を検索

関連するキーワード

関連する記事

Androidアプリ開発でProgressBarを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はそのなかの1つである、Progress...
Androidアプリ開発

Androidアプリ開発でAnalogClockを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はそのうちの1つである、AnalogCl...
Androidアプリ開発

Kotlinのenum class（列挙型クラス）の使い方【初心者向け】

Kotlinのenum class（列挙型クラス）の使い方について解説します。   本記事はTechAcademyのAndroidアプリ開...
Androidアプリ開発

【今すぐ使える！】Android開発で役立つ25のライブラリ

本稿は、freeCodeCampのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Android開発者のMichal Bialas氏...
Androidアプリ開発

覚えておくと便利！Androidアプリ開発のLayoutの使い方【初心者向け】

Androidアプリ開発において、GUI（ボタンやラベルといったパーツ）をどのように配置するかによって、いくつかのレイアウトが用意されています。 そこで今...
Androidアプリ開発

Kotlinのforループの使い方を現役エンジニアが解説【初心者向け】

Kotlinのforループの使い方について解説します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャン...
Androidアプリ開発

あわせてよく読まれている記事

デバッグを行う！Node.jsでdebugの使い方【初心者向け】

Node.jsでdebugする方法を解説します。 デバッグの作業はプログラムを書く上で必要不可欠なので、どういう書き方をするのかしっかりと覚えておきましょう。   なお本記事は、TechAcademyのNode.jsオンライン講座の内容をもとに作成しています。   田島悠介 今回はdebugコマンドを使ってみよう。 大石ゆかり 田島メンター！debugはどういったコマンドなんですか〜？ 田島悠介 指定したプログラムに間違いがないかどうか確認する際に使用するんだ。さっそくやってみよう。 大石ゆかり 了解です！   Node.jsのdebug（デバッグ）とは デバッグとは、プログラミングを行う上でエラー箇所がないか探す作業です。 Node.jsには標準でデバッグ作業ができるdebugというコマンドが用意されています。   Node.jsでdebugする方法 debugを使う方法 コマンド node debug 対象ファイル debug> c 解説 実行後1行目までデバッグされます。 その後、debug>　という表示が現れてデバッグコマンドを入力できる状態になります。 デバッグモードでcを入力するとブレークポイントまでデバッグされます。 ブレークポイントとは、デバッグを行う上でこのポイントまでデバッグをするという印です。 ブレークポイントをいくつも設置することで、どの部分に不具合が存在するか確かめながら実装することが可能です。ブレークポイントを設置するためには、ソースコードの中に「debugger」と記載することで実装できます。   田島悠介 debugの基本の書き方だよ。 大石ゆかり ソースコードの方でブレークポイントを設定することで、チェックする際の区切りをつけることができるんですね。 田島悠介 そうだね。debugを停止する方法も併せて覚えておこう。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中Node.jsのdebugを停止する方法 .exitで停止 コマンド debug>  .exit 解説 debug>の画面で.exitを実行する事でデバッグすることが出来ます。   Ctrl+Cで停止 コマンド debug> (To exit, press ^C again or type .exit) debug> 解説 debug>の画面でCtrl+Cを2度実行する事でデバッグすることが出来ます。 コマンド上ではCtrl+Cを実行したように表示されていませんが、Ctrl+Cは入力しても、入力自体に表示されません。   実際にnode debugを使ってみよう 実際にデバッグを行うプログラムを書いてみましょう。 ソースコード let num = 1 debugger console.log('30歳から未経験プログラマー転職', num) debugger num = 2 debugger console.log('現役エンジニアが効率的にサポート', num)   コマンドプロンプト実行結果 デバッグコマンド表示結果解説 debug.js（ソースコード）の2行目4行目6行目にブレークポイントであるdebuggerを設置しています。 コマンドプロンプトの最初にnode debug debug.jsでデバッグを開始しています。 その後、コマンドプロンプトのdebug>の部分でcを入力するとdebug.jsの最初のdebuggerがあるブレークポイントまで処理が実行されます。 つまり、debug.jsのlet num = 1の部分で変数numに1を代入する処理が実行されることになります。 その後、コマンドプロンプトのdebug> に再度cと入力することでと次のブレークポイントまで処理を続けます。 debug.jsの3行目のconsole.log(’30歳から未経験プログラマー転職’, num)が実行されて、1行目で代入された1を含む、30歳から未経験プログラマー転職 1と表示されています。   その後、コマンドプロンプトのdebug> に3回目のcと入力することでと次のブレークポイントまで処理を続けます。 つまり、debug.jsのnum = 2の部分で変数numに2を代入する処理が実行されます。 そして、コマンドプロンプトのdebug> に4回目のcと入力することでと次のブレークポイントまで処理を続けます。 debug.jsの最終行のconsole.log(‘現役エンジニアが効率的にサポート’, num)が実行されて、先程代入された2を含む、現役エンジニアが効率的にサポートが表示されます。   Node.jsでdebugする方法を解説しました。 デバッグは、プログラムを書く上で必ず使うので書き方も含めしっかり理解しておきましょう。 Node.jsの学習サイトもまとめているので、合わせて参考にしてみてください。   田島悠介 実際にブレークポイントを指定した場合の実行結果の例を見てみたよ。 大石ゆかり ブレークポイントから続行するときは、その都度cを入力し直せばいいんですね。 田島悠介 debugと同じ処理をinspectというコマンドで行うこともできるよ。最近ではこちらが推奨されることもあるので覚えておこう。 大石ゆかり 分かりました。ありがとうございます！   また、オンラインのプログラミングスクールTechAcademyでは、Node.jsオンライン講座を開催しています。 Node.jsを使ってWebアプリケーションを開発することができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。
Node.js

Android Studioで開発したアプリを実機でテストする方法【初心者向け】

Androidアプリを開発したら、エミュレータでテストをすることもできますが、加速度センサーなど各種センサーを使ったりバイブレーション動作を入れた場合はどうしても実機でテストをする必要があります。 今回は、Android Studioで開発したAndroidアプリを実機でテストをする方法をご紹介します。WindowsのPCを使って解説します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！作ったアプリをAndroidの実機で試したいんですけど、どうしたらいいんですか〜？ 田島悠介 それなら、Android側の設定とパソコン側の設定が必要だから、順番に教えるね。 大石ゆかり はい、お願いします♪   実機でテストする手順 Android Studioで開発したAndroidアプリを実機でテストするには以下の手順が必要になります。 実機側の設定を行う 実機とPCをUSBで接続する アプリを実行する 1つずつ見て行きましょう。   実機側の設定を行う Android Studioの設定の前に実機の設定を行います。 初めて実機でテストをする場合、[設定]に[開発者向けオプション]を表示させる必要があります。[設定]-[端末情報]を開き「ビルド番号」を7回タップするします。 [設定]を開き、[開発者向けオプション]を開きます。 [開発者向けオプション]で、開発者オプションをONにし、「USBデバッグ」のチェックボックスにチェックをします。 [開発者向けオプション]を下にスクロールしていくと、タップした場所を表示したり、レイアウト境界を表示できたりと、デバック時に便利な機能があります。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中実機とPCをUSBで接続する 実機とPCをUSBケーブルで接続します。 接続するかされると、実機に「USBデバックを許可しますか？」というダイアログボックスが表示されるので、[OK]をタップします。 これで実機とPCをUSBで接続が完了できました。   アプリを実行する 最後に開発したアプリを実機で起動してみましょう。 Android Studioのメニューバーの[実行]を選択します。実行ボタンは、三角の形をしています。 しばらくするとアプリが実機にインストールされ、アプリが実行されます。   これで完了です。 一度設定をしてしまえば、今後は実機とPCをUSBで接続すれば簡単にテストが行えるようになります。ぜひ試してみてください。 テストが完了したらAndroidアプリをGooglePlayでリリースしてみましょう。   大石ゆかり あ、実機でアプリが起動しました♪なんか作った感が出ますね♪ 田島悠介 そうだね。Androidは実機の種類が多いから、良く使うことになると思うよ。 大石ゆかり はい、わかりました♪   [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

PHPでデバッグを行う方法を現役エンジニアが解説【初心者向け】

今回は、PHPでデバッグを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPでデバッグを行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   debugとは debug（デバッグ）とは、バグと呼ばれるプログラムの誤りを発見するために行う作業のことをいいます。 IDE（統合開発環境）を使用していれば、IDEに備わっているデバッグ機能を使用して、デバッグを行えます。 また言語によってはデバッグ用の関数が用意されています。   デバッグを行う方法 PHPでデバッグを行うには、デバッグ用の関数である「var_dump()」を使用します。「ダンプ」とは、デバッグのために変数の中身を確認する作業です。 このvar_dump()関数を使用してデバッグを行うことで、変数の中身が意図した値か確認できます。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中実際に書いてみよう それでは、実際にvar_dump()関数を使用して、デバッグを行う例を見ていきましょう。 <?php $var = 'test'; var_dump($var); var_dump('debug'); // 文字列 var_dump(1); // 整数値 var_dump(1.0); // 浮動小数点数 var_dump(true); // 論理値 var_dump(null); // NULL値 var_dump(array()); // 配列 var_dump(new stdClass); // オブジェクト ?>   実行結果 string(4) "test" string(5) "debug" int(1) float(1) bool(true) NULL array(0) { } object(stdClass)#1 (0) { } 上記で確認できる通り、変数$varをvar_dump()関数に引数として渡した場合、変数の中身をダンプできることがわかると思います。 また、中身だけでなく、データ型まで詳細にvar_dump()関数はダンプしてくれます。   筆者プロフィール 平野大輝（ひらのだいき） スキル：PHP・Java・JavaScriptを用いて様々なアプリを開発するWebエンジニア。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも最短4週間で、PHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
PHP

Androidアプリ開発でログ(Log)を出力する方法【初心者向け】

Androidアプリを開発するときに便利な、[LogCat]ビューにログを出力（取得）する方法をご紹介します。 本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Androidアプリを作っている途中でなんかうまく動作していないようなんですけど、ログって残ってないんですか？ 田島悠介 ログは別途出力するように設定する必要があるんだ。 大石ゆかり どうやるんですか〜？   Logクラス Log出力は、ログレベルに応じて、以下のメゾットが用意されています。 Log.v：VERVOSE（すべてのログ情報） Log.d：DEBUG(デバッグ情報） Log.i：INFO(情報） Log.w：WARN(警告） Log.e：ERROR（致命的な問題） すべてのメゾットで、構文は共通 です。 Lod.d(String tag, String msg); “tag” はあとからログを識別するためのキーを代入し、“msg” にログメッセージを代入します。 例えば、変数int iの値を確認したい場合、次のように使用します。 Log.d(“onClick”,”変数 i は「” + i + “」”); また、Lod.d(String tag, String msg, Throwable tr);のように上の構文に3つ目の引数を加えると、エラー時の例外情報をログに出力することができます。   LogCatビューでログを確認する 出力されたログは、Android Studio上のlogcatビューで確認することができます。LogCatビューは画面の下方に設置されています。 もしも表示されていない場合は、Android Studioメニュー- [View] – [Tool Buttons]　にチェックが入っていることを確認してください。 画面下側の[6:Android Moniter]をクリックしてください。Android Moniterが表示されるので、[logcat]タグを選択します。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中出力ログを絞り込む LogCatビューには、Androidのシステムが出力するものも表示されています。そこで、必要なログを絞り込むことで、より見やすくなります。 画面に表示されたボタンを押すと、変数iをカウントアップするアプリの出力ログです。 表示させるログレベルを変更したい場合は、右上のプルダウンで変更することができます。例えば、[debug]に変更した場合、debug以上のログのみが表示されます。また、キーワード検索で絞り込むこともできます。   ログの出力については以上です。 アプリが開発できたらAndroidアプリのデバッグ方法もあわせてご覧ください。   大石ゆかり あ、変数に正常に代入されてませんでした。こうやってログを残すんですね！ 田島悠介 うん。デバッグ以外にもログで自分で確認することも大事だから、覚えておくと良いね♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？ 田島悠介 それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。 大石ゆかり あ、どうやって使うんですか〜？   GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。     GridLayoutを配置する 今回は、GridLayoutを使用してこの画像のような画面を作成してみます。   GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。   次に、GridLayoutの列数を指定します。 列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中GridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。   セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。 上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。   また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。 「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。   同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。 すべてのボタンが配置できたら実行して、画面を確認してください。     GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介 そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

JavaScriptでconsole.logを使用したデバッグのやり方【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでconsole.logを使用したデバッグを使う方法について解説します。 プログラミングを習得する上でも開発業務の中でもよく使うので、自分でも書きながら覚えていきましょう。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   デバッグとは デバッグとは、JavaScriptを使用したプログラミングを行う中で、プログラムのエラーを発見するために必要な作業です。 デバッグを行わずにプログラミングを進めていくと、実際動かそうという時点になってエラーがたくさん出てきてしまいます。 実際動かすときに修正するのではなく、プログラミングを行って行く中で、頻繁にデバッグを行うことで、エラーの早期発見・早期修正を行うことが可能になります。 最初は、デバッグを行う事自体を手間に感じるかもしれませんが、エラーの早期発見・早期修正が可能となり、結果的にはプログラム完成が早くなります。   console.logを使用したデバッグの例 今回は、Googleが提供しているChromeというブラウザのChrome Developer Toolsを利用してデバッグを行っていきます。   Windowsの場合は「F12」を押してください。Macの場合は、「Opt + Cmd + I」を押してください。 すると次のようなChrome Developer Tools画面が表示されます。 設定によっては次のように、下側に表示されることがありますが同じ機能です。 次に、赤枠のconsoleタブ部分をクリックしてconsole機能画面を表示させます。 そして、赤枠のようにconsole.log(“テスト”)と入力します。 最後にEnterキーを押すと赤枠のように「テスト」と表示されます。これがconsole.logデバッグの一例です。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中デバッグするプログラムを用意する 先程はGoogleのページをChrome Developer Toolで開き、console.log上で入力したテストという文字をconsole.log上で表示しました。 ここからは、実際に作成したJavaScriptの変数を表示します。 今回は現在日時を表示させるJavaScriptプログラムを使用したデバッグを行います。 ソースコードは次のとおりです。 html <!DOCTYPE html> <html> <body> <div id="box"></div> <script src="main.js"></script> </body> </html>   JavaScript var day = new Date().toLocaleString(); document.getElementById("box").innerHTML = day; このプログラムを実行すると現在日時がChrome上に表示されます。   実際にデバッグしてみる 先程の日時表示プログラムをChrome Developer Toolで開いてデバッグします。 日時表示された画面をChrome Developer Toolで開きconsoleにconsole.log(day)と入力します。 このページの最初では、console.log(“テスト”)のように””で囲んで入力しました。 これは、””で囲った文字をそのまま出力させる処理でした。 今回は、””で囲まず、JavaScriptのプログラム内で使用している「day」という変数を表示させます。 入力後Enterで実行すると次のように現在日時が表示されます。 つまり、プログラムとしては問題なく現在日時を取得できていることがわかります。 ここで、今回使用している変数dayではなく、使用していない変数daysを入力してデバッグしてみます。 赤い枠で囲まれた部分でconsole.log(days)と入力しています。 すると、赤文字でdaysという変数が定義されていないというエラーが表示されます。 このように、すべてのプログラムが完成する前にデバッグすることで、少しづつエラーを発見し修正することが可能です。   以上、JavaScriptでデバッグを行う方法について解説しました。 エラーが出てもすぐ解決できるようにconsole.logの使い方を理解しておきましょう。 また、TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。 現役エンジニアのメンターに毎日質問することができます。
JavaScript

WEEKLY RANKING

【今さら聞けない！】異動挨拶メールの正しい書き方とサンプル

【超便利！】Excel(エクセル)でカレンダーを作成する方法

社会人として恥ずかしくない！「当社・弊社・貴社・御社」の使い方

今さら聞けない！GitHubの使い方【超初心者向け】

言葉の意味をおさらいしてみよう！「各位」の正しい使い方と用例

【完全初心者向け！】コミュニケーションツールSlack（スラック）の使い方

今さら聞けない！コマンドプロンプトの使い方【初心者向け】

意外と簡単？Photoshopで画像を切り抜く方法

文書・メールで頻出の「様」と「殿」それぞれの意味と使い分け方を知ろう

新規の取引や引き継ぎで役立つ！初めての相手に送る挨拶メールの書き方

TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Android StudioでAndroidアプリのデバッグをする方法【初心者向け】