debugging datapassed,please - كيف أقوم بطباعة رسائل تصحيح الأخطاء في Google Chrome JavaScript Console؟




javascript! enabled! (13)

كيف أقوم بطباعة رسائل تصحيح الأخطاء في Google Chrome JavaScript Console؟

يرجى ملاحظة أن وحدة تحكم جافا سكريبت ليست هي نفسها أداة تصحيح جافا سكريبت ؛ لديهم بناء الجملة المختلفة AFAIK ، لذلك لن يعمل أمر الطباعة في JavaScript Debugger هنا. في وحدة تحكم JavaScript ، ستقوم print() بإرسال المعلمة إلى الطابعة.


Answers

يمكنك استخدام console.log() إذا كان لديك رمز تم تصحيحه في محرر برامج البرمجة لديك ولسوف ترى أن الناتج غالباً ما يكون أفضل محرر لي (Google Chrome). ما عليك سوى الضغط على F12 والضغط على علامة التبويب Console. سترى النتيجة. الترميز سعيدة. :)


أنا شخصياً استخدم هذا ، وهو مشابه لـ tarek11011's:

// 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: 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.


أو استخدم هذه الوظيفة:

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

وهنا فئة المجمع وحدة التحكم الخاصة بي. إنه يعطيني مجالًا للنطاق أيضًا لجعل الحياة أسهل. لاحظ استخدام 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

مجرد تحذير سريع - إذا كنت تريد الاختبار في Internet Explorer دون إزالة كافة console.log () ، فستحتاج إلى استخدام Firebug Lite أو ستحصل على بعض الأخطاء الودية بشكل خاص.

(أو إنشاء console.log () الخاص بك والتي تقوم فقط بإرجاع false.)


console.debug("");

باستخدام هذا الأسلوب بطباعة النص بلون أزرق مشرق في وحدة التحكم.


هنا هو برنامج نصي قصير يتحقق مما إذا كانت وحدة التحكم متوفرة. إذا لم يكن الأمر كذلك ، فإنه يحاول تحميل 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.
}

برنامج 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
        };
    }
}());

لقد واجهت الكثير من المشاكل مع المطورين التحقق في وحدة التحكم الخاصة بهم. () عبارات. وأنا لا أحب تصحيح أخطاء Internet Explorer ، على الرغم من التحسينات الرائعة في Internet Explorer 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);
        // ...
    }

ثم من المنتج الذي تم إصداره ، اكتب ما يلي في وحدة التحكم (أو شريط العنوان مسبوقًا بـ "javascript: '):

    top.__examine_someLabel = true;

ثم ، سأشاهد كافة عبارات console.examine () التي تم تسجيلها. لقد كانت مساعدة رائعة عدة مرات.


بالإضافة إلى إجابة Delan Azabani ، أحب مشاركة وحدة التحكم الخاصة بي ، واستخدامها للغرض نفسه. أقوم بإنشاء وحدة تحكم في 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() {};
  }
}

أسباب استخدام NodeJS:

  • يتم تشغيل جافا سكريبت ، بحيث يمكنك استخدام نفس اللغة على الخادم والعميل ، وحتى مشاركة بعض التعليمات البرمجية بينها (على سبيل المثال ، للتحقق من صحة النموذج ، أو لعرض وجهات النظر في أيٍّ من الطرفين).

  • يتسم نظام الأحداث single-threaded بالأحرف fast حتى عند التعامل مع الكثير من الطلبات في وقت واحد ، كما أنه بسيط مقارنة بالأطر التقليدية متعددة المهام لـ Java أو ROR.

  • مجموعة packages المتزايدة باستمرار والتي يمكن الوصول إليها من خلال الآلية الوقائية الوطنية ، بما في ذلك المكتبات / الوحدات النمطية التابعة للخادم والمزود ، بالإضافة إلى أدوات سطر الأوامر لتطوير الويب. تتم استضافة معظم هذه الأجهزة بشكل مريح على موقع github ، حيث يمكنك أحيانًا الإبلاغ عن مشكلة والعثور عليها في غضون ساعات! من اللطيف أن يكون كل شيء تحت سقف واحد ، مع إعداد تقارير عن القضايا القياسية والتشكيل السهل.

  • لقد أصبحت البيئة القياسية التي تستخدم في تشغيل الأدوات ذات الصلة بجافا سكريبت والأدوات الأخرى ذات الصلة بالشبكة ، بما في ذلك برامج تشغيل المهام ، والصانعات الصغيرة ، والمكياج ، والمعالجات ، والمعالجات التمهيدية ، والمعالجات ، ومعالجات التحليلات.

  • يبدو مناسبًا تمامًا للنماذج الأولية والتطوير السريع والتكرار السريع للمنتجات .

أسباب عدم استخدام NodeJS:

  • يتم تشغيل جافا سكريبت ، والتي لا يوجد لديها التحقق من نوع وقت التحويل البرمجي. بالنسبة لأنظمة السلامة المعقدة الكبيرة ، أو المشاريع ، بما في ذلك التعاون بين المنظمات المختلفة ، فإن اللغة التي تشجع على واجهات التعاقدية وتوفر التحقق من النوع الثابت قد توفر لك بعض وقت التصحيح ( والانفجارات ) على المدى الطويل. (على الرغم من أن JVM عالق بـ null ، لذا يرجى استخدام Haskell للمفاعلات النووية الخاصة بك.)

  • إضافة إلى ذلك ، فإن العديد من الحزم في الآلية الوقائية الوطنية هي قليلة الخام ، ولا تزال قيد التطوير السريع. بعض المكتبات للأطر القديمة خضعت لعقد من الاختبارات و bugfixing ، ومستقرة للغاية حتى الآن. لا يوجد لدى Npmjs.org آلية لتقييم الحزم ، الأمر الذي أدى إلى انتشار الحزم التي تؤدي إلى نفس الشيء تقريباً ، والتي لم يعد يتم الاحتفاظ بنسبة كبيرة منها.

  • المتداخلة رد الجحيم. (بالطبع هناك 20 حلول مختلفة لهذا ...)

  • يمكن للمجموعة المتزايدة باستمرار من الحزم جعل مشروع NodeJS يبدو مختلفًا جذريًا عن التالي. هناك تنوع كبير في عمليات التنفيذ بسبب العدد الهائل من الخيارات المتاحة (مثل Express / Sails.js / Meteor / Derby ). قد يؤدي ذلك أحيانًا إلى صعوبة قيام مطور جديد بالانتقال إلى مشروع عقدة. على النقيض من ذلك مع انضمام مطور Rails إلى مشروع حالي: يجب أن يكون قادرًا على التعرف على التطبيق بسرعة كبيرة ، نظرًا لأنه يتم تشجيع جميع تطبيقات Rails على استخدام بنية مشابهة .

  • يمكن التعامل مع الملفات يكون قليلا من الألم. الأشياء التي تافهة في لغات أخرى ، مثل قراءة سطر من ملف نصي ، هي غريبة بما فيه الكفاية مع Node.js أن هناك سؤال على ذلك مع upvotes 80+. لا توجد طريقة بسيطة لقراءة سجل واحد في كل مرة من ملف CSV . إلخ.

أنا أحب NodeJS ، فهو سريع والبرية وممتعة ، ولكن أنا قلق من أن لديها القليل من الاهتمام في إثبات الصحة-إثبات. دعونا نأمل أن نتمكن في نهاية المطاف من دمج أفضل ما في العالمين. أنا حريصة على رؤية ما سوف يحل محل عقدة في المستقبل ... :)







javascript console debugging google-chrome