Jsfiddle के अंदर कंसोल कैसे प्राप्त करें

104

मुझे JSfiddle.com पर एक बेला में दिखाने के लिए कंसोल कैसे मिल सकता है?

मैंने हाल ही में एक फिडल देखा है जिसमें फिडल में कंसोल सन्निहित था, किसी को पता है कि यह कैसे किया जा सकता है?

javascript console jsfiddle

— एडम बुकानन स्मिथ
स्रोत

2

किसी भी मौका है कि बेला कुछ इस तरह से किया? jsfiddle.net/FL4XL

— JonSG

3

@VtoCorleone यह वही है जो मैं चाहता था कि jsfiddle.net/c42vd3m9/1 CodeBroJohn ने इसका उत्तर दिया। सुपर उपयोगी

— एडम बुकानन स्मिथ

1

मैं इस प्रश्न को ऑफ-टॉपिक के रूप में बंद करने के लिए मतदान कर रहा हूं क्योंकि यह एक वेब सेवा के बारे में है

— इवान कैरोल

1

@ EvanCarroll JS Fiddle एक सॉफ्टवेयर टूल है जो आमतौर पर प्रोग्रामर द्वारा उपयोग किया जाता है इसलिए यह इस साइट पर विषय पर है। संदर्भ। सहायता केंद्र ।

— रुबेन

1

यह प्रश्न पर्याप्त रूप से स्पष्ट नहीं है जब मैंने इसे खोजा था, मैं सिर्फ जावास्क्रिप्ट समाधान चाहता था, न कि एक विशिष्ट लाइब्रेरी कंसोल जो jQuery का उपयोग कर रहा था। यह बुरी चीज़ नहीं है; हालाँकि, शायद आपके प्रश्न के संदर्भ में jsfiddle संदर्भ जैसी अधिक जानकारी शामिल हो।

— डाल्टन

74

जावास्क्रिप्ट पैनल का विस्तार करें
JQuery एज का चयन करें
फायरबग लाइट का चयन करें ।

जिसे परिणाम टैब के निचले भाग में एक इनलाइन कंसोल जोड़ना चाहिए

— CodeBroJohn
स्रोत

19

इसे बस इसमें शामिल किया जाना चाहिए कि फायरबग लाइट विकल्प को देखने के लिए आपको अपने जावास्क्रिप्ट को jQuery एज लाइब्रेरी या jQuery के सबसेट का उपयोग करने के लिए सेट करना होगा, अन्यथा यह आसानी से दिखाई नहीं देगा।

— टोपे

4

यदि आप JQuery का उपयोग नहीं करना चाहते हैं, तो उत्तर बलो एक बेहतर समाधान की तरह दिखता है।

— रॉबर्ट

इस समाधान के लिए आपको jQuery का उपयोग करने की आवश्यकता है, न कि वेनिला जावास्क्रिप्ट की।

— डाल्टन

95

बहुत आसान है ..

उदाहरण

GitHub

बस jsfiddle में बाहरी संसाधन के लिए निम्न URL जोड़ें, आपको परिणाम स्क्रीन में कंसोल.लॉग और कंसोल.रोर दिखाई देगा।

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js

— user1855278
स्रोत

मैं इस के लिए देख रहा था और यह काम करता है। यद्यपि [ऑब्जेक्ट ऑब्जेक्ट] के बजाय लॉग में ऑब्जेक्ट ग्राफ को देखने के लिए, बस F12 दबाएं और ब्राउज़र कंसोल में लॉग देखें।

— cirovladimir

1

महान! हालाँकि यह अभी भी बदसूरत [ऑब्जेक्ट ऑब्जेक्ट] को प्रिंट कर रहा है और यह नेस्टेड ऑब्जेक्ट्स के लिए तीन डॉट्स प्रिंट करता है। फिर भी यह कुछ मामलों में बहुत मददगार है। मैं हालांकि अब वेब ब्राउज़र कंसोल का उपयोग कर रहा हूं।

