javascript - Google Chrome JavaScript コンソールでデバッグ メッセージを出力するにはどうすればよいですか?

Question

Google Chrome JavaScript コンソールでデバッグ メッセージを出力するにはどうすればよいですか?

JavaScript コンソールは JavaScript デバッガーと同じではないことに注意してください。私の知る限り、構文が異なるため、JavaScript Debugger のprintコマンドはここでは機能しません。JavaScript コンソールでprint()、パラメーターをプリンターに送信します。

Answer 1

ブラウザーのアドレス バーから次のコードを実行します。

javascript: console.log(2);

Google Chrome の「JavaScript コンソール」にメッセージを正常に出力します。

Answer 2

Andru のアイデアを改良して、コンソール関数が存在しない場合にそれらを作成するスクリプトを作成できます。

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

次に、次のいずれかを使用します。

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

これらの関数は、さまざまな種類の項目 (ログ、情報、エラー、または警告に基づいてフィルター処理できます) をログに記録し、コンソールが使用できない場合でもエラーは発生しません。これらの関数は、Firebug および Chrome コンソールで動作します。

Answer 3

多くの開発者が見逃しているクールな機能を追加するだけです:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

これは、JavaScript オブジェクトの魔法の%oダンプクリック可能でディープ ブラウズ可能なコンテンツです。%s記録のためだけに表示されました。

また、これもクールです：

console.log("%s", new Error().stack);

これにより、Java のようなnew Error()呼び出しポイントまでのスタック トレースが得られます (ファイルへのパスと行番号を含む!)。

%oとの両方new Error().stackが Chrome と Firefox で利用できます。

また、Firefox でのスタック トレースには以下を使用します。

console.trace();

https://developer.mozilla.org/en-US/docs/Web/API/consoleが言うように。

ハッピーハッキング！

UPDATEconsole : 一部のライブラリは、独自の目的のためにオブジェクトを再定義する悪意のある人々によって作成されています。consoleライブラリをロードした後に元のブラウザを復元するには、次を使用します。

delete console.log;
delete console.warn;
....

スタック オーバーフローの質問の復元 console.log() を参照してください。

Answer 4

コンソールが使用可能かどうかを確認する短いスクリプトを次に示します。そうでない場合は、Firebugをロードしようとし、Firebug が利用できない場合は、Firebug Lite をロードします。console.logこれで、どのブラウザでも使用できます。楽しみ！

if (!window['console']) {

    // Enable console
    if (window['loadFirebugConsole']) {
        window.loadFirebugConsole();
    }
    else {
        // No console, use Firebug Lite
        var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
            if (F.getElementById(b))
                return;
            E = F[i+'NS']&&F.documentElement.namespaceURI;
            E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
            E[r]('id', b);
            E[r]('src', I + g + T);
            E[r](b, u);
            (F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
            E = new Image;
            E[r]('src', I + L);
        };
        firebugLite(
            document, 'createElement', 'setAttribute', 'getElementsByTagName',
            'FirebugLite', '4', 'firebug-lite.js',
            'releases/lite/latest/skin/xp/sprite.png',
            'https://getfirebug.com/', '#startOpened');
    }
}
else {
    // Console is already available, no action needed.
}

Answer 5

簡単な警告 - すべての console.log() を削除せずに Internet Explorer でテストする場合は、Firebug Liteを使用する必要があります。そうしないと、特に分かりにくいエラーが発生します。

(または、false を返すだけの独自の console.log() を作成します。)

Answer 6

Delan Azabani の answerに加えて、私は自分の を共有するのが好きconsole.jsで、同じ目的で使用しています。関数名の配列を使用して noop コンソールを作成します。これは、これを行うのに非常に便利な方法だと思います。また、console.log関数を持っている Internet Explorer の世話をしましたが、次のようなものはありませんconsole.debug。

// Create a noop console object if the browser doesn't provide one...
if (!window.console){
  window.console = {};
}

// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
  if (!window.console.debug && typeof window.console.log !== 'undefined') {
    window.console.debug = window.console.log;
  }
}

// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

for (var i = 0; i < names.length; ++i){
  if(!window.console[names[i]]){
    window.console[names[i]] = function() {};
  }
}

Answer 7

または、次の関数を使用します。

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}

Answer 8

これが私のコンソールラッパークラスです。スコープ出力も得られるので、生活が楽になります。メソッドへのアクセスを提供して、呼び出し元クラスのスコープ内で実行されるlocalConsole.debug.call()soの使用に注意してください。localConsole.debugtoString

localConsole = {

    info: function(caller, msg, args) {
        if ( window.console && window.console.info ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.info.apply(console, params);
        }
    },

    debug: function(caller, msg, args) {
        if ( window.console && window.console.debug ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.debug.apply(console, params);
        }
    }
};

someClass = {

    toString: function(){
        return 'In scope of someClass';
    },

    someFunc: function() {

        myObj = {
            dr: 'zeus',
            cat: 'hat'
        };

        localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
    }
};

someClass.someFunc();

これにより、 Firebugで次のような出力が得られます。

In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}

またはクロム：

In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object

Answer 9

個人的には、tarek11011 のものに似たこれを使用します。

// Use a less-common namespace than just 'log'
function myLog(msg)
{
    // Attempt to send a message to the console
    try
    {
        console.log(msg);
    }
    // Fail gracefully if it does not exist
    catch(e){}
}

重要な点は、JavaScript コードに固執する以外に、少なくともログ記録の練習をすることconsole.log()をお勧めします。これを忘れると、本番サイトにあると、すべての JavaScript コードが壊れる可能性があるためです。そのページのために。

Answer 10

使用しているプログラミングソフトウェアエディタにデバッグ済みのコードがある場合に使用できますconsole.log()。出力は、おそらく私にとって最高のエディタ（Google Chrome）である可能性があります。F12[コンソール]タブを押して押してください。結果が表示されます。ハッピーコーディング。:)

Answer 11

console.debug("");

このメソッドを使用すると、テキストがコンソールに明るい青色で出力されます。

Answer 12

Delan と Andru のアイデアをさらに改善します (そのため、この回答は編集版です)。console.log は存在する可能性がありますが、他の関数は存在しない可能性があるため、デフォルトで console.log と同じ関数にマップします。

存在しない場合にコンソール関数を作成するスクリプトを作成できます。

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log;  // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log

次に、次のいずれかを使用します。

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

これらの関数は、さまざまな種類の項目 (ログ、情報、エラー、または警告に基づいてフィルター処理できます) をログに記録し、コンソールが使用できない場合でもエラーは発生しません。これらの関数は、Firebug および Chrome コンソールで動作します。