ব্রাউজারের ডিবাগারে নিজেই কীভাবে গতিসম্পন্ন লোভিত জাভাস্ক্রিপ্ট (jQuery সহ) ডিবাগ করবেন?


92

একটি গতিশীল যুক্ত-লিখিত স্ক্রিপ্ট ব্রাউজারের ডিবাগারের স্ক্রিপ্ট বিভাগে প্রদর্শিত হচ্ছে না।

ব্যাখ্যা:

আমার ব্যবহার এবং ব্যবহার করা দরকার

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

যাতে কোনও শর্ত পূরণের ক্ষেত্রে মাইস্ক্রিপ্ট.জেএসকে গতিশীলভাবে লোড করা যায় ... এবং সম্পূর্ণ স্ক্রিপ্ট লোড করার পরেই মাই ফাংশনটি কল করা যেতে পারে ...

তবে ব্রাউজারগুলি তাদের ডিবাগরের স্ক্রিপ্ট বিভাগে গতিশীল লোড হওয়া MyScript.js দেখাচ্ছে না।

অন্য কোনও রাউন্ড রয়েছে যাতে সমস্ত লক্ষ্য অর্জন করা যেতে পারে যা ব্রাউজারে নিজেই একটি গতিশীল লোড স্ক্রিপ্ট ডিবাগ করতে সক্ষম করে তোলে?



4
debugger;গতিশীল লোড স্ক্রিপ্টে স্বয়ংক্রিয় থামানোর জন্য ব্যবহার করুন , javascript.info/debugging-chrome দেখুন
ইয়ং জিয়ান

উত্তর:


208

আপনি আপনার গতিশীল লোড হওয়া স্ক্রিপ্টটিকে একটি নাম দিতে পারেন যাতে এটি Chrome / ফায়ারফক্স জাভাস্ক্রিপ্ট ডিবাগারে প্রদর্শিত হয়। এটি করার জন্য আপনি স্ক্রিপ্টের শেষে একটি মন্তব্য দিন:

//# sourceURL=filename.js

এই ফাইলটি তখন "উত্স" ট্যাবে প্রদর্শিত হবে filename.js। আমার অভিজ্ঞতায় আপনি নামটি ব্যবহার করতে পারেন তবে / / গুলি ব্যবহার করলে আমি বিজোড় আচরণ পাব।

আরও তথ্যের জন্য দেখুন: // @ উত্সurl এর গতিশীল জাভাস্ক্রিপ্ট অবমূল্যায়নের ব্রেকপয়েন্টগুলি


19
মনে রাখবেন যে এটি // # তে পরিবর্তিত হয়েছে, যদিও // @ এখনও ক্রোমে কাজ করে। .Html ফাইলগুলিতে স্ক্রিপ্টগুলিও একইভাবে নামকরণ করা যায়। সাবধান হও! '=' চিহ্নের আগে এবং পরে কোনও ফাঁকা স্থান ছেড়ে যাবেন না।
Mert Mertce

11
আমার জন্য, জেএস ফাইলটি "(কোনও ডোমেন নেই)" নামে একটি গোষ্ঠীর মধ্যে উত্স তালিকায় প্রদর্শিত হচ্ছে। আমি প্রথমে এটি মিস হিসাবে উল্লেখযোগ্য হতে পারে!
জেম্যাক

7
শুধু একটি টিপ। ক্রোম ডিবাগার এই সিউডো-জাভাস্ক্রিপ্ট ফাইলগুলিকে উত্স ট্যাবে "(কোনও ডোমেন নয়)" নোড উপাদানটিতে ফেলে দেয়, কমপক্ষে লোকালহোস্টে ডিবাগ করার সময়। সেখানেই আমি তাদের খুঁজে পেয়েছি।
রবার্ট অসলারের

4
সতর্কতা অবলম্বন করার আরেকটি বিষয় হ'ল কমেন্ট স্টাইল। আপনি যে "/ / @ সোর্স URL- এর অবমূল্যায়ন" লিঙ্কটিতে "// # উত্স URL =" এবং "/ * # উত্স URL =" উভয়ই উল্লেখ করেছেন। কারণ এটি সিএসএসের জন্যও ব্যবহার করা যেতে পারে, যেখানে আপনাকে ব্লক মন্তব্যগুলি ব্যবহার করতে হবে, কারণ একক-লাইন "//" মন্তব্যগুলি বৈধ নয়। আমাকে অবাক করে দিয়েছিল যে আপনি জাভাস্ক্রিপ্টে "/ * উত্স URL =" ব্যবহার করতে পারবেন না। এটি কেবল উপেক্ষা করা হয়।
জুলস