— cirovladimir

यह केवल खाली HTML (केवल जावास्क्रिप्ट) के लिए सही है

— ng10 10

32

जावास्क्रिप्ट के बगल में उस तीर पर क्लिक करें
और फ्रेमवर्क और विस्तार के रूप में नो-लिबरी (शुद्ध जेएस) का चयन करें
अपने console.log('foo');जेएस बॉक्स में पेस्ट करें
संसाधनों के तहत जोड़ेंhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
- या: संसाधन जोड़ के तहतhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
और उस प्ले बटन पर अपनी स्क्रिप्ट चलाएं

— player0
स्रोत

3

Gif वास्तव में उपयोगी है।

— एलेक्समेल्व

1

@ रुबेन, सिवाय इसके कि यह जवाब शीर्ष वोट देने से पहले दिखाई दिया, इसलिए वह श्रेय के हकदार हैं! + जिफ वास्तव में मदद करता है !!

— अंशुमान मनराल

15

मुझे जावास्क्रिप्ट गियर विकल्प में फायरबग एक्सटेंशन का चयन करने के लिए कोई विकल्प नहीं मिला, और मैं बाहरी लिंक / लाइब्रेरी जोड़ना नहीं चाहता था, लेकिन एक और सरल उपाय है।

आप अपने ब्राउज़र के कंसोल में निर्मित का उपयोग कर सकते हैं

— अमृत गौतम
स्रोत

1

मुझे यह देखकर आश्चर्य हुआ कि यह उत्तर कैसे अस्वीकृत है। जवाब बहुत यथार्थवादी, सरल और गैर बेमानी लगता है। कोई स्पष्टीकरण ?? कम से कम, मैं अन्य विकल्पों और संभावित समाधानों का सुझाव देने की कोशिश कर रहा हूं।

— अमृत गौतम

1

मुझे खेद है कि डाउनवोट आपके लिए परेशान है। डाउनवोट का आपके तरीके से कोई लेना-देना नहीं है - यह इसलिए है क्योंकि यह सवाल का जवाब नहीं है। यह एक विकल्प का सुझाव है और यह ओपी प्रश्न के लिए एक टिप्पणी के रूप में बेहतर होगा। जब तक आप उत्तर को अपडेट नहीं करते हैं मैं तब तक डाउनवोट नहीं निकाल सकता हूं और मैं केवल इसे हटा दूंगा यदि अपडेट ने इस सवाल का जवाब दिया या कारणों का एक उचित सेट प्रदान किया कि क्यों यह विधि ओपी के लिए पूछे जाने पर एक व्यवहार्य विकल्प है।

— विलियम पैटन

कंसोल में निर्मित ब्राउज़र का उपयोग करते हुए, मैं console.log()आपके द्वारा प्रदर्शित किए गए परिणामों को देख सकता हूं , लेकिन मैं अभी भी jffield में चर के साथ बातचीत नहीं कर सकता। इसे करने का कोई तरीका है?

— क्रुबो

2

अपवोट, क्योंकि मुझे

— फायरबग

1

@AshshumanManral मुझे इस बात की कोई परवाह नहीं है कि समाधान कब तक और कहां होने वाला है। हालांकि मुझे नीचा दिखाने का कोई कारण नहीं दिखता है!

— अमृत गौतम

14

ठीक काम करता है ... यहाँ

var consoleLine = "<p class=\"console-line\"></p>";

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
console.log("Hello Console")

— फर्नांडो
स्रोत

1

आपके उत्तर के लिए धन्यवाद, आपका उत्तर शाब्दिक रूप से उत्तर देता है कि मैं क्या पूछ रहा था, लेकिन मैं अपने प्रश्न पर स्पष्ट नहीं था, इसलिए मैं आपको एक प्लस 1 दूंगा, यहाँ एक फील की लिंक है जो दिखाता है कि मैं jsfiddle.net के

