コンソールを使ってJavaScriptのデバッグ効率を上げよう！

2016年11月17日

JavaScriptを使ったWebプログラミングを行う時に、覚えておきたいのがデバッグ（プログラミングの誤りを修正すること）のやり方です。
デバッグすることで、コードを正しく修正するだけでなく、開発スピードをアップさせることができます。Webブラウザのコンソールを用いて、デバッグを行う際のコツをご紹介しましょう。

変数やオブジェクトの値のチェック方法

JavaScriptのデバッグ作業で、変数の中身やオブジェクトの値をチェックしたい場合、alertメソッドを使うのが一般的です。

alert("出力したい変数名");

しかし、いくらチェックしたいからと言って、コード内に大量にalertを書くと、alertダイアログが沢山出てきます。開発を先に進めるためにはいちいち閉じなければならず、効率的とは言えません。

そこで、Webブラウザのコンソール機能を利用しましょう。
コンソールはブラウザの開発ツールで、元々はFirefoxのアドオンであるFirebugに実装されていた機能でした。これを利用する開発者が多かったため、chromeやSafari、IE(8以上)などの各種ブラウザにも標準搭載されるようになりました。

コンソールに文字列を入力することで、動作確認やデバッグを行うことができます。いちいちダイアログを閉じなくてもいいので、alertよりも使いやすく、またalertよりも詳細な情報を表示できるという利点もあります。

コンソールの基本的な使い方

Google Chromeの場合

ChromeにデバッグしたいWebページを表示させた状態でF12キーを押します。出てきたウインドウの上部のメニューから「Console」を選択します。コンソールに各種ログを出力するためには、consoleオブジェクトのconsole.logメソッドを使用します。

console.log(/*出力したい変数やメッセージ*/);

基本的には、このconsole.logを使うことができれば、デバッグは可能です。

Firefoxの場合

Firefoxのブラウザでは、「ブラウザーコンソール」を開く必要があります。「ウェブコンソール」とUIも名称も似ていますが、別のものです。開き方は、下記の2通りです。

Firefox メニューのウェブ開発サブメニューで "ブラウザーコンソール" を選択
キーボードショートカット Ctrl+Shift+J (OS X では Command+Shift+J) を押す

ただし注意したいのが、ブラウザーコンソールの JavaScript の式を実行するためのコマンドラインは、デフォルトで無効になっているということです。設定を変更したい場合や、console.logの使い方などはMozilla Developer Network内の「ブラウザーコンソール」のページをご覧ください。

関数を使い分けよう

console.log()のように、consoleオブジェクトの持つメソッドでもっとも頻繁に使用される機能は、テキストなどのデータをログ出力することです。
これだけでもデバッグは可能ですが、その他の関数を使い分けることで、エラーや警告の色やアイコン表示がされるという独自のスタイルが適用されます。こうすることで、複数のconsoleメソッドを設置した場合に、どれが何の情報なのかが分かりやすくなり、デバッグの効率を上げることができます。

以下に、よく使う関数を紹介します。このほかにも有用な関数が数多くありますので、慣れてきたら調べてみて、色々と試してみてください。

console.error()

エラーとして変数やメッセージをコンソール出力します。Chromeの場合、赤い×印のアイコンが表示されます。

console.info()

変数などのデータを情報として出力します。Chromeの場合、青いiマークのアイコンが表示されます。

console.warn()

警告として情報を出力します。Chromeの場合、黄色い!マークのアイコンが表示されます。

console.table

配列の中身を出力する際、テーブルにして見やすく表示します。

consoleオブジェクトのその他の関数が気になる方は、Mozilla Developer Network内の「console」のページをご覧ください。

デバッグに困ったら

使用しているAPIが意図する動作をしてくれないとき、一見面倒なようですが、自分の目でライブラリのコードを読んでみるという手があります。コードを見直すことによって、トライ＆エラーを繰り返すよりも、なぜ動作しないのか、原因がより早くわかることがあります。

まとめ

今や、Webサイト制作やシステム開発などでも欠かせなくなってきたJavaScript。最新技術であるHTML5と連携してWebアプリケーションを動かすために必須の技術でもあり、今、Web業界では、JavaScriptを使いこなせる技術者が求められています。

インターネット・アカデミーでは、「JavaScript講座」を開講しています。もともと知識がある方も、そうではない方も、JavaScriptは制作の幅を広げるスキルアップに役立つ知識です。興味のある方は、ぜひ一度お問い合わせください！