ブログ

こんにちは、尾崎です。

Aipoの「タイムライン」機能のデバッグを行った際、JavaScriptのデバッグに便利な方法はないかと探したところ、いくつか方法はあったのですが今回はGoogle ChromeのDevToolsを使ってJavaScriptのデバッグをする方法を紹介したいと思います。

JavaScriptで機能を開発する際や、不具合・エラーが出ていて原因を調べたい時などに非常に役に立つ方法です。

実際に、例としてAipoのタイムラインに投稿する際のJavaScriptの動きを見ながらJavaScriptのデバック方法について説明していきます。

ChromeでDevToolsを開く

まずDevToolsはChromeを開いた状態で、F12を押すか、右クリックから要素の検証を選ぶとウィンドウが出てきます。

今回はJavaScriptのデバックを行いたいので、上のメニューからSourceを選びます。

debug1.png

タイムラインで投稿した際にはaipo.timeline.submitという関数が実行されます。この関数は左側の画面のsourceに表示されている、

aipo >JavaScript>aipo>common.jsに記載されています。

実際にcommon.jsを開いて見ると、JavaScriptがminifyされている状態になっているため、大変見にくくなっています。

debug2.jpg

これを見やすくするには、画面下の「{}」をクリックするだけです。

debug3.jpg

ブレイクポイントを置いてデバッグする

ソースが表示できたので、実際にタイムラインの投稿した際に実行されるJavaScriptを見て行きたいと思います。

まずcommon.jsからaipo.timeline.submitが記載されている場所を探します。

aipo.timeline.submitが見つかりましたら、そこにブレイクポイントを設定します。

ブレイクポイントの設定の仕方は、設定したいところの行番号をクリックするだけです。

もしブレークポイントを解除したいならば、ブレークポイントをクリックすれば、解除出来ます。

ブレイクポイントを設定しましたら、実際にタイムラインに投稿してみましょう。投稿するボタンを押すとブレークポイントを設定した場所でブレークしたと思います。

debug4.jpg

右上に5つボタンがありますが、一番左からボタンを押すことで、

  • 再開
  • 一行実行する
  • その行に関数があればその関数を実行する
  • 現在の関数が終わるまで実行する
  • ブレークポイントを一時的に無効にする

といった動作を行います。これらを使って、JavaScriptがどのように実行されているのかを確認することができます。

またJavaScriptがどのように実行されているかを確認している際に、変数にどのような値が代入されているのかを知りたいことがあります。

そのような場合は、値を見たい変数を選択し、右クリックからEvolute in console を選んでもらう方法と、scop Vairablesから確認する方法の2つがあります。

実際に、上の画像においてaipo.timeline.submitの引数の値がscop Vairablesに表示されていることがわかると思います。

このようにブレークポイントとscop Vairablesなどを使って、DevToolsではJavaScriptのデバックが簡単に行えます。

是非試してみてください。

現在私たちの仲間を募集しています!

2013/09/24 13:30:00
尾崎