গুগল ক্রোম জাভাস্ক্রিপ্ট কনসোলে আমি কীভাবে ডিবাগ বার্তাগুলি মুদ্রণ করব?
দয়া করে মনে রাখবেন যে জাভাস্ক্রিপ্ট কনসোলটি জাভাস্ক্রিপ্ট ডিবাগারের মতো নয়; এফআইকে তাদের বিভিন্ন সিনট্যাক্স রয়েছে, তাই জাভাস্ক্রিপ্ট ডিবাগারের মুদ্রণ কমান্ড এখানে কাজ করবে না। জাভাস্ক্রিপ্ট কনসোলে, print()প্যারামিটারটি প্রিন্টারে প্রেরণ করবে।
উত্তর:
ব্রাউজারের অ্যাড্রেস বার থেকে নিম্নলিখিত কোডটি কার্যকর করা হচ্ছে:
জাভাস্ক্রিপ্ট: কনসোল.লগ (2);
গুগল ক্রোমে সাফল্যের সাথে "জাভাস্ক্রিপ্ট কনসোল" এ বার্তা মুদ্রণ করে।
console.log()স্থাপনার আগে কোনও কোড উত্পাদন কোড থেকে অপসারণ করা উচিত।
Console.Logপ্রোডাকশন কোড থেকে সরানো উচিত কারণ যদি তা না হয় তবে এই বার্তাগুলি আপনার ব্যবহারকারীর জাভাস্ক্রিপ্ট কনসোলে লগইন হবে। যদিও তারা এটি দেখার সম্ভাবনা নেই, এটি তাদের ডিভাইসে মেমরির স্থান গ্রহণ করছে। এছাড়াও, লগের সামগ্রীর উপর নির্ভর করে, আপনি আপনার অ্যাপ্লিকেশনটিকে হ্যাক / বিপরীত প্রকৌশলী কীভাবে করবেন তা সম্ভাব্যভাবে বলছেন telling
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(...);এই ফাংশনগুলি বিভিন্ন ধরণের আইটেমগুলিতে লগ করবে (যা লগ, তথ্য, ত্রুটি বা সতর্কতার উপর ভিত্তি করে ফিল্টার করা যেতে পারে) এবং যখন কনসোল উপলব্ধ না হয় ত্রুটি ঘটবে না। এই ফাংশনগুলি ফায়ারব্যাগ এবং ক্রোম কনসোলগুলিতে কাজ করবে।
if (!window.console) {এবং তারপর সবকিছু বন্ধনীর ভিতরে রেখে দিয়েছিলেন তবে কোডটি আরও কঠোর হবে না ? এখনই আপনি একই জিনিস চারবার মূল্যায়ন করছেন evalu
কেবল একটি দুর্দান্ত বৈশিষ্ট্য যুক্ত করুন যা প্রচুর বিকাশকারী মিস করে:
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().stackক্রোম এবং ফায়ারফক্সে উপলব্ধ!
ফায়ারফক্সের ব্যবহারের স্ট্যাক ট্রেসগুলির জন্য:
console.trace();যেমন https://developer.mozilla.org/en-US/docs/Web/API/console বলেছে।
শুভ হ্যাকিং!
আপডেট : কিছু লাইব্রেরি খারাপ লোকদের দ্বারা লিখিত হয় যা consoleতাদের নিজস্ব উদ্দেশ্যে উদ্দেশ্যটিকে নতুন করে সংজ্ঞায়িত করে । consoleলাইব্রেরি লোড করার পরে মূল ব্রাউজারটি পুনরুদ্ধার করতে , ব্যবহার করুন:
delete console.log;
delete console.warn;
....কনসোল.লগ () পুনরুদ্ধার স্ট্যাক ওভারফ্লো প্রশ্ন দেখুন ।
কেবলমাত্র একটি দ্রুত সতর্কতা - আপনি যদি সমস্ত কনসোল.লগ () এর অপসারণ ছাড়াই ইন্টারনেট এক্সপ্লোরারটিতে পরীক্ষা করতে চান তবে আপনাকে ফায়ারব্যাগ লাইট ব্যবহার করা দরকার বা আপনি কিছু বিশেষভাবে বন্ধুত্বপূর্ণ ত্রুটি পাবেন না।
(অথবা আপনার নিজস্ব কনসোল.লগ তৈরি করুন () যা কেবল মিথ্যা প্রত্যাবর্তন করে))
consoleঅবজেক্টটি তৈরি করা হয় এবং উপস্থিত না হওয়া অবধি বিদ্যমান আপনি ব্রাউজারের উদাহরণটি বন্ধ না করে।
এখানে একটি শর্ট স্ক্রিপ্ট যা কনসোল উপলব্ধ কিনা তা যাচাই করে। যদি এটি না হয় তবে এটি ফায়ারব্যাগটি লোড করার চেষ্টা করে এবং যদি ফায়ারব্যাগ না পাওয়া যায় তবে এটি ফায়ারব্যাগ লাইট লোড করে। এখন আপনি যে 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() {};
}
}অথবা এই ফাংশনটি ব্যবহার করুন:
function log(message){
if (typeof console == "object") {
console.log(message);
}
}console.constructor === Object && (log = m => console.log(m))
এখানে আমার কনসোল মোড়ক ক্লাস। এটি জীবনকে আরও সহজ করার জন্য আমাকে স্কোপ আউটপুট দেয়। উল্লেখ্য ব্যবহার 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ব্যক্তিগতভাবে আমি এটি ব্যবহার করি, যা তারেক 111011 এর মতো:
// 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তুমি বলতে চাচ্ছ কনসোলটির নতুন সংজ্ঞা দেওয়া হওয়ার পরে যদি কোনও ত্রুটি নিক্ষেপ করা হয় তবে (যদি কনসোল.লগ কোনও ফাংশন না ছিল) কেবল একবার চেষ্টাটি কার্যকর হবে useful এরকম window.console && window.console.log instanceof Functionআরো উপযোগী হবে।
console.log()আপনার কাছে কোন প্রোগ্রামিং সফটওয়্যার সম্পাদক রয়েছে তার ডিবাগ কোড থাকলে আপনি ব্যবহার করতে পারেন এবং আউটপুটটি সম্ভবত আমার জন্য সেরা সম্পাদক (গুগল ক্রোম) দেখতে পাবেন। শুধু F12কনসোল ট্যাব টিপুন এবং টিপুন। আপনি ফলাফল দেখতে পাবেন। শুভ কোডিং। :)
বিকাশকারীদের তাদের কনসোলে চেক করার সাথে আমার প্রচুর সমস্যা হয়েছে (() বিবৃতি। ইন্টারনেট এক্সপ্লোরার 10 এবং ভিজ্যুয়াল স্টুডিও 2012 ইত্যাদির দুর্দান্ত উন্নতি সত্ত্বেও, আমি সত্যই ইন্টারনেট এক্সপ্লোরারটিকে ডিবাগ করতে পছন্দ করি না etc.
সুতরাং, আমি নিজেই কনসোল অবজেক্টটিকে ওভাররাইড করেছি ... আমি একটি __localhost পতাকা যুক্ত করেছি যা লোকালহোস্টে যখন কেবল কনসোলের বিবৃতি দেয় allows আমি ইন্টারনেট এক্সপ্লোরারে কনসোল () ফাংশনও যুক্ত করেছি (এটি পরিবর্তে একটি সতর্কতা প্রদর্শন করে) ()।
// 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'.যারা কোডটি ঘনিষ্ঠভাবে দেখেন তাদের জন্য, আপনি কনসোল.এক্সামাইন () ফাংশনটি আবিষ্কার করবেন। আমি এই বছর আগে তৈরি করেছি যাতে আমি QA / গ্রাহক সমস্যা সমাধানের জন্য পণ্যটির আশেপাশে নির্দিষ্ট কিছু জায়গায় ডিবাগ কোড ছেড়ে যেতে পারি । উদাহরণস্বরূপ, আমি কয়েকটি প্রকাশিত কোডে নিম্নলিখিত লাইনটি ছেড়ে যাব:
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()জেএস ডিবাগিংয়ের জন্য দুর্দান্ত ... আমি প্রায়শই এটি অনুশীলনে ব্যবহার করতে ভুলে যাই।