জাভাস্ক্রিপ্ট অবজেক্টগুলি কীভাবে পরিদর্শন করবেন


100

আমি কীভাবে একটি সতর্কতা বাক্সে কোনও অবজেক্টটি পরিদর্শন করতে পারি? সাধারণত কোনও অবজেক্টকে সতর্ক করে কেবল নডনাম ছুঁড়ে দেয়:

alert(document);

তবে আমি সতর্কতা বাক্সে অবজেক্টের বৈশিষ্ট্য এবং পদ্ধতিগুলি পেতে চাই। কীভাবে সম্ভব হলে এই কার্যকারিতাটি অর্জন করতে পারি? বা অন্য কোন পরামর্শ আছে?

বিশেষত, আমি এমন উত্পাদন পরিবেশের জন্য সমাধান চাইছি যেখানে কনসোল.লগ এবং ফায়ারব্যাগ পাওয়া যায় না।


9
কি console.logফায়ারফক্স অথবা Chrome উপর
KJYe.Name葉家仁

1
আমি বিভ্রান্ত একটি উত্পাদন পরিবেশে, আপনি প্রকৃত ব্যবহারকারীদের পেয়েছেন, তাই না? তাহলে আপনি কেন বস্তুর বৈশিষ্ট্য সহ একটি সতর্কতা নিক্ষেপ করতে চান? হয়তো এর থেকে আরও ভাল সমাধান হ'ল অবজেক্টটি সিরিয়ালাইজ করা এবং এটি কোনও ফাইলে লগ করা বা ইমেল প্রেরণ করা?
নাথান লং

সম্ভবত একটি সরঞ্জাম হিসাবে তার সতর্কতা প্রয়োজন, তবে অন্য কিছু করার জন্য প্রকৃত কার্যকারিতা। তিনি এটি করতে চাইলে বিভিন্ন ধরণের কারণ থাকতে পারে, যেমন পরিসংখ্যান দেখানো, বা ত্রুটি দেখা দেওয়া বা উভয়ই কেবল বস্তুটি পরিদর্শন করার জন্য যা ব্যবহার করা হচ্ছে তাতে কোনও জিনিস পাস করে doing
খ্রিস্টান


কখনও কখনও JSON.stringifyসহায়ক।
BrainSlugs83

উত্তর:


56

for- inএকটি বস্তু বা অ্যারের মধ্যে প্রতিটি সম্পত্তি জন্য loops। আপনি এই সম্পত্তিটি মানটি পেতে এবং পরিবর্তন করার জন্য এটি ব্যবহার করতে পারেন।

দ্রষ্টব্য: ব্যক্তিগত সম্পত্তিগুলি পরিদর্শন করার জন্য উপলভ্য নয়, যদি না আপনি "স্পাই" ব্যবহার করেন; মূলত, আপনি অবজেক্টটিকে ওভাররাইড করে এবং কিছু কোড লিখুন যা অবজেক্টের প্রসঙ্গের ভিতরে একটি ইন-লুপ করে।

জন্য চেহারা যেমন:

for (var property in object) loop();

কিছু নমুনা কোড:

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

সম্পাদনা করুন: কিছু সময় আগে, আমি আমার নিজস্ব পরিদর্শককে লিখেছি, যদি আপনার আগ্রহ থাকে তবে আমি ভাগ করে নিতে পেরে খুশি।

2 সম্পাদনা করুন: ঠিক আছে, আমি যাই হোক না কেন একটি আপ লিখেছি।


একরকম পুনরাবৃত্তি থেকে রক্ষা করা উচিত। কিছু অভ্যন্তরীণ এইচটিএমএল-রেন্ডারার আইডি সহ হ্যাশস ( অভিধান )? এই চেকটি কোডের মধ্যে ঠেলাতে নুবগুলি কার্যকর হতে পারে।
নাকিলন

@ নাকিলন আমি সর্বদা অসীম পুনরাবৃত্তির বিষয়টি নিয়েছি, বিশেষত পিএইচপি-তে। এটি ঠিক করার দুটি উপায় রয়েছে: গভীরতার পরামিতি ব্যবহার করে, বা হ্যাশটি সংশোধন করে এবং নিজের সম্পত্তি যা আপনি পুনরাবৃত্তি পরীক্ষা করতে ব্যবহার করেন তা যুক্ত করুন। গভীরতা এক সম্ভবত নিরাপদ।
খ্রিস্টান

