javascript मैं Google क्रोम जावास्क्रिप्ट कंसोल में डीबग संदेशों को कैसे मुद्रित करूं?




console debugging (12)

यहां एक छोटी सी लिपि है जो जांचता है कि कंसोल उपलब्ध है या नहीं। यदि ऐसा नहीं है, तो यह Firebug लोड करने का प्रयास करता है और यदि फ़ायरबग उपलब्ध नहीं है तो यह फ़ायरबग लाइट लोड करता है। अब आप किसी भी ब्राउज़र में 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.
}

मैं Google क्रोम जावास्क्रिप्ट कंसोल में डीबग संदेशों को कैसे मुद्रित करूं?

कृपया ध्यान दें कि जावास्क्रिप्ट कंसोल जावास्क्रिप्ट डीबगर के समान नहीं है; उनके पास AFAIK के विभिन्न वाक्यविन्यास हैं, इसलिए जावास्क्रिप्ट डीबगर में प्रिंट कमांड यहां काम नहीं करेगा। जावास्क्रिप्ट कंसोल में, print() प्रिंटर को पैरामीटर भेज देगा।


यहां मेरा कंसोल रैपर वर्ग है। यह मुझे जीवन को आसान बनाने के लिए स्कोप आउटपुट देता है। 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...}

या क्रोम:

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

डेवलपर्स के साथ उनके कंसोल में जांच करने में बहुत सारे मुद्दे हैं। () कथन। और, इंटरनेट एक्सप्लोरर 10 और Visual Studio 2012 , आदि के शानदार सुधारों के बावजूद, मुझे वास्तव में इंटरनेट एक्सप्लोरर डीबग करना पसंद नहीं है।

इसलिए, मैंने कंसोल ऑब्जेक्ट को ओवरराइड कर दिया है ... मैंने एक __localhost ध्वज जोड़ा है जो स्थानीयहोस्ट पर केवल कंसोल स्टेटमेंट को अनुमति देता है। मैंने कंसोल भी जोड़ा। () इंटरनेट एक्सप्लोरर के लिए फ़ंक्शन (जो इसके बजाय एक चेतावनी () प्रदर्शित करता है)।

// 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");

क्रोम / फ़ायरफ़ॉक्स:

    prints hello in the console window.

इंटरनेट एक्स्प्लोरर:

    displays an alert with 'hello'.

जो लोग कोड पर बारीकी से देखते हैं, उनके लिए आप console.examine () फ़ंक्शन खोज लेंगे। मैंने इस साल पहले बनाया था ताकि मैं QA / ग्राहक मुद्दों की समस्या निवारण में सहायता के लिए उत्पाद के आसपास के कुछ क्षेत्रों में डीबग कोड छोड़ सकूं। उदाहरण के लिए, मैं कुछ रिलीज कोड में निम्न पंक्ति छोड़ दूंगा:

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

और फिर जारी किए गए उत्पाद से, निम्नलिखित को कंसोल में टाइप करें (या 'जावास्क्रिप्ट:' के साथ प्रीफ़िक्स्ड पता बार):

    top.__examine_someLabel = true;

फिर, मैं सभी लॉग कंसोल .examine () कथन देखेंगे। यह कई बार एक शानदार मदद मिली है।


console.debug("");

इस विधि का उपयोग कंसोल में एक उज्ज्वल नीले रंग के रंग में पाठ को प्रिंट करता है।


डेलन और एंड्रू के विचारों पर आगे बढ़ना (यही कारण है कि यह उत्तर एक संपादित संस्करण है); 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(...);

ये फ़ंक्शन विभिन्न प्रकार की वस्तुओं को लॉग करेंगे (जिन्हें लॉग, जानकारी, त्रुटि या चेतावनी के आधार पर फ़िल्टर किया जा सकता है) और कंसोल उपलब्ध नहीं होने पर त्रुटियों का कारण नहीं होगा। ये फ़ंक्शन फायरबग और क्रोम कंसोल में काम करेंगे।


डेलन अज़बानी के जवाब के अलावा, मैं अपने console.js को साझा करना चाहता हूं, और मैं उसी उद्देश्य के लिए उपयोग करता हूं। मैं फ़ंक्शन नामों की एक सरणी का उपयोग करके एक नोप कंसोल बनाता हूं, मेरी राय में यह करने का एक बहुत ही सुविधाजनक तरीका है, और मैंने इंटरनेट एक्सप्लोरर का ख्याल रखा, जिसमें 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() {};
  }
}

ब्राउज़र पता बार से निम्नलिखित कोड निष्पादित करना:

javascript: console.log(2);

Google क्रोम में "जावास्क्रिप्ट कंसोल" को सफलतापूर्वक संदेश प्रिंट करता है।


बस एक शानदार सुविधा जोड़ें जो बहुत से डेवलपर याद करते हैं:

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

यह जादुई %o डंप क्लिक करने योग्य और जावास्क्रिप्ट ऑब्जेक्ट की गहरी ब्राउज़ करने योग्य सामग्री है। %s सिर्फ एक रिकॉर्ड के लिए दिखाया गया था।

यह भी ठंडा है:

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

जो new Error() आमंत्रण ( फ़ाइल और रेखा संख्या के पथ सहित new Error() के बिंदु पर जावा जैसी स्टैक ट्रेस देता है।

क्रोम और फ़ायरफ़ॉक्स दोनों में %o और new Error().stack उपलब्ध हैं!

फ़ायरफ़ॉक्स में स्टैक निशान के लिए भी उपयोग करें:

console.trace();

जैसा कि https://developer.mozilla.org/en-US/docs/Web/API/console कहते हैं।

हैप्पी हैकिंग!

अद्यतन : कुछ पुस्तकालय बुरे लोगों द्वारा लिखे गए हैं जो console ऑब्जेक्ट को अपने उद्देश्यों के लिए फिर से परिभाषित करते हैं। पुस्तकालय लोड करने के बाद मूल ब्राउज़र console को पुनर्स्थापित करने के लिए, उपयोग करें:

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

स्टैक ओवरफ़्लो प्रश्न देखें console.log () को पुनर्स्थापित करना


या इस समारोह का उपयोग करें:

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

व्यक्तिगत रूप से मैं इसका उपयोग करता हूं, जो 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() चिपकाने के अलावा लॉगिंग करने के कुछ अभ्यास करना अच्छा विचार है, क्योंकि यदि आप इसके बारे में भूल जाते हैं, और यह एक उत्पादन साइट पर है, तो यह संभावित रूप से टूट सकता है उस पृष्ठ के लिए सभी जावास्क्रिप्ट कोड।


आप console.log() उपयोग कर सकते हैं यदि आपके पास प्रोग्रामिंग सॉफ़्टवेयर संपादक में डिबग किए गए कोड हैं और आप आउटपुट को अधिकतर मेरे लिए सर्वश्रेष्ठ संपादक (Google क्रोम) देखेंगे। बस 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
        };
    }
}());




google-chrome