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




console debugging (10)

आप console.log() उपयोग कर सकते हैं यदि आपके पास प्रोग्रामिंग सॉफ़्टवेयर संपादक में डिबग किए गए कोड हैं और आप आउटपुट को अधिकतर मेरे लिए सर्वश्रेष्ठ संपादक (Google क्रोम) देखेंगे। बस F12 दबाएं और कंसोल टैब दबाएं। आप परिणाम देखेंगे। हैप्पी कोडिंग :)

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

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


एंड्रू के विचार पर सुधार, आप एक स्क्रिप्ट लिख सकते हैं जो कंसोल फ़ंक्शन बनाता है यदि वे मौजूद नहीं हैं:

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

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


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

(या अपना स्वयं का console.log () बनाएं जो सिर्फ झूठा लौटाता है।)


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

javascript: console.log(2);

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


यहां एक छोटी सी लिपि है जो जांचता है कि कंसोल उपलब्ध है या नहीं। यदि ऐसा नहीं है, तो यह 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.
}

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

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

console.debug("");

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






google-chrome