4
আফাক, বেশিরভাগ জাভাস্ক্রিপ্ট মিনিফায়ারগুলি উত্পাদনের স্তরগুলি থেকে এই লাইনগুলি সরিয়ে দেয়, এটি কোনও প্রোডাক্ট বাগ নির্ণয়ের জন্য অকেজো করে তোলে।
লুলুস সুওল

16

আপনি ব্যবহার করতে পারেন //# sourceURL=এবং //# sourceMappingURL=আপনার স্ক্রিপ্ট ফাইল বা স্ক্রিপ্ট ট্যাগের শেষে।

দ্রষ্টব্য: //@ sourceURL এবং //@ sourceMappingURLহ্রাস করা হয়েছে।



অবশ্যই, তবে আফিক সর্বাধিক মিনিফায়ারগুলি উত্পাদন পর্যায়ে এই লাইনগুলি সরিয়ে ফেলবে।
ল্লু সুসোল

13

আমি "// # উত্স URL = filename.js" ব্যবহার করার চেষ্টা করেছি যা ওপি কর্তৃক প্রস্তাবিত প্রস্তাবিত হয়েছিল, তবে এটি পূর্ববর্তী সময় থেকে আমার ট্যাবগুলিতে ইতিমধ্যে উপস্থিত না থাকলে সোর্স প্যানেলে এটি আমার জন্য প্রদর্শিত হবে না when এটি একটি ব্যতিক্রম ঘটেছে।

একটি "ডিবাগার" কোডিং; লাইন এটিকে সেই জায়গায় ভাঙতে বাধ্য করে। তারপরে এটি একবার সোর্স প্যানেলে আমার ট্যাবগুলিতে থাকলে আমি স্বাভাবিকের মতো ব্রেকপয়েন্টগুলি সেট করতে এবং "ডিবাগার" সরাতে পারি; লাইন


6
এটি উত্স ট্যাবের অধীনে (কোনও ডোমেন নেই) তালিকাতেও প্রদর্শিত হতে পারে।
স্প্লাক্টর

4
আমারও ব্যবহারের দরকার debugger;ছিল এবং স্ক্রিপ্টটি লোড করার সময় দেবটুলগুলি খোলা থাকতে হয়েছিল।
বারমার

4
কিছুটা অতিরিক্ত তথ্য: ব্রাউজারটুলস: // প্রোটোকল হিসাবে ব্যবহার করুন //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js
ডলবাইসুরেন্ড

6

লক্ষ্য করুন যে উত্স ফাইলটিতে উত্স ফাইলটি এইভাবে উপস্থিত হবে (কোনও ডোমেন নেই) গ্রুপে উপস্থিত হবে এবং আপনি যদি এটি ডিবাগ করতে চান তবে আপনাকে debugger;আপনার কোডে একটি লাইন যুক্ত করতে হবে , সেই লাইনটি কার্যকর করতে হবে (সাধারণত আপনার উত্স ফাইলটির কার্যকরকরণের সূচনা) এবং তারপরে আপনি যেখানে চান সেখানে আপনার ব্রেকপয়েন্টগুলি যুক্ত করুন।

আপনি যদি উত্পাদনের পর্যায়ে ডিবাগ করছেন, যেখানে debugger;আপনার কোডে সম্ভবত কোনও লাইন থাকবে না , আপনি চার্লসপ্রক্সির সাথে স্থানীয় "ম্যাপটি ডিবাগার লাইনের সাথে উত্স ফাইলটির নতুন কপি" দিয়ে একটি স্থানীয় মানচিত্র করে এটি করতে পারেন।


4
এই আমাকে বাঁচায়! আমি যা করেছি তা বিবেচনা না করে, আমি একটি ডিবাগার কমান্ড না দেওয়া পর্যন্ত ফাইলটি প্রদর্শিত হবে না। এর পরে এটি পৃষ্ঠার পুনরায় লোডগুলি এবং ডিবাগিং সেশনগুলি জুড়ে রেখেছিল এমনকি আমি ডিবাগার কমান্ড সরিয়ে দেওয়ার পরেও।
মাইক দেবেনি

0

আইই-তে এই ধরণের জিনিসটি ট্র্যাক করার চেষ্টা করার সময় আমি ডিভাইসগুলি (এফ 12) খুলি এবং তারপরে কনসোলে নিম্নলিখিত লাইনটি ব্যবহার করে ব্রেকপয়েন্টটি কোথায় রাখব তা সন্ধান করি:

debugger;myFunction();

এটি ডিবাগার ট্যাবে স্যুইচ করে যেখানে আপনি প্রবেশ করতে পারেন myFunction()এবং ব্রেকপয়েন্টটি সেট করতে পারেন ।

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