জিসফিলের ভিতরে কীভাবে কনসোল পাবেন


104

আমি কীভাবে জেএসফিডাল ডটকমের একটি ফ্রিডলে দেখানোর জন্য কনসোল পেতে পারি?

আমি সম্প্রতি একটি ঝাঁকুনি দেখেছি যার মধ্যে কনসোলটি এম্বেড করা ছিল, যে কেউ কীভাবে এটি করা যেতে পারে জানেন?


2
কোনও সুযোগ যে ফিডল ঠিক এইরকম কিছু করেছিল? jsfiddle.net/FL4XL
জনএসজি

3
@ ভ্টোকর্লিয়োন এটিই আমি চেয়েছিলাম jsfiddle.net/c42vd3m9/1 কোডব্রোজন এর উত্তর দিয়েছিল। সুপার দরকারী
অ্যাডাম বুচানন স্মিথ

1
আমি এই প্রশ্নটিকে অফ-টপিক হিসাবে বন্ধ করতে ভোট দিচ্ছি কারণ এটি একটি ওয়েব পরিষেবা সম্পর্কে
ইভান ক্যারল

1
@ ইভ্যানক্রোল জেএস ফিডাল একটি সফ্টওয়্যার সরঞ্জাম যা সাধারণত প্রোগ্রামাররা ব্যবহার করে তাই এটি এই সাইটে বিষয়টিতে । সূত্র। সহায়তা কেন্দ্র
রুবান

1
এই প্রশ্নটি যথেষ্ট স্পষ্ট হয় না যখন আমি এটি অনুসন্ধান করেছি আমি কেবল একটি জাভাস্ক্রিপ্ট সমাধান চেয়েছিলাম, jQuery ব্যবহার করে কোনও নির্দিষ্ট লাইব্রেরি কনসোল নয়। এটা খারাপ কিছু না; তবে আপনার প্রশ্নের jsfiddle রেফারেন্সের মতো আরও তথ্য অন্তর্ভুক্ত করুন।
ডাল্টন

উত্তর:


74
  1. জাভাস্ক্রিপ্ট প্যানেল প্রসারিত করুন
  2. JQuery এজ নির্বাচন করুন
  3. ফায়ারব্যাগ লাইট নির্বাচন করুন ।

সেটিংসের উদাহরণ

ফলাফল ট্যাবের নীচে একটি ইনলাইন কনসোল যুক্ত করা উচিত

আউটপুট উদাহরণ


19
এটি কেবলমাত্র অন্তর্ভুক্ত করা উচিত যে আপনার ফায়ারব্যাগ লাইট অপশনটি দেখতে জাভাস্ক্রিপ্ট jQuery প্রান্ত লাইব্রেরি বা jQuery এর একটি উপসেট ব্যবহার করতে হবে, অন্যথায় এটি সহজে দেখাবে না।
বৌদ্ধস্তূপ

4
আপনি JQuery ব্যবহার না করতে চাইলে উত্তর বেলো আরও ভাল সমাধান বলে মনে হচ্ছে।
রবার্ট

এই সমাধানটির জন্য আপনার ভিনিলা জাভাস্ক্রিপ্ট নয়, jQuery ব্যবহার করা প্রয়োজন।
ডাল্টন

95

খুব সহজ এক ..

উদাহরণ

GitHub

কেবলমাত্র jsfiddle এর বাহ্যিক সংস্থানগুলিতে নিম্নলিখিত URL টি যুক্ত করুন, আপনি ফলাফলের স্ক্রিনে কনসোল.লগ এবং কনসোল.অরর দেখতে পাবেন।

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

আমি এটি খুঁজছিলাম এবং এটি কাজ করে। লগটিতে অবজেক্ট গ্রাফটি দেখতে, [অবজেক্ট অবজেক্ট] এর পরিবর্তে, কেবল F12 চাপুন এবং ব্রাউজার কনসোলে লগগুলি দেখুন।
cirovladimir

