Log

AngularJS で Debug 情報(Log)を収集します。
下記の画面は "ngp_log.html" を Microsoft Edge で実行した時の画面です。

先に window.console.log() のプログラムから紹介します。
次のリンクをクリックすると "console_log.html" が呼び出されます。
Edge のときは起動後に、F12 キーを押してコンソールウインドウを表示してから[最新の情報に更新]アイコンをクリックして下さい。
Console Log

console.log() を使う

  1. JavaScript のサンプルプログラム "console_log.html" です。
    <!doctype html>
    <html>
    <body>
    <h2>Console Log</h2>
    <script type="text/javascript">
    <!--
    console.log("Hello world");
    window.console.log("Window Console Log");
    var str;
    str = "v=" + 123 + "  (123 を確認)";
    console.log(str);
    //-->
    </script>
    
    </body>
    </html>
    
  2. console.log() はデバッグの時に使用する最も手軽な方法です。
    AngularJS に限らず JavaScript でデバッグに必要な情報を印字することが出来ます。
    *.html を起動して、F12 キーを押して Console TAB からコンソールウインドウを表示してから実行して下さい。
    Console 画面に console.log() で書き出した情報が印字されます。
    window.console.log() は、大抵の場合 window. を省略することが出来ます。
  3. console.log() で書き出した情報は、新しいページに変わるとリセットされます。
    例えば location.href でページを呼び出すと、今まで書き出された情報はリセットされます。

次のリンクをクリックすると "ngp_log.html" が呼び出されます。
AngularJS Log

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_log.html" です。
    <!doctype html>
    <html ng-app="myApp">
    <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    </head>
    
    <body ng-controller="MyController">
    <button ng-click="onclick()">クリック</button>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('MyController', ['$scope', '$log',  function($scope, $log)
     {
        // ボタンクリック時にログを出力
        $scope.onclick = function()
        { $log.debug('デバッグ');
          $log.error('エラー');
          $log.info('情報');
          $log.log('一般ログ');
          $log.warn('警告');
        };
      }]);
    </script>
    </body>
    </html>
    
  2. AngularJS で Debug 情報を収集します。
    プログラムを起動して「F12」キーを押すとデバッグウインドウが表示されます。
    コンソールタブをクリックして、[クリック]ボタンをクリックするとデバッグ情報が表示されます。
    ソースプログラムと対比して下さい。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)