如何在Google Chrome瀏覽器JavaScript控制台中打印調試消息?


Answers

改進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控制台中運行。

Question

如何在Google Chrome瀏覽器JavaScript控制台中打印調試消息?

請注意,JavaScript控制台與JavaScript Debugger不同, 他們有不同的語法AFAIK,所以JavaScript Debugger中的打印命令在這裡不起作用。 在JavaScript控制台中, print()會將參數發送到打印機。




進一步改進德蘭和安德魯的想法(這就是為什麼這個答案是一個編輯版本); 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控制台中運行。




如果您在編程軟件編輯器中有調試代碼,則可以使用console.log() ,並且您將看到輸出最可能是我最好的編輯器(Google Chrome)。 只需按下F12並按下控制台標籤。 你會看到結果。 快樂的編碼。 :)




簡單的Internet Explorer 7和更低版本的shim保留了其他瀏覽器的行號:

/* Console shim */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());



這是我的控制台包裝類。 它給我的範圍輸出,讓生活更輕鬆。 請注意使用localConsole.debug.call()以便localConsole.debug在調用類的範圍內運行,從而提供對toString方法的訪問。

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...}

或Chrome:

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



只是一個快速警告 - 如果你想在不刪除所有console.log()的情況下在Internet Explorer中測試,你需要使用Firebug Lite,否則你會得到一些不是特別友好的錯誤。

(或者創建你自己的console.log(),它只返回false。)




除了Delan Azabani的回答 ,我喜歡分享我的console.js ,並且我用於相同的目的。 我使用一組函數名創建一個noop控制台,在我看來,這是一種非常方便的方法,我負責管理具有console.log功能但沒有console.debug的Internet Explorer:

// 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() {};
  }
}