1
মহান! যদিও এটি এখনও কুৎসিত [অবজেক্ট অবজেক্ট] মুদ্রণ করছে এবং এটি নেস্টেড বস্তুর জন্য তিনটি বিন্দু মুদ্রণ করে। তবুও এটি কিছু ক্ষেত্রে খুব সহায়ক। যদিও এখন ওয়েব ব্রাউজার কনসোলটি ব্যবহার করছি।
চিরোভ্লাদিমির

এটি কেবল খালি এইচটিএমএল (কেবল জাভাস্ক্রিপ্ট) এর জন্য সত্য
এনজি 10

32
  • জাভাস্ক্রিপ্টের পাশের সেই তীরটিতে ক্লিক করুন
  • এবং হিসাবে অবকাঠামো & এক্সটেনশনস নির্বাচন কোন-Libary (বিশুদ্ধ জাতীয়)
  • আপনার console.log('foo');জেএস বক্সে পেস্ট করুন
  • অধীনে সম্পদ অ্যাডhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
    • বা: অধীন সম্পদ অ্যাডhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
  • এবং আপনার স্ক্রিপ্টটি সেই প্লে বোতামটি চাপুন


3
GIF সত্যিই সহায়ক।
অ্যালেক্সমেলউ 14:38

1
@ রুবেন, বাদে এই উত্তরটি শীর্ষে ভোট দেওয়ার আগে উপস্থিত হয়েছিল যাতে creditণের প্রাপ্য! + জিআইএফ সত্যিই সাহায্য করে !!
আনশুমান ম্যানরাল

15

আমি জাভাস্ক্রিপ্ট গিয়ার বিকল্পে ফায়ারব্যাগ এক্সটেনশানটি নির্বাচনের জন্য কোনও বিকল্প খুঁজে পাইনি এবং আমি বাহ্যিক লিঙ্ক / লাইব্রেরি যুক্ত করতে চাইনি, তবে আরও একটি সহজ সমাধান রয়েছে।

আপনি আপনার ব্রাউজারের অন্তর্নির্মিত কনসোলটি ব্যবহার করতে পারেন

দেব সরঞ্জাম কনসোল


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

1
আমি দুঃখিত যে ডাউনটি আপনার জন্য খারাপ করছে। ডাউনভোট আপনার পদ্ধতির সাথে কিছুই করার নয় - কারণ এটি প্রশ্নের প্রশ্নের উত্তর নয়। এটি একটি বিকল্পের পরামর্শ এবং এটি ওপি প্রশ্নের একটি মন্তব্য হিসাবে আরও ভাল স্থান দেওয়া হবে। আপনি উত্তরটি আপডেট না করা হলে আমি ডাউনভোটটি সরিয়ে ফেলতে পারব না এবং আপডেটটি যদি এই প্রশ্নের উত্তর দেয় বা ওপি যা চেয়েছিল তার উপরে কেন এই পদ্ধতিটি একটি কার্যকর বিকল্প হিসাবে যুক্তিসঙ্গত কারণ সরবরাহ করে তবে আমি তা সরিয়ে ফেলব।
উইলিয়াম প্যাটন 21

ব্রাউজারটি কনসোলে অন্তর্নির্মিত ব্যবহার করে, console.log()আপনি যেমনটি দেখিয়েছেন তার ফলাফলগুলি দেখতে পাচ্ছি , তবে আমি এখনও জিসফিডেলে ভেরিয়েবলগুলির সাথে ইন্টারেক্ট করতে পারি না। এটা করতে কোন উপায় আছে কি?
ক্রুবো

2
আপভোট, যেহেতু আমি ফায়ারব্যাগ এক্সটেনশনের বিকল্পটি দেখতে পাচ্ছি না, এর সহজ সমাধানটি কেবল এফ 12 এ আঘাত করা
গ্যাব্রিয়েলএমএসসি

1
@ অংশুমান মনরাল সমাধানের কাজ না হওয়া পর্যন্ত আমি কখন এবং কোথায় থাকব সে সম্পর্কে আমি চিন্তা করি না। যদিও ডাউন ডাউন করার কোনও কারণ আমি দেখছি না!
অমৃত গৌতম

14

ঠিক আছে ... এখানে কাজ করে

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

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

1
আপনার উত্তরের জন্য আপনাকে ধন্যবাদ, আপনার উত্তরটি আমি যা জিজ্ঞাসা করছি তা আক্ষরিকভাবে জবাব দিয়েছে তবে আমি আমার প্রশ্নের বিষয়ে পরিষ্কার ছিলাম না, তাই আমি আপনাকে একটি সংখ্য
অ্যাডাম বুচানান স্মিথ

3

উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কাজ করেনি, যেহেতু ভ্যু.জেএসজে প্রতিক্রিয়াশীলতার পরীক্ষা করার সময় গতিশীল পরিবর্তনশীল সেট করতে সক্ষম হওয়ার জন্য আমার একটি ইন্টারেক্টিভ কনসোলের প্রয়োজন ছিল since

সুতরাং আমি কোডেপেনে স্যুইচ করেছি , যা আপনার অ্যাপ্লিকেশনটিতে একটি ইন্টারেক্টিভ কনসোল রয়েছে to

কোডপেন উদাহরণ


আমি আরও খেয়াল করেছি যে জেএস ফিডল-এ jQuery এবং নেটিভ ব্রাউজার কনসোল ব্যবহার করে আমি DOM এর সাথে ইন্টারঅ্যাক্ট করতে পারিনি। কোডপেনের সাহায্যে আমি নেটিভ কনসোলটি খুলতে এবং jQuery নির্বাচনকারীদের ব্যবহার করে আমার এইচটিএমএল উপাদানগুলি নির্বাচন করতে সক্ষম হয়েছি।
nflauria

3

যে কোনও ওয়েব পৃষ্ঠার ভিতরে ভার্চুয়াল কনসোল এম্বেড করার বিভিন্ন উপায় রয়েছে ...

1. ফায়ারব্যাগ লাইট ডিবাগার ডেমো

থেকে নিম্নোক্ত স্ক্রিপ্ট অন্তর্ভুক্ত করুন ফায়ারবাগকে লাইট মাধ্যমে পরিবেশিত raw.githack.com :

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

Firebug

২. স্নিপেটস ভার্চুয়াল কনসোল ডেমো স্ট্যাক করুন

স্ট্যাক স্নিপেটে ব্যবহৃত / u / ক্যানন থেকে নিম্নলিখিত স্ক্রিপ্টটি অন্তর্ভুক্ত করুন :

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

স্নিপেটস স্ট্যাক করুন

৩.জেফিডল কনসোল ডেমো যুক্ত করুন

Eu81273 থেকে নিম্নলিখিত লিপিটি অন্তর্ভুক্ত করুন , কাঁচা.githack.com এর মাধ্যমে পরিবেশিত :

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

jsFizz কনসোল

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])

আরও পড়া


1

ভবিষ্যতের রেফারেন্সের জন্য: জাভাস্ক্রিপ্টে কোনও ক্লাস শেখানোর সময় উত্তর থেকে জেসফিল্ড-কনসোলটি আমার ঠিক যেমনটি ছিল। তবে আমি দেখতে পেয়েছি যে এই পরিস্থিতিতে কোনও প্রকৃত ব্যবহারের জন্য এটি সীমাবদ্ধ। তাই আমি আমার নিজের তৈরি।

সম্ভবত এটি এখানে যে কারও সেবা করবে।

JsFizz এর সংস্থানগুলিতে কেবল সিডিএন-সংস্করণ যুক্ত করুন:

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

উদাহরণ এখানে: https://jsfiddle.net/Brutac/e5nsp2mu/

গিটহাব: https://github.com/karimayachi/html-console- আউটপুট


0

আমি পার্টিতে দেরি করতে পেরেছিলাম তবে কেবল উল্লেখ করতে চেয়েছিলাম যে জেএসফিডাল সবেমাত্র নতুন কনসোল বৈশিষ্ট্য প্রকাশ করেছে। এটি যদি আপনার পক্ষে কাজ না করে তবে সেটিংসে এটি চালু করুন।

এখানে চিত্র বর্ণনা লিখুন

এখনও বিটাতে আছে তবে আরে ... আর বিরক্তিকর কাজ নেই।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.