2009-01-19 14 views
63

संभव डुप्लिकेट:
JavaScript data formatting/pretty printerjQuery: print_r() बराबर प्रदर्शित करता है?

मैं FireBug में अस्वरूपित json धब्बे को देखने का एक सा थक हो रही है।

क्या कोई भी jQuery के लिए PHP के print_r() के बराबर जानता है?

कुछ ऐसा जो किसी ऑब्जेक्ट या सरणी से एक प्रदर्शन स्ट्रिंग कर देगा, जिसे मैं त्वरित डिबगिंग के लिए पृष्ठ पर प्रदर्शित कर सकता हूं?

धन्यवाद!

उत्तर

68

console.log जो डीबगिंग करते समय मैं अक्सर उपयोग करता हूं।

हालांकि मैं यह jQuery extension ढूंढ सकता था।

+6

यह सही है। मैं console.log का उपयोग कर रहा हूं, लेकिन मुझे एहसास नहीं हुआ कि मैं इसे एक ऑब्जेक्ट पास कर सकता हूं। Durr ... – Eli

+5

वास्तव में Durr। मुझे अब तक यह वास्तव में नहीं पता था, क्योंकि मैं हमेशा अपने console.log() की शुरुआत में एक स्ट्रिंग पर काम करता हूं और इसलिए हर बार मुझे केवल स्ट्रिंग प्रतिनिधित्व [ऑब्जेक्ट ऑब्जेक्ट] मिलता है। मैंने console.log (myObj) की कोशिश की और अब यह बहुत बेहतर है। – the0ther

+2

इसके अलावा, console.dir ऑब्जेक्ट्स के लिए सबसे अच्छा है :) –

44

आप सभी गुणों, विधियों और मूल्यों को सूचीबद्ध करने के लिए बहुत आसानी से reflection का उपयोग कर सकते हैं।

var data = new Object(); 
data["firstname"] = "John"; 
data["lastname"] = "Smith"; 
data["age"] = 21; 

alert(data.toSource()); //Will return "({firstname:"John", lastname:"Smith", age:21})" 

लेकिन आप Firebug, क्यों नहीं बस console.log का उपयोग का उपयोग के बाद से:

छिपकली आधारित ब्राउज़र आपको .toSource() विधि का उपयोग कर सकते

?

+0

mmm सबसे आसान धन्यवाद: डी – Gogol

9

तुम भी

console.log("a = %o, b = %o", a, b); 

जहां ए और बी वस्तुओं रहे हैं कर सकते हैं।

5

शीर्ष टिप्पणी में फ़ायरबग के लिए console.log प्रलेखन का टूटा लिंक है, इसलिए यहां a link to the wiki article about Console है। मैंने इसका उपयोग करना शुरू कर दिया और PHP के print_r() के विकल्प के रूप में इसके साथ काफी संतुष्ट हूं।

नोट के

इसके अलावा Firebug आप लौटे JSON तक पहुँच देता है कि वस्तुओं है यहां तक ​​कि आप उन्हें मैन्युअल प्रवेश किए बिना:

  • कंसोल में आप AJAX प्रतिक्रिया का यूआरएल देख सकते हैं।
  • प्रतिक्रिया का विस्तार करने और विवरण देखने के लिए त्रिकोण पर क्लिक करें।
  • विवरण में JSON टैब पर क्लिक करें।
  • आप विस्तार त्रिकोण के साथ व्यवस्थित प्रतिक्रिया डेटा देखेंगे।

इस विधि एक जोड़े को अधिक क्लिक ले डेटा पर प्राप्त करने के लिए, लेकिन अपने वास्तविक जावास्क्रिप्ट में किसी भी अतिरिक्त आवश्यकता नहीं है और कंसोल से बाहर Firebug में आपका ध्यान बदलाव नहीं करता है (console.log का उपयोग कर एक लिंक बनाता है फायरबग के डीओएम अनुभाग में, आपको बाद में कंसोल पर क्लिक करने के लिए मजबूर करना)।

मेरे पैसे के लिए मैं कुछ और बार क्लिक करता हूं जब मैं लॉग के साथ गड़बड़ की बजाय निरीक्षण करना चाहता हूं, खासकर जब कंसोल को कोई अतिरिक्त क्रॉफ्ट नहीं जोड़कर साफ रखता है।

15

कैसे की तरह कुछ के बारे में:

<script src='http://code.jquery.com/jquery-latest.js'></script> 

function print_r(o){ 
return JSON.stringify(o,null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;'); } 
+0

एक बहुत अच्छा जवाब वास्तव में अगर कोई console.log से नफरत करता है :) – Gogol

6

मैं एक jQuery प्लगइन

<pre> 
<?php echo print_r($data) ?> 
</pre> 

आप इसे डाउनलोड कर सकते हैं के बराबर के लिए https://github.com/tomasvanrijsse/jQuery.dump

+0

मैंने आपके कोड को संशोधित किया: आपके कोड आउटपुट को div से अटैच करने की आवश्यकता है। लेकिन इस समारोह के साथ मैं स्ट्रिंग और ऑब्जेक्ट दोनों कंसोल पर प्रदर्शित करने में सक्षम हो सकता हूं। फ़ंक्शन प्रिंट (वेरिएबल) { यदि (टाइपफ़ चर == 'ऑब्जेक्ट') { $ .each (चर, फ़ंक्शन (कुंजी, तत्व) { console.log ('' key + '=>' element + ""); }); } अन्य { console.log ('' + variable + ""); } } – ShivarajRH

+0

क्या आप https://github.com/tomasvanrijsse/jQuery.dump – Tomas

+0

पर पुल अनुरोध भेज सकते हैं मैंने पुल अनुरोध भेजा था। :-) – ShivarajRH

-1

देखो पर इस पर कर दिया है: http://phpjs.org/functions/index और print_r के लिए खोजें या firebug के साथ console.log() का उपयोग करें।

6
$.each(myobject, function(key, element) { 
    alert('key: ' + key + '\n' + 'value: ' + element); 
}); 

यह मेरे लिए काम करता है। :)

+0

यह बहु-आयामी वस्तुओं के साथ काम नहीं करेगा। –

+0

हम्म जो सच हो सकता है, लेकिन आप जटिल सरणी/वस्तुओं के लिए console.log का उपयोग क्यों नहीं करते? – Gogol

+0

यदि आप अभी भी ऐसा करना चाहते हैं (यह मानते हुए कि आपको वास्तव में डिबगिंग के बजाय कोडिंग के लिए इसकी आवश्यकता है), तो आपको नेस्टेड फोरैच स्टेटमेंट की आवश्यकता हो सकती है, जो वास्तव में कुछ समय पर जटिल हो सकती है: पी – Gogol

संबंधित मुद्दे