আমি 7 লাইনের এই সংস্করণটি পছন্দ করি like এটিকে দেখতে আরও কিছুটা রুবির মতো লাগছে এবং কিছু সুন্দর সাদা সাদা জায়গা রয়েছে r.push (i + '"' + p + '" =>' + (t == 'অবজেক্ট'? '{\ N' + জিনস্পেক্ট (ও [পি], আমি + '') + ('\ n' + i + '},'): ও [পি] + ''));
বিসি।

2
কোডটির এই অংশটি আইফোনটিতে সাফারি মোবাইলকে পুরোপুরি ধ্বংস করে দিয়েছে। নিরাপদ বিকল্পের জন্য আমি নীচে JSON.stringify সমাধানের জন্য যাব।
ড্যানিয়েল

1
এই জিনিসটি সাফারি ক্র্যাশ করেছে, ক্রোম কোনও বস্তুর পরিদর্শন করছে, এটি সুপারিশ করবে না।
কেনো

194

কেমন হয় alert(JSON.stringify(object))একটি আধুনিক ব্রাউজারে সাথে?

ক্ষেত্রে TypeError: Converting circular structure to JSON, এখানে আরও বিকল্প আছে: কিভাবে JSON করার DOM নোড ধারাবাহিকভাবে এমনকি যদি সার্কুলার রেফারেন্স কি?

ডকুমেন্টেশন: JSON.stringify()আউটপুট বিন্যাস বা পূর্বরূপকরণ সম্পর্কিত তথ্য সরবরাহ করে।


+1 ভাল পরামর্শ। আমি যুক্ত করতাম তিনি এটিকে সুন্দরভাবে দেখতে jsonview ( jsonviewer.stack.hu ) ব্যবহার করতে পারেন ।
খ্রিস্টান

2
আপনি যদি এটি সুন্দরভাবে ফর্ম্যাট করতে চান তবে আপনি কল করতে পারেন :, ইনডেন্টেশনের জন্য ব্যবহৃত স্পেসের সংখ্যাটি alert(JSON.stringify(object, null, 4)কোথায় 4
জান মোলাক

এটি আমাকে আউটপুট হিসাবে 'অপরিজ্ঞাত' দেয়। আমি কর্ম পরীক্ষাগুলি ডিবাগ করার চেষ্টা করছি।
অ্যালেক্স সি

1
এই পদ্ধতির জন্য সতর্কতা রয়েছে। ওপি বলেছেন যে তিনি অবজেক্টের পদ্ধতিগুলি পরীক্ষা করতে চান wants stringify পদ্ধতি দেখাবো না: JSON.stringify({f: ()=>{}}) => "{}"। এছাড়াও, যদি অবজেক্টটি toJSONপদ্ধতি প্রয়োগ করে তবে আপনি সেই পদ্ধতিটি কী প্রত্যাবর্তন করবে তা যদি আপনি অবজেক্টটি পরীক্ষা করতে চান তবে এটি অকেজো JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'
মোরোজভ

39

console.dir(object)ফায়ারব্যাগ প্লাগইন ব্যবহার করুন


4
এটি আমার পরে যা ছিল তার জন্য সবচেয়ে সম্পূর্ণ এবং সহায়ক তথ্য দিয়েছে। ধন্যবাদ।
Shon

2
console.dirবৈশিষ্ট্যটি সম্পর্কে আমি সচেতন ছিলাম না । আমি ফায়ারব্যাগে কেন পুরোপুরি অবজেক্টটি দেখতে পাচ্ছি না তা আমি কাজ করতে পারিনি। এটি এখন এটি আমার জন্য বাছাই করেছে। ধন্যবাদ!
অ্যান্ড্রু নিউবি

console.logপ্রদর্শনের সুবিধাগুলি ছাড়াও এর অন্যান্য সুবিধা রয়েছে কিনা তা আমার জানতে হবে , দয়া করে
ব্যবহারকারী 10089632

17

কয়েকটি পদ্ধতি রয়েছে:

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty) 

একটি কনসোল প্রসঙ্গে, কখনও কখনও। কনস্ট্রাক্টর বা .প্রোটোটাইপ দরকারী হতে পারে:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 

17

আপনার কনসোলটি ব্যবহার করুন:

console.log(object);

অথবা আপনি যদি এইচটিএমএল ডোম উপাদানগুলি পরিদর্শন করছেন তবে কনসোল.ডির (অবজেক্ট) ব্যবহার করুন। উদাহরণ:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

অথবা আপনি যদি ব্যবহার করতে পারেন জেএস বস্তুর একটি অ্যারে থাকে:

console.table(objectArr);

