ฉันจะพิมพ์ข้อความแก้ไขข้อบกพร่องในคอนโซล JavaScript ของ Google Chrome ได้อย่างไร

ฉันจะพิมพ์ข้อความแก้ไขข้อบกพร่องในคอนโซล JavaScript ของ Google Chrome ได้อย่างไร

โปรดทราบว่าคอนโซล JavaScript ไม่เหมือนกับ JavaScript Debugger พวกเขามีไวยากรณ์ AFAIK ที่แตกต่างกันดังนั้นคำสั่งพิมพ์ใน JavaScript Debugger จะไม่ทำงานที่นี่ ในคอนโซล JavaScript print()จะส่งพารามิเตอร์ไปยังเครื่องพิมพ์

ดำเนินการรหัสต่อไปนี้จากแถบที่อยู่ของเบราว์เซอร์:

javascript: console.log (2);

พิมพ์ข้อความไปยัง "คอนโซล JavaScript" ได้สำเร็จใน Google Chrome

ปรับปรุงความคิดของ 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

เพียงเพิ่มฟีเจอร์เด็ด ๆ ที่นักพัฒนาหลายคนคิดถึง:

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

นี่คือการ%oถ่ายโอนข้อมูลเวทมนต์ที่คลิกได้และเนื้อหาที่เรียกดูได้ลึกของวัตถุ JavaScript %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กล่าว

แฮ็คมีความสุข!

UPDATE : ห้องสมุดบางแห่งเขียนโดยคนไม่ดีซึ่งกำหนดconsoleวัตถุใหม่เพื่อจุดประสงค์ของตนเอง หากต้องการคืนค่าเบราว์เซอร์ดั้งเดิมconsoleหลังจากโหลดไลบรารีให้ใช้:

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

ดูกองมากเกินคำถามRestoring console.log ()

เพียงแค่คำเตือนอย่างรวดเร็ว - หากคุณต้องการทดสอบใน Internet Explorer โดยไม่ต้องลบ console.log () ทั้งหมดคุณจะต้องใช้Firebug Liteหรือคุณจะได้รับข้อผิดพลาดที่ไม่เป็นมิตร

(หรือสร้าง console.log ของคุณเอง () ซึ่งเพิ่งกลับเท็จ)

นี่เป็นสคริปต์สั้น ๆ ที่ตรวจสอบว่ามีคอนโซลหรือไม่ หากไม่เป็นเช่นนั้นจะพยายามโหลด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.
}

นอกจากคำตอบของ Delan Azabaniแล้วฉันต้องการแบ่งปันconsole.jsและฉันก็ใช้เพื่อจุดประสงค์เดียวกัน ฉันสร้างคอนโซล noop โดยใช้ชื่อฟังก์ชั่นมากมายสิ่งที่ฉันคิดว่าเป็นวิธีที่สะดวกมากในการทำสิ่งนี้และฉันดูแล Internet Explorer ซึ่งมีconsole.logฟังก์ชั่น แต่ไม่มี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() {};
  }
}

หรือใช้ฟังก์ชั่นนี้:

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

นี่คือคลาส wrapper ของฉัน มันให้ขอบเขตการส่งออกเช่นกันเพื่อทำให้ชีวิตง่ายขึ้น สังเกตการใช้งาน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

ส่วนตัวฉันใช้สิ่งนี้ซึ่งคล้ายกับของ 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){}
}

ประเด็นหลักคืออย่างน้อยก็ควรมีการฝึกฝนการบันทึกอย่างน้อยก็ไม่ใช่เพียงแค่console.log()ใส่เข้าไปในโค้ด JavaScript ของคุณเพราะถ้าคุณลืมมันไปและมันอยู่ในสถานที่ผลิตมันอาจทำลายโค้ด JavaScript ทั้งหมดได้ สำหรับหน้านั้น

คุณสามารถใช้console.log()หากคุณมีรหัสที่ดีบั๊กในสิ่งที่คุณมีโปรแกรมแก้ไขซอฟต์แวร์การเขียนโปรแกรมและคุณจะเห็นผลลัพธ์ที่น่าจะเป็นตัวแก้ไขที่ดีที่สุดสำหรับฉัน (Google Chrome) เพียงกดF12และกดแท็บคอนโซล คุณจะเห็นผล การเข้ารหัสที่มีความสุข :)

ฉันมีปัญหามากมายกับนักพัฒนาที่กำลังตรวจสอบในคอนโซลของพวกเขา () คำสั่ง และฉันไม่ชอบการดีบัก Internet Explorer แม้จะมีการปรับปรุงที่ยอดเยี่ยมของInternet Explorer 10และVisual Studio 2012ฯลฯ

ดังนั้นฉันจึงแทนที่วัตถุคอนโซลเอง ... ฉันได้เพิ่มค่าสถานะ __localhost ที่อนุญาตเฉพาะคำสั่งคอนโซลเมื่ออยู่ใน localhost ฉันยังเพิ่ม console. () ฟังก์ชั่นใน Internet Explorer (ที่แสดงการแจ้งเตือน () แทน)

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

ตัวอย่างการใช้:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

สำหรับผู้ที่ดูรหัสอย่างใกล้ชิดคุณจะค้นพบฟังก์ชัน console.examine () ฉันสร้างขึ้นเมื่อหลายปีก่อนเพื่อที่จะได้ใส่รหัสดีบั๊กในบางพื้นที่รอบ ๆ ผลิตภัณฑ์เพื่อช่วยแก้ไขปัญหาQA / ลูกค้า ตัวอย่างเช่นฉันจะออกจากบรรทัดต่อไปนี้ในบางรหัสที่ออก:

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

และจากผลิตภัณฑ์ที่วางจำหน่ายให้พิมพ์ดังต่อไปนี้ในคอนโซล (หรือแถบที่อยู่นำหน้าด้วย 'javascript:'):

    top.__examine_someLabel = true;

จากนั้นฉันจะเห็นคำสั่ง console.examine () ที่บันทึกไว้ทั้งหมด มันเป็นความช่วยเหลือที่ยอดเยี่ยมหลายต่อหลายครั้ง

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

console.debug("");

การใช้วิธีนี้พิมพ์ข้อความเป็นสีฟ้าสดใสในคอนโซล

ปรับปรุงเพิ่มเติมเกี่ยวกับแนวคิดของ 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