— एडम बुकानन स्मिथ

3

उपरोक्त समाधानों में से किसी ने भी मेरे लिए काम नहीं किया, क्योंकि मुझे Vue .js. में प्रतिक्रियाशीलता का परीक्षण करते समय गतिशील रूप से एक चर सेट करने में सक्षम होने के लिए एक इंटरैक्टिव कंसोल की आवश्यकता थी।

इसलिए मैंने कोडपेन पर स्विच किया , जिसमें एक इंटरैक्टिव कंसोल है जो आपके एप्लिकेशन पर स्कूप किया गया है ।

— न्यूड
स्रोत

मैंने यह भी देखा कि मैं jQuery और Js Fiddle में देशी ब्राउज़र कंसोल का उपयोग करके DOM के साथ बातचीत करने में असमर्थ था। CodePen के साथ मैं देशी कंसोल को खोलने और jQuery के चयनकर्ताओं का उपयोग करके अपने HTML तत्वों का चयन करने में सक्षम था।

— एनफ्लोरिया

3

किसी वेब पेज के अंदर वर्चुअल कंसोल एम्बेड करने के कई तरीके हैं ...

1. फायरबग लाइट डिबगर ^डेमो

Firebug Lite की निम्न स्क्रिप्ट शामिल करें, जो raw.githack.com के माध्यम से दी गई है :

https://rawcdn.githack.com/firebug/firebug-lite/firebug1.5/build/firebug-lite-debug.js

2. स्टैक स्निपेट्स वर्चुअल कंसोल ^डेमो

Stack Snippets में प्रयुक्त / यू / कैनन से निम्न स्क्रिप्ट शामिल करें :

https://stacksnippets.net/scripts/snippet-javascript-console.min.js

3. jsFiddle कंसोल ^डेमो जोड़ें

से निम्न स्क्रिप्ट को शामिल करें eu81273 , के माध्यम से प्रस्तुत raw.githack.com :

https://raw.githack.com/eu81273/jsfiddle-console/master/console.js

4. रोल यू ओन ओन

यहां एक तुच्छ कार्यान्वयन है जो मौजूदा console.logकॉल को लपेटता है और फिर उपयोग किए जाने वाले पूर्वनिर्धारित तर्कों को हटा देता हैdocument.write :

var oldLog = window.console.log
window.console.log = function(...args) {
    document.write(JSON.stringify(args, null, 2));
    oldLog.apply(this, args);
}

console.log("String", 44, {name: "Kyle", age: 30}, [1,2,3])

स्निपेट का विस्तार करें

आगे की पढाई

JsFiddle में वार प्रिंट करें

— KyleMit
स्रोत

1

भविष्य के संदर्भ के लिए: उत्तर से jsfiddle-कंसोल वास्तव में वही था जो मुझे जावास्क्रिप्ट पर एक कक्षा को पढ़ाते समय चाहिए था। हालाँकि मैंने पाया कि इस स्थिति में किसी भी वास्तविक उपयोग के लिए यह बहुत सीमित है। इसलिए मैंने अपना खुद का बना लिया।

शायद यह यहां किसी की सेवा करेगा।

बस CDN- संस्करण को jsFiddle के संसाधनों में जोड़ें:

https://unpkg.com/html-console-output

यहाँ उदाहरण: https://jsfiddle.net/Brutac/e5nsp2mu/

गिटहब: https://github.com/karimayachi/html-console-output

— करीम अयाची
स्रोत

0

मुझे पार्टी के लिए देर हो सकती है लेकिन बस यह उल्लेख करना चाहता था कि JSfiddle ने अभी नया कंसोल फीचर जारी किया है। यदि यह आपके लिए काम नहीं करता है तो बस इसे सेटिंग में चालू करें।

अभी भी बीटा में लेकिन हे ... कोई और अधिक कष्टप्रद workarounds।

— Thielicious
स्रोत