javascript - কিভাবে আমি গুগল ক্রোম জাভাস্ক্রিপ্ট কনসোলে ডিবাগ বার্তা প্রিন্ট করব?




console debugging (10)

কিভাবে আমি গুগল ক্রোম জাভাস্ক্রিপ্ট কনসোলে ডিবাগ বার্তা প্রিন্ট করব?

জাভাস্ক্রিপ্ট কনসোল জাভাস্ক্রিপ্ট ডিবাগার হিসাবে একই নয় দয়া করে নোট করুন; তাদের বিভিন্ন সিনট্যাক্স AFAIK আছে, তাই জাভাস্ক্রিপ্ট ডিবাগারে মুদ্রণ কমান্ড এখানে কাজ করবে না। জাভাস্ক্রিপ্ট কনসোলে, print() প্রিন্টারে প্যারামিটার পাঠাবে।

https://code.i-harness.com


অথবা এই ফাংশন ব্যবহার করুন:

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

আন্দ্রুর ধারণাটি উন্নত করা, আপনি একটি স্ক্রিপ্ট লিখতে পারেন যা কনসোল ফাংশন তৈরি করে যদি তারা বিদ্যমান না থাকে:

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;

তারপর, আমি লগইন console.examine () বিবৃতিগুলি দেখতে পাবেন। এটা অনেকবার একটি চমত্কার সাহায্য হয়েছে।


এখানে আমার কনসোল 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...}

অথবা ক্রোম:

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

দেলান এবং আন্দ্রুর ধারণাগুলির উপর আরও উন্নতি করা (এই উত্তরটি একটি সম্পাদিত সংস্করণ); 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(...);

এই ফাংশনগুলি বিভিন্ন ধরণের আইটেমগুলিকে লগ করবে (যা লগ, তথ্য, ত্রুটি বা সতর্কতার উপর ভিত্তি করে ফিল্টার করা যেতে পারে) এবং কনসোল উপলব্ধ না হলে ত্রুটিগুলি ঘটবে না। এই ফাংশন ফায়ারবগ এবং ক্রোম কনসোল কাজ করবে।


ব্যক্তিগতভাবে আমি এই ব্যবহার, যা 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("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() ফাইল এবং লাইন নম্বরের পথ সহ!)।

উভয় %onew Error().stack ক্রোম এবং ফায়ারফক্সে পাওয়া যায়!

এছাড়াও ফায়ারফক্স ব্যবহার স্ট্যাক ট্রেস জন্য:

console.trace();

https://developer.mozilla.org/en-US/docs/Web/API/console বলেছেন।

শুভ হ্যাকিং!

আপডেট : কিছু লাইব্রেরি খারাপ মানুষ দ্বারা লেখা হয় যা console অবজেক্টকে তাদের নিজস্ব উদ্দেশ্যে পুনরায় সংজ্ঞায়িত করে। লাইব্রেরি লোড করার পরে মূল ব্রাউজার console পুনরুদ্ধার করতে, ব্যবহার করুন:

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

স্ট্যাক ওভারফ্লো প্রশ্ন পুনঃস্থাপন console.log () দেখুন


শুধু একটি দ্রুত সতর্কতা - যদি আপনি সমস্ত console.log () এর অপসারণ ছাড়াই ইন্টারনেট এক্সপ্লোরারটিতে পরীক্ষা করতে চান তবে আপনাকে ফায়ারবগ লাইট ব্যবহার করতে হবে অথবা আপনি কিছু বিশেষভাবে বন্ধুত্বপূর্ণ ত্রুটি পাবেন।

(অথবা আপনার নিজের 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