Bagaimana cara mencetak pesan debug di Google Chrome JavaScript Console?

Bagaimana cara mencetak pesan debug di Google Chrome JavaScript Console?

Harap perhatikan bahwa Konsol JavaScript tidak sama dengan JavaScript Debugger; mereka memiliki sintaks yang berbeda AFAIK, sehingga perintah cetak dalam JavaScript Debugger tidak akan berfungsi di sini. Di Konsol JavaScript, print()akan mengirim parameter ke printer.

Menjalankan kode berikut dari bilah alamat browser:

javascript: console.log (2);

berhasil mencetak pesan ke "Konsol JavaScript" di Google Chrome.

Memperbaiki ide Andru, Anda dapat menulis skrip yang membuat fungsi konsol jika tidak ada:

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

Kemudian, gunakan salah satu dari yang berikut:

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

Fungsi-fungsi ini akan mencatat berbagai jenis item (yang dapat difilter berdasarkan log, info, kesalahan atau peringatan) dan tidak akan menyebabkan kesalahan ketika konsol tidak tersedia. Fungsi-fungsi ini akan berfungsi di Firebug dan konsol Chrome.

Cukup tambahkan fitur keren yang banyak dilewatkan oleh pengembang:

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

Ini adalah magis %osampah yang dapat diklik dan mendalam-dibrowse isi dari objek JavaScript. %sditampilkan hanya untuk dicatat.

Ini juga keren:

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

Yang memberikan jejak tumpukan seperti Java ke titik new Error()doa (termasuk jalur ke file dan nomor baris !).

Keduanya %odan new Error().stacktersedia di Chrome dan Firefox!

Juga untuk jejak tumpukan dalam penggunaan Firefox:

console.trace();

Seperti https://developer.mozilla.org/en-US/docs/Web/API/console berkata.

Selamat melakukan peretasan!

UPDATE : Beberapa perpustakaan ditulis oleh orang jahat yang mendefinisikan ulang consoleobjek untuk keperluan mereka sendiri. Untuk mengembalikan browser asli consolesetelah memuat perpustakaan, gunakan:

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

Lihat pertanyaan Stack Overflow Memulihkan console.log () .

Hanya peringatan cepat - jika Anda ingin menguji di Internet Explorer tanpa menghapus semua console.log (), Anda harus menggunakan Firebug Lite atau Anda akan mendapatkan beberapa kesalahan yang tidak terlalu ramah.

(Atau buat console.log () Anda sendiri yang hanya mengembalikan false.)

Berikut ini adalah skrip pendek yang memeriksa apakah konsol tersedia. Jika tidak, ia mencoba memuat Firebug dan jika Firebug tidak tersedia, ia memuat Firebug Lite. Sekarang Anda dapat menggunakan console.logbrowser apa saja. Nikmati!

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

Selain jawaban Delan Azabani , saya suka berbagi console.js, dan saya gunakan untuk tujuan yang sama. Saya membuat konsol noop menggunakan array nama fungsi, apa yang menurut saya cara yang sangat nyaman untuk melakukan ini, dan saya menangani Internet Explorer, yang memiliki console.logfungsi, tetapi tidak 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() {};
  }
}

Atau gunakan fungsi ini:

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

Inilah kelas pembungkus konsol saya. Ini memberi saya ruang lingkup keluaran juga untuk membuat hidup lebih mudah. Catat penggunaan localConsole.debug.call()sehingga localConsole.debugberjalan dalam lingkup kelas panggilan, memberikan akses ke toStringmetodenya.

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();

Ini menghasilkan seperti di Firebug :

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

Atau Chrome:

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

Secara pribadi saya menggunakan ini, yang mirip dengan 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){}
}

Poin utamanya adalah ide yang baik untuk setidaknya memiliki beberapa praktik penebangan selain hanya menempel console.log()langsung ke kode JavaScript Anda, karena jika Anda melupakannya, dan itu ada di situs produksi, ini berpotensi dapat mematahkan semua kode JavaScript. untuk halaman itu.

Anda dapat menggunakan console.log()jika Anda memiliki kode debugged di editor perangkat lunak pemrograman apa yang Anda miliki dan Anda akan melihat output yang kemungkinan besar editor terbaik untuk saya (Google Chrome). Cukup tekan F12dan tekan tab Konsol. Anda akan melihat hasilnya. Selamat coding. :)

Saya punya banyak masalah dengan pengembang memeriksa di konsol mereka. () Pernyataan. Dan, saya benar-benar tidak suka men-debug Internet Explorer, meskipun ada peningkatan fantastis dari Internet Explorer 10 dan Visual Studio 2012 , dll.

Jadi, saya telah mengganti objek konsol itu sendiri ... Saya telah menambahkan flag __localhost yang hanya memungkinkan pernyataan konsol saat di localhost. Saya juga menambahkan konsol. () Berfungsi untuk Internet Explorer (yang menampilkan peringatan () sebagai gantinya).

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

Contoh penggunaan:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

Bagi mereka yang memperhatikan kode ini, Anda akan menemukan fungsi console.examine (). Saya membuat ini tahun lalu sehingga saya dapat meninggalkan kode debug di area tertentu di sekitar produk untuk membantu memecahkan masalah QA / masalah pelanggan. Misalnya, saya akan meninggalkan baris berikut dalam beberapa kode yang dirilis:

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

Dan kemudian dari produk yang dirilis, ketikkan yang berikut ke konsol (atau bilah alamat yang diawali dengan 'javascript:'):

    top.__examine_someLabel = true;

Lalu, saya akan melihat semua pernyataan console.examine () yang dicatat. Sudah bantuan yang fantastis berkali-kali lipat.

Simple Internet Explorer 7 dan di bawah shim yang mempertahankan penomoran baris untuk browser lain:

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

console.debug("");

Menggunakan metode ini mencetak teks dalam warna biru cerah di konsol.

Memperbaiki lebih lanjut gagasan Delan dan Andru (itulah sebabnya jawaban ini adalah versi yang diedit); console.log mungkin ada sementara fungsi lainnya mungkin tidak, jadi miliki peta default untuk fungsi yang sama dengan console.log ....

Anda dapat menulis skrip yang membuat fungsi konsol jika tidak ada:

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

Kemudian, gunakan salah satu dari yang berikut:

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

Fungsi-fungsi ini akan mencatat berbagai jenis item (yang dapat difilter berdasarkan log, info, kesalahan atau peringatan) dan tidak akan menyebabkan kesalahan ketika konsol tidak tersedia. Fungsi-fungsi ini akan berfungsi di Firebug dan konsol Chrome.