コンソールをもう少し便利にする

ほとんどすべてのJavascriptプログラマーはブラウザーでコンソールを使用します。 コンソールはChrome、Opera、IEに組み込まれ、FoxのFirebugとともにインストールされます。

しかし、彼女には非常に簡単に修正できる不便な点がいくつかあります。 これは：

• コンソールが定義されていない場合のエラー
• コンテキスト外で使用できない
• 生産中に無効にできない
• クロスブラウザ非互換性

これらの問題を迅速かつ簡単に修正してください！







まず、コンソールオブジェクトをオブジェクトに置き換える必要があります。 元のコンソールは元の変数に保存されます

 (function () { var global = this; var original = global.console; //   var console = global.console = {}; })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、もしあれば、元のコンソールのすべてのメソッドを実装する必要があります。

 (function () { var global = this; var original = global.console; var console = global.console = {}; //   var methods = ['assert', 'count', 'debug', 'dir', 'dirxml', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'trace', 'warn']; //        for (var i = methods.length; i--;) { //  ,     , //          'assert' (function (methodName) { //    console[methodName] = function () { //         if (original && methodName in original) { //     original[methodName].apply(original, arguments); } }; })(methods[i]); } })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、未定義のコンソールの場合にエラーを取り除くだけでなく、2番目の問題も解決しました。たとえば、コンテキストからコンソールを使用する機能です。

 //    console.log $('#my-element').click(console.log); //   var log = console.log; for (var i = 0; i < 10; i++) log(i);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

再定義なしでは、最初の場合、2番目の場合、「 Illegal invocation



」エラーが発生します。



次に行う必要があるのは、実稼働中にデバッグをオフにする機能を追加することです。 これは2行で行われます。

 (function () { // .. var console = global.console = {}; console.production = false; // ... console[methodName] = function () { //               if (original && methodName in original && !console.production) { //     original[methodName].apply(original, arguments); // .. })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、デバッグ情報をオフにするには、アプリケーションの初期化中にどこかで次のコードを呼び出すだけで十分です。

 console.production = true;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザ機能

たわごと

IE 8とIE 9は常に異なっていました。 次のコードを呼び出す場合：

 alert(typeof console.log);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

通常のブラウザには「機能」とロバ「オブジェクト」が表示されます。 object



はapply



メソッドがないため、このバグを回避する最も簡単な方法は、関数プロトタイプからメソッドを呼び出すことです。 ちょっとした魔法：

 original[methodName].apply(original, arguments); //  : Function.prototype.apply.call(original[methodName], original, arguments);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイアバグ

Firebugでは、標準変数をオーバーライドできません 。 したがって、非常に簡単な修正によって解決されます。 割り当てる前に、プロパティを削除する必要があります。

  var original = global.console; var console = global.console = {}; // => var original = global.console; delete global.console; var console = global.console = {};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいメソッドを追加する

多くの人々は、 最も先進的なブラウザーにはtimeおよびtimeEndメソッドがないことを知っています。 Firebugから移植します。

  // ... var original = global.console; var console = global.console = {}; if (original && !original.time) { original.time = function(name, reset){ if (!name) return; var time = new Date().getTime(); if (!console.timeCounters) console.timeCounters = {}; var key = "KEY" + name.toString(); if(!reset && console.timeCounters[key]) return; console.timeCounters[key] = time; }; original.timeEnd = function(name){ var time = new Date().getTime(); if(!console.timeCounters) return; var key = "KEY" + name.toString(); var timeCounter = console.timeCounters[key]; if (timeCounter) { var diff = time - timeCounter; var label = name + ": " + diff + "ms"; console.info(label); delete console.timeCounters[key]; } return diff; }; } //   var methods = // ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今ではロバも時間を数えることを学びました。



最終的なコードは次のとおりです。

 (function () { var global = this; var original = global.console; if ('console' in global) delete global.console; var console = global.console = {}; console.production = false; if (original && !original.time) { original.time = function(name, reset){ if (!name) return; var time = new Date().getTime(); if (!console.timeCounters) console.timeCounters = {}; var key = "KEY" + name.toString(); if(!reset && console.timeCounters[key]) return; console.timeCounters[key] = time; }; original.timeEnd = function(name){ var time = new Date().getTime(); if(!console.timeCounters) return; var key = "KEY" + name.toString(); var timeCounter = console.timeCounters[key]; if (timeCounter) { var diff = time - timeCounter; var label = name + ": " + diff + "ms"; console.info(label); delete console.timeCounters[key]; } return diff; }; } var methods = ['assert', 'count', 'debug', 'dir', 'dirxml', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'trace', 'warn']; for (var i = methods.length; i--;) { (function (methodName) { console[methodName] = function () { if (original && methodName in original && !console.production) { Function.prototype.apply.call(original[methodName], original, arguments); } }; })(methods[i]); } })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンソールはエラーを引き起こさず、コンテキスト外で使用したり、バトルサーバーで無効にしたり、IEで時間を読み取ったりすることができます）



健康のために使用し、コードのライセンスはLGPL / MIT、テキストのライセンスはCC BY 3.0です



Github： github.com/theshock/console-cap