Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

ログをコンソールに出力するには?($log)

2015年11月30日

AngularJSで開発者ツールのコンソールにログを出力する方法を説明。また、ログの種類や、デバッグログの表示/非表示の切り替え方法も紹介する。

  • このエントリーをはてなブックマークに追加

 ブラウザー標準の開発者ツール(例えばDevTools)にログを出力するには、$logサービスを利用します。誤解のしようもないサービスなので、さっそく、以下に具体的な例を見てみます。以下は、ボタンクリック時に、決められた文字列をログ出力するサンプルです。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<button ng-click="onclick()">クリック</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
angular.module('myApp', [])
  .controller('MyController', ['$scope', '$log',  function($scope, $log) {
    // ボタンクリック時にログを出力
    $scope.onclick = function() {
      $log.debug('デバッグ');
      $log.error('エラー');
      $log.info('情報');
      $log.log('一般ログ');
      $log.warn('警告');
    };
  }]);
</script>
</body>
</html>
リスト1 $logサービスでログを出力するためのコード(log.html)
ボタンクリック時に各種ログをコンソールに出力
ボタンクリック時に各種ログをコンソールに出力

 $logサービスで利用できるメソッドは、以下の通りです。

メソッド概要
debug デバッグメッセージ
error エラーメッセージ
warn 警告メッセージ
info 一般的な情報
log 一般ログ
$logサービスで利用可能なメソッド

 メソッドに応じて、カラー/アイコンの異なるログが出力されます。ブラウザーに付属の一般的な開発者ツールでは、ログの種類に応じて出力をフィルターできますので、目的や状況によって適切なメソッドを使い分けることで、ログの量が増えた場合にも確認が容易になります。次の画面は、エラーログだけに表示をフィルターしている例です。

[Errors]を選択することで、エラーログだけを表示(Chromeの場合)

デバッグログの表示/非表示を切り替える

 debugメソッドによって出力されるデバッグメッセージは、$logProviderプロバイダーを利用することで表示/非表示を切り替えることもできます。以下は、先ほどのリスト1を修正して、デバッグメッセージを非表示にした例です。

JavaScript
angular.module('myApp', [])
  .config(['$logProvider', function($logProvider) {
    // デバッグメッセージを非表示に
    $logProvider.debugEnabled(false);
  }])
  .controller('MyController', ['$scope', '$log',  function($scope, $log) {
    $scope.onclick = function() {
      $log.debug('デバッグ');
      $log.error('エラー');
      $log.info('情報');
      $log.log('一般ログ');
      $log.warn('警告');
    };
  }]);
リスト2 デバッグメッセージを非表示にするためのコード(debug.htmlより抜粋)
「デバッグ」メッセージだけが表示されなくなった

 デバッグメッセージを非表示にするには、$logProviderプロバイダーのdebugEnabledメソッドにfalseを設定するだけです。果たして、結果を確認すると、debugメソッドによる出力だけがスキップされていることが確認できます。

 $logProviderプロバイダーによる設定は、$logサービスが有効になる前に終えていなければなりませんので、configメソッド配下で呼び出している点にも注目です。configメソッドは、サービスのインスタンス化に先立って実行されるメソッドです。

処理対象:ログ カテゴリ:サービス
API:$log カテゴリ:ng(コアモジュール) > service(サービス)
API:$logProvider カテゴリ:ng(コアモジュール) > provider(プロバイダー)

※以下では、本稿の前後を合わせて5回分(第32回~第36回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
32. 配列の内容を順に出力するには?(ng-repeat)

配列の内容を順に処理して出力できるng-repeatディレクティブの基本的な使い方を説明する。

AngularJS TIPS
33. ng-repeat要素でさまざまな繰り返しを表現するには?(ng-repeat)

ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ(連想配列)」「複数の要素セット」の内容を順に処理して出力する方法を説明。

AngularJS TIPS
34. 【現在、表示中】≫ ログをコンソールに出力するには?($log)

AngularJSで開発者ツールのコンソールにログを出力する方法を説明。また、ログの種類や、デバッグログの表示/非表示の切り替え方法も紹介する。

AngularJS TIPS
35. サーバーサイドと非同期通信するには?($http)

AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明。また、ログの種類や、ショートカットメソッドについても紹介する。

AngularJS TIPS
36. サーバーサイドとHTTP POSTで非同期通信するには?($http)

AngularJSでHTTP POSTで非同期通信する方法を説明。また、送信データをJSONではなくjQuery形式にする方法や、PHPでJSONデータをデコードする方法も紹介する。

サイトからのお知らせ

Twitterでつぶやこう!