আপনি যদি অনেকগুলি কনসোল.লগ (অবজেক্টস) আউটপুট করে থাকেন তবে আপনি লিখতেও পারেন

console.log({ objectName1 });
console.log({ objectName2 });

এটি কনসোলে লিখিত জিনিসগুলিকে লেবেল করতে সহায়তা করবে।


এই প্রদর্শিত মানগুলি পরিবর্তনশীলভাবে পরিবর্তিত হয়, রিয়েল টাইমে যা ডিবাগিংয়ের উদ্দেশ্যে বিভ্রান্তিমূলক হতে পারে
ব্যবহারকারী 1008963632

ক্রোমে আপনার কনসোল পছন্দগুলি ব্যবহার করুন এবং সংরক্ষণ করুন লগতে ক্লিক করুন। এখন এমনকি যদি আপনার স্ক্রিপ্ট আপনাকে অন্য পৃষ্ঠায় পুনঃনির্দেশ করে তবে আপনার কনসোল সাফ করা হয়নি।
রিচার্ড টর্কাটো

দেখে মনে হচ্ছে এই সমস্যাটি ফায়ারফক্স সম্পর্কিত কারণ ক্রোমে যদি আপনি প্রদর্শিত মানগুলি কনসোল.লগ না করেন () না থাকে। আপনি ক্রোমে যাওয়ার পরামর্শ দিতে পারেন তবে কখনও কখনও আপনি ব্রাউজারের উপলব্ধতার বৈশিষ্ট্য পরীক্ষা করে থাকেন। যাইহোক ধন্যবাদ টিপ যে দরকারী হতে পারে জন্য ধন্যবাদ।
ব্যবহারকারী 10089632

আমি ব্যবহার করতে পারছি না consoleকারণ আমি স্টাইলিংফ্লো. com/q/7505623/1480391 ব্যবহার করছি এবং এটি সামঞ্জস্যপূর্ণ নয়
ইয়ভেস এম।

9
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);

কনসোল.লগ () এটি কীভাবে করে? :)
খ্রিস্টান

ফায়ারফক্স বা ক্রোম ব্যবহার করুন। ফায়ারফক্সের জন্য ফায়ারব্যাগ পান। একটি অবশ্যই থাকতে হবে
মো

আমি ব্যঙ্গাত্মক হচ্ছিলাম. ওপি বিশেষত জেএস কোডের জন্য জিজ্ঞাসা করেছিল, এবং আপনি যদি ফায়ারব্যাগ / শিয়াল / ক্রোমের সাথে সম্পর্কিত পরামর্শ না দিয়ে থাকেন তবে আমি জানি না তিনি কোথায় উত্তর পেয়েছেন।
খ্রিস্টান

6

এটি খ্রিস্টানদের উত্তরের উত্তম বিব্রত প্রকাশ। আমি এটিকে আরও কিছুটা পাঠযোগ্য করে তুলেছি:

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector

4

এখানে আমার অবজেক্ট ইন্সপেক্টর যা আরও বেশি পঠনযোগ্য। কোডটি লিখতে দীর্ঘ সময় লাগে বলে আপনি এটি http://etto-aa-js.googlecode.com/svn/trunk/inspector.js এ ডাউনলোড করতে পারেন

এর মতো ব্যবহার করুন:

document.write(inspect(object));

2
এটি সাধারণত ক্ষেত্রে হয় (এবং এটি অবশ্যই সরকারী দিকনির্দেশনা - লিঙ্কগুলি পোস্ট করবেন না), ওটিওহ, এর মতো সংস্করণযুক্ত কোনও কিছুর জন্য এটি এক ধরণের সুন্দর হতে পারে, যেহেতু আপনি জানেন যে আপনি সর্বদা সন্ধান করতে যাচ্ছেন সাম্প্রতিক কোড, এবং কোনও বাসি জিনিস নয় যা কয়েক বছর আগে পোস্ট হয়েছিল এবং এটি আর কাজ করবে না ... - এছাড়াও, কোডটির বিশাল ব্লকটি দেখতে খুব ভয়ঙ্কর দেখাবে যাতে পাঠ্যের একটি উত্তর দেয়ালে আটকে দেওয়া হয় ... - বিষয় অফ: কোডের জন্য "স্পোলার" -র মতো ট্যাগগুলি রাখার এবং কোনও বাহ্যিক উত্সের সাথে লিঙ্ক করতে সক্ষম হওয়ার এবং এটির স্বয়ংক্রিয় আপডেট (যখন সম্ভব)
পাওয়ার জন্য কোনও উপায় থাকলে এসেই কোনও উপায় ছিল
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.