Hata ayıklama mesajlarını Google Chrome JavaScript Konsolunda nasıl yazdırabilirim?

Hata ayıklama mesajlarını Google Chrome JavaScript Konsolunda nasıl yazdırabilirim?

Lütfen JavaScript Konsolunun JavaScript Hata Ayıklayıcı ile aynı olmadığını unutmayın; AFAIK sözdizimleri farklıdır, bu nedenle JavaScript Hata Ayıklayıcı'daki print komutu burada çalışmaz. JavaScript Konsolu'nda, print()parametreyi yazıcıya gönderir.

Tarayıcı adres çubuğundan aşağıdaki kodu yürütme:

javascript: console.log (2);

Google Chrome'daki "JavaScript Konsolu" na başarıyla mesaj yazdırır.

Andru'nun fikrini iyileştirerek, yoksa konsol işlevleri oluşturan bir komut dosyası yazabilirsiniz:

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

Ardından, aşağıdakilerden herhangi birini kullanın:

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

Bu işlevler farklı türde öğeleri günlüğe kaydeder (günlük, bilgi, hata veya uyarıya göre filtrelenebilir) ve konsol mevcut olmadığında hatalara neden olmaz. Bu işlevler Firebug ve Chrome konsollarında çalışır.

Sadece birçok geliştiricinin kaçırdığı harika bir özellik ekleyin:

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

Bu, bir JavaScript nesnesinin sihirli %odöküm tıklanabilir ve derin göz atılabilir içeriğidir. %ssadece kayıt için gösterildi.

Ayrıca bu da harika:

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

Bu, new Error()çağrının bulunduğu noktaya Java benzeri bir yığın izlemesi verir ( dosya yolu ve satır numarası dahil !).

Hem %ove new Error().stackChrome ve Firefox'ta mevcuttur!

Ayrıca Firefox'taki yığın izleri için:

console.trace();

Gibi https://developer.mozilla.org/en-US/docs/Web/API/console söylüyor.

Mutlu hack!

GÜNCELLEME : Bazı kütüphaneler, consolenesneyi kendi amaçları için yeniden tanımlayan kötü insanlar tarafından yazılmıştır . consoleKitaplığı yükledikten sonra orijinal tarayıcıyı geri yüklemek için şunu kullanın:

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

Bkz. Yığın Taşması sorusu Geri yükleme console.log () .

Sadece hızlı bir uyarı - Internet Explorer'da tüm console.log () 'ları kaldırmadan test etmek istiyorsanız, Firebug Lite kullanmanız veya özellikle kolay olmayan bazı hatalar almanız gerekir.

(Veya yalnızca false döndüren kendi console.log () dosyanızı oluşturun.)

Konsolun kullanılabilir olup olmadığını kontrol eden kısa bir komut dosyası. Değilse, Firebug'u yüklemeye çalışır ve Firebug mevcut değilse Firebug Lite'ı yükler. Artık console.logherhangi bir tarayıcıda kullanabilirsiniz . Zevk almak!

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

Delan Azabani'nin cevabına ek olarak , paylaşmak istiyorum console.jsve aynı amaçla kullanıyorum. İşlev adlarının bir dizisini kullanarak bir noop konsolu oluşturuyorum, bence bunu yapmak için çok uygun bir yol ve bir console.logişlevi olan Internet Explorer'a baktım , ancak hayır 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() {};
  }
}

Veya bu işlevi kullanın:

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

İşte konsol sarmalayıcı sınıfım. Hayatı kolaylaştırmak için bana kapsam çıktısı sağlıyor. Yöntemine erişim sağlayan, çağıran sınıfın kapsamında çalışacak şekilde kullanımına localConsole.debug.call()dikkat localConsole.debugedin 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();

Bu Firebug'da olduğu gibi çıktı verir :

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

Veya Chrome:

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

Şahsen ben tarek11011 benzer bu kullanın:

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

Ana nokta, en azından console.log()doğrudan JavaScript kodunuza yapışmaktan başka bazı oturum açma pratiğine sahip olmanın iyi bir fikir olmasıdır , çünkü unutursanız ve bir üretim sitesinde ise, tüm JavaScript kodunu kırabilir o sayfa için.

console.log()Hangi programlama yazılımı düzenleyicisine sahip bir hata ayıklama kodunuz varsa kullanabilirsiniz ve çıktı muhtemelen benim için en iyi düzenleyicidir (Google Chrome). Sadece tuşuna F12basın ve Konsol sekmesine basın. Sonucu göreceksiniz. Mutlu kodlama. :)

Konsollarında kontrol eden geliştiricilerle ilgili birçok sorun yaşadım. () İfadeleri. Ve Internet Explorer 10 ve Visual Studio 2012'deki fantastik iyileştirmelere rağmen, Internet Explorer'da hata ayıklamayı gerçekten sevmiyorum gibi .

Bu yüzden, konsol nesnesinin kendisini geçersiz kıldım ... Yalnızca localhost üzerinde konsol deyimlerine izin veren bir __localhost bayrağı ekledim. Internet Explorer'a konsol (.) İşlevlerini de ekledim (bunun yerine bir uyarı () görüntüler).

// Console extensions...
(function() {
    var __localhost = (document.location.host === "localhost"),
        __allow_examine = true;

    if (!console) {
        console = {};
    }

    console.__log = console.log;
    console.log = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__log === "function") {
                console.__log(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__info = console.info;
    console.info = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__info === "function") {
                console.__info(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__warn = console.warn;
    console.warn = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__warn === "function") {
                console.__warn(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__error = console.error;
    console.error = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__error === "function") {
                console.__error(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__group = console.group;
    console.group = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__group === "function") {
                console.__group(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert("group:\r\n" + msg + "{");
            }
        }
    };

    console.__groupEnd = console.groupEnd;
    console.groupEnd = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
                console.__groupEnd(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg + "\r\n}");
            }
        }
    };

    /// <summary>
    /// Clever way to leave hundreds of debug output messages in the code,
    /// but not see _everything_ when you only want to see _some_ of the
    /// debugging messages.
    /// </summary>
    /// <remarks>
    /// To enable __examine_() statements for sections/groups of code, type the
    /// following in your browser's console:
    ///       top.__examine_ABC = true;
    /// This will enable only the console.examine("ABC", ... ) statements
    /// in the code.
    /// </remarks>
    console.examine = function() {
        if (!__allow_examine) {
            return;
        }
        if (arguments.length > 0) {
            var obj = top["__examine_" + arguments[0]];
            if (obj && obj === true) {
                console.log(arguments.splice(0, 1));
            }
        }
    };
})();

Örnek kullanım:

    console.log("hello");

Krom / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

Koda yakından bakanlar için console.examine () işlevini keşfedeceksiniz. KG / müşteri sorunlarını gidermeye yardımcı olması için ürünün çevresindeki belirli alanlarda hata ayıklama kodu bırakabilmem için bu yıllar önce oluşturdum . Örneğin, bazı yayınlanmış kodda aşağıdaki satırı bırakacaktı:

    function doSomething(arg1) {
        // ...
        console.examine("someLabel", arg1);
        // ...
    }

Ardından, piyasaya sürülen üründen konsola (veya 'javascript:' ile başlayan adres çubuğuna) aşağıdakileri yazın:

    top.__examine_someLabel = true;

Sonra, kaydedilen console.examine () deyimlerinin tümünü göreceğim. Birçok kez fantastik bir yardımcı oldu.

Diğer tarayıcılar için satır numaralandırmasını koruyan basit Internet Explorer 7 ve altı dolgu :

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

console.debug("");

Bu yöntemi kullanmak, metni konsoldaki parlak mavi renkte yazdırır.

Delan ve Andru'nun fikirlerini daha da geliştirmek (bu yüzden bu cevap düzenlenmiş bir versiyondur); console.log büyük olasılıkla diğer işlevler olmayabilir, bu yüzden varsayılan eşlemi console.log ile aynı işleve sahip ....

Varsa, konsol işlevleri oluşturan bir komut dosyası yazabilirsiniz:

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

Ardından, aşağıdakilerden herhangi birini kullanın:

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

Bu işlevler farklı türde öğeleri günlüğe kaydeder (günlük, bilgi, hata veya uyarıya göre filtrelenebilir) ve konsol mevcut olmadığında hatalara neden olmaz. Bu işlevler Firebug ve Chrome konsollarında çalışır.