ここは僕の冷蔵庫。後はあれして食べるだけ。

I love the frozen FOOD.

開発する際、動作の現状把握というのが一番大事かと。
実行環境にログを出力できない場合、もしくは、javascriptの実行ログを観たい場合、どうしたらいいでしょか。

デバッグ

作っているWeb系のシステムなんかが、動作が思わしくないなーと思った場合、頼るべきはデバッグ情報ですよね。
ブラウザの動作状態を確認したいならばF12を迷わず押します。

  • 遅延の原因
  • スクリプトの動作状態
  • :

色んな内容がみてとれますよね。

ロギングする

開発途中では、色んな状況を確認しながらシステムを作るわけですが、上記F12の画面や、htmlソースをその情報源に使うことが多々あります。

htmlソース上にログを残す

例えば、サーバーサイドでの動作状態を確認したいとき、実行環境にログを出してもいいですが、こんなこともできますよね。
たとえば、「htmlのコメントで残す」という手。
phpでいえば、

echo ‘<!– test()関数開始 argv:[‘.$a.’],[‘.$b.’]—>’;

などとして、HTMLにはくようにしとくわけですね($aや$bが、デバッグとして確認したい変数です)。

F12

違う方法もあります。
choromeなどではデベロッパーツールというのが、F12を押すと立ち上がります。
HTMLソースや、javascriptのエラーなど、色々把握できますよね。
で、この機能で、Consoleというのがあり、ここをデバッグコンソールとして利用ができます。
javascript中に、consoleというクラスを使ってあげます。

console.log( object )

とすると、objectの内容をデバッグコンソールにロギングしてくれます。
上記console.logを呼んだあと、デバッグツールのConsoleタブを選択してみてください。
細かく内容がでてきますね。

参考 : PHPやJavascriptでオブジェクトのデバッグ情報を出力する際に便利な関数

参考

参考記事