मैं Google Chrome जावास्क्रिप्ट कंसोल में डिबग संदेश कैसे प्रिंट कर सकता हूं?
कृपया ध्यान दें कि जावास्क्रिप्ट कंसोल, जावास्क्रिप्ट डीबगर के समान नहीं है; उनके पास अलग-अलग सिंटैक्स AFAIK है, इसलिए जावास्क्रिप्ट डीबगर में प्रिंट कमांड यहां काम नहीं करेगा। जावास्क्रिप्ट कंसोल में, print()प्रिंटर को पैरामीटर भेजेगा।
जवाबों:
ब्राउज़र एड्रेस बार से निम्नलिखित कोड निष्पादित करना:
जावास्क्रिप्ट: कंसोल.लॉग (2);
Google Chrome में "जावास्क्रिप्ट कंसोल" पर सफलतापूर्वक संदेश प्रिंट करता है।
console.log()तैनाती से पहले किसी भी कोड को उत्पादन कोड से हटा दिया जाना चाहिए।
Console.Logतैनाती से पहले उत्पादन कोड से हटा दिया जाना चाहिए क्योंकि यदि नहीं, तो ये संदेश आपके उपयोगकर्ताओं के जावास्क्रिप्ट कंसोल पर लॉग इन होंगे। जब तक वे इसे देखने की संभावना नहीं रखते, यह उनके डिवाइस पर मेमोरी स्पेस ले रहा है। इसके अलावा, लॉग की सामग्री के आधार पर, आप संभावित रूप से लोगों को बता सकते हैं कि अपने ऐप को इंजीनियर को हैक / रिवर्स कैसे करें।
एंड्रू के विचार में सुधार, आप एक स्क्रिप्ट लिख सकते हैं जो कंसोल फ़ंक्शन बनाता है यदि वे मौजूद नहीं हैं:
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(...);ये फ़ंक्शन विभिन्न प्रकार के आइटम (जो कि लॉग, सूचना, त्रुटि या चेतावनी के आधार पर फ़िल्टर किए जा सकते हैं) को लॉग करेंगे और कंसोल उपलब्ध नहीं होने पर त्रुटियां पैदा करेंगे। ये कार्य फायरबग और क्रोम कंसोल में काम करेंगे।
if (!window.console) {और फिर सब कुछ कोष्ठक के अंदर रखा जाएगा? अभी आप एक ही सामान का चार बार मूल्यांकन कर रहे हैं।
बस एक अच्छी सुविधा जोड़ें जो बहुत सारे डेवलपर्स को याद आती है:
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()आह्वान के बिंदु पर जावा-जैसे स्टैक ट्रेस देता है ( फ़ाइल और लाइन नंबर के लिए पथ सहित !)।
दोनों %oऔर new Error().stackChrome और Firefox में उपलब्ध हैं!
फ़ायरफ़ॉक्स उपयोग में स्टैक निशान के लिए भी:
console.trace();जैसा कि https://developer.mozilla.org/en-US/docs/Web/API/console कहते हैं।
हैप्पी हैकिंग!
अद्यतन : कुछ पुस्तकालय बुरे लोगों द्वारा लिखे जाते हैं जो consoleअपने उद्देश्यों के लिए वस्तु को फिर से परिभाषित करते हैं। consoleलाइब्रेरी लोड करने के बाद मूल ब्राउज़र को पुनर्स्थापित करने के लिए , उपयोग करें:
delete console.log;
delete console.warn;
....स्टैक ओवरफ्लो प्रश्न देखें कंसोल पुनर्स्थापित करना । () ।
बस एक त्वरित चेतावनी - यदि आप सभी कंसोल.लॉग () को हटाए बिना इंटरनेट एक्सप्लोरर में परीक्षण करना चाहते हैं, तो आपको फायरबग लाइट का उपयोग करने की आवश्यकता होगी या आपको कुछ विशेष रूप से अनुकूल त्रुटियां नहीं मिलेंगी।
(या अपना खुद का कंसोल बनाएँ।) (जो कि केवल गलत है।)
consoleऑब्जेक्ट तब तक बना और मौजूद रहता है जब तक आप उस ब्राउज़र इंस्टेंस को बंद नहीं कर देते।
यहाँ एक छोटी स्क्रिप्ट है जो जाँचती है कि कंसोल उपलब्ध है या नहीं। यदि ऐसा नहीं है, इसे लोड करने की कोशिश करता Firebug और यह Firebug Lite को लोड करता है 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.
}डेलन अजाबनी के जवाब के अलावा , मैं अपना साझा करना पसंद करता हूं 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() {};
}
}यहाँ मेरा कंसोल रैपर क्लास है। यह मुझे जीवन को आसान बनाने के लिए स्कोप आउटपुट देता है। नोट के उपयोग के 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();यह फायरबग में ऐसा आउटपुट देता है :
In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}या क्रोम:
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()अपने जावास्क्रिप्ट कोड में सही चिपके रहने के अलावा कम से कम लॉग इन करने का कुछ अभ्यास है , क्योंकि अगर आप इसके बारे में भूल जाते हैं, और यह एक उत्पादन साइट पर है, तो यह संभवतः जावास्क्रिप्ट कोड के सभी को तोड़ सकता है उस पेज के लिए।
if(windows.console) console.log(msg)?
window.consoleतुम्हारा मतलब है। यदि कंसोल को नए सिरे से परिभाषित किया गया था, तो केवल एक बार प्रयास करने पर उपयोगी होगा, यदि कोई त्रुटि डाली गई थी (यदि कंसोल.लॉग एक फ़ंक्शन नहीं था)। करना window.console && window.console.log instanceof Functionअधिक उपयोगी होगा।
मैं डेवलपर्स के साथ कई मुद्दों पर उनके कंसोल () कथनों में जाँच कर रहा हूँ। और, मैं वास्तव में इंटरनेट एक्सप्लोरर 10 और विज़ुअल स्टूडियो 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'.जो लोग कोड को करीब से देखते हैं, उनके लिए आप कंसोल.एक्सामाइन () फ़ंक्शन की खोज करेंगे। मैंने इसे सालों पहले बनाया था ताकि मैं क्यूए / ग्राहक मुद्दों के निवारण में मदद करने के लिए उत्पाद के आसपास के कुछ क्षेत्रों में डिबग कोड छोड़ सकूं । उदाहरण के लिए, मैं कुछ जारी किए गए कोड में निम्नलिखित पंक्ति छोड़ूंगा:
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}और फिर जारी किए गए उत्पाद से, कंसोल में निम्नलिखित टाइप करें (या 'जावास्क्रिप्ट:' के साथ उपसर्ग किए गए एड्रेस बार))
top.__examine_someLabel = true;फिर, मैं सभी लॉग इन कंसोल.एक्सामाइन () स्टेटमेंट देखूंगा। यह कई बार एक शानदार मदद रही है।
सरल इंटरनेट एक्सप्लोरर 7 और नीचे शिम जो अन्य ब्राउज़रों के लिए लाइन नंबरिंग को संरक्षित करता है:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());console.debug("");इस विधि का उपयोग कंसोल में उज्ज्वल नीले रंग में पाठ को प्रिंट करता है।
डेलन और एंड्रू के विचारों पर और सुधार करना (यही कारण है कि यह उत्तर एक संपादित संस्करण है); कंसोल.लॉग मौजूद होने की संभावना है, जबकि अन्य फ़ंक्शन नहीं हो सकते हैं, इसलिए कंसोल के रूप में एक ही फ़ंक्शन के लिए डिफ़ॉल्ट मानचित्र है।
यदि आप मौजूद नहीं हैं तो आप एक स्क्रिप्ट लिख सकते हैं जो कंसोल फ़ंक्शंस बनाती है:
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.log()जेएस डिबगिंग के लिए बहुत बढ़िया है ... मैं अक्सर इसे अभ्यास में उपयोग करना भूल जाता हूं।