আমি কীভাবে আমার জাভাস্ক্রিপ্ট কোডটি ডিবাগ করতে পারি? [বন্ধ]
উত্তর:
এই উদ্দেশ্যে ফায়ারব্যাগ অন্যতম জনপ্রিয় সরঞ্জাম।
সমস্ত আধুনিক ব্রাউজারগুলি কোনও বিল্ট-ইন জাভাস্ক্রিপ্ট ডিবাগিং অ্যাপ্লিকেশনটির কোনও ফর্ম নিয়ে আসে। এগুলির বিবরণ প্রাসঙ্গিক প্রযুক্তি ওয়েব পৃষ্ঠাগুলিতে coveredাকা যাবে। জাভাস্ক্রিপ্ট ডিবাগ করার জন্য আমার ব্যক্তিগত পছন্দটি ফায়ারফক্সে ফায়ারব্যাগ । আমি বলছি না যে ফায়ারব্যাগ অন্য যে কোনটির চেয়ে ভাল; এটি আপনার ব্যক্তিগত পছন্দ উপর নির্ভর করে এবং সম্ভবত আপনার ব্রাউজারে আপনার সাইটটি পরীক্ষা করা উচিত (আমার ব্যক্তিগত পছন্দ সর্বদা ফায়ারব্যাগ) is
আমি উদাহরণস্বরূপ ফায়ারব্যাগ ব্যবহার করে নীচের কয়েকটি উচ্চ-স্তরের সমাধানগুলি কভার করব :
ফায়ারফক্স
ফায়ারফক্স তার নিজস্ব ইনবিল্ট জাভাস্ক্রিপ্ট ডিবাগিং সরঞ্জাম নিয়ে আসে তবে আমি আপনাকে ফায়ারব্যাগ অ্যাড ইনস্টল করার পরামর্শ দিচ্ছি । এটি ব্যবহারযোগ্য বেসিক সংস্করণের উপর ভিত্তি করে বেশ কয়েকটি অতিরিক্ত বৈশিষ্ট্য সরবরাহ করে। আমি এখানে শুধুমাত্র ফায়ারব্যাগ সম্পর্কে কথা বলতে যাচ্ছি।
ফায়ারব্যাগ ইনস্টল হয়ে গেলে আপনি নীচের মতো এটিতে অ্যাক্সেস করতে পারবেন:
প্রথমত আপনি যদি কোনও উপাদানটিতে ডান ক্লিক করেন তবে আপনি ফায়ারব্যাগের সাহায্যে উপাদানটি পরিদর্শন করতে পারেন :
এটি ক্লিক করলে ব্রাউজারের নীচে ফায়ারব্যাগ ফলকটি খুলবে:
ফায়ারব্যাগ বেশ কয়েকটি বৈশিষ্ট্য সরবরাহ করে তবে আমরা যার মধ্যে আগ্রহী তা হ'ল স্ক্রিপ্ট ট্যাব। স্ক্রিপ্ট ট্যাবে ক্লিক করা এই উইন্ডোটি খুলবে:
স্পষ্টতই, ডিবাগ করার জন্য আপনাকে পুনরায় লোড ক্লিক করতে হবে :
আপনি এখন যোগ করতে পারেন ব্রেকপয়েন্ট জাভাস্ক্রিপ্ট কোড আপনাকে ব্রেকপয়েন্ট যোগ করতে চান টুকরা বাঁদিকে লাইন ক্লিক করে:
আপনার ব্রেকপয়েন্টটি যখন আঘাত করা হবে তখন এটি নীচের মত দেখাচ্ছে:
আপনি ঘড়ির ভেরিয়েবলগুলি যুক্ত করতে পারেন এবং একটি আধুনিক ডিবাগিং সরঞ্জামে আপনি যা আশা করতে পারেন তা সাধারণত করতে পারেন।
ফায়ারব্যাগে দেওয়া বিভিন্ন অপশন সম্পর্কে আরও তথ্যের জন্য, ফায়ারব্যাগ এফএকিউ দেখুন ।
ক্রৌমিয়াম
Chrome এর নিজস্ব অন্তর্নির্মিত জাভাস্ক্রিপ্ট ডিবাগিং বিকল্প রয়েছে যা একটি খুব অনুরূপ উপায়ে কাজ করে, ডান ক্লিক করুন, উপাদান পরিদর্শন করুন ইত্যাদি । কটাক্ষপাত আছে ক্রোম বিকাশকারী সরঞ্জামসমূহ । আমি সাধারণত ক্রোমে ফায়ারব্যাগের চেয়ে স্ট্যাকের চিহ্নগুলি খুঁজে পাই ।
ইন্টারনেট এক্সপ্লোরার
আপনি উন্নয়নশীল থাকেন .NET ও ওয়েব ডেভেলপমেন্ট এনভায়রনমেন্ট ব্যবহার ভিসুয়াল স্টুডিও ব্যবহার করে আপনি যেমন যদি আপনি আপনার সি # বা ডিবাগ করা হয়েছে স্থাপন ব্রেকপয়েন্ট, ইত্যাদি আপনার জাভাস্ক্রিপ্ট কোড সৌন্দর্য ঠিক একই সরাসরি জাভাস্ক্রিপ্ট কোড ডিবাগ করতে পারেন VB.NET কোড।
আপনার যদি এটি না থাকে তবে ইন্টারনেট এক্সপ্লোরার উপরে বর্ণিত সমস্ত সরঞ্জাম সরবরাহ করে। বিরক্তিকরভাবে, ক্রম বা ফায়ারফক্সের উপাদান বৈশিষ্ট্যগুলি ডান ক্লিক করার পরিবর্তে , আপনি F12 টিপে বিকাশকারী সরঞ্জামগুলিতে অ্যাক্সেস করতে পারেন । এই প্রশ্নটি বেশিরভাগ পয়েন্টকে অন্তর্ভুক্ত করে।
- ইন্টারনেট এক্সপ্লোরার 8 (বিকাশকারী সরঞ্জাম - F12)। ইন্টারনেট এক্সপ্লোরার জমিতে আর কিছু হ'ল rate
- ফায়ারফক্স এবং ফায়ারব্যাগ । F12প্রদর্শন করতে আঘাত ।
- সাফারি (মেনু বার, পছন্দসমূহ -> উন্নত -> বিকাশ মেনু বার দেখান )
- গুগল ক্রোম জাভাস্ক্রিপ্ট কনসোল ( F12বা ( Ctrl+ Shift+ J))। বেশিরভাগ ক্ষেত্রেই সাফারি একই ব্রাউজার, তবে সাফারি ভাল আইএমএইচও।
- অপেরা ( সরঞ্জাম -> উন্নত -> বিকাশকারী সরঞ্জাম )
জাভাস্ক্রিপ্টে একটি ডিবাগার কীওয়ার্ড রয়েছে জাভাস্ক্রিপ্ট কোডটি ডিবাগ করার জন্য। ডিবাগার রাখুন ; আপনার জাভাস্ক্রিপ্ট কোড স্নিপেট। এটি স্বয়ংক্রিয়ভাবে সেই সময়ে জাভাস্ক্রিপ্ট কোডটি ডিবাগ করা শুরু করবে।
উদাহরণ স্বরূপ:
মনে করুন এটি আপনার টেস্ট.জেএস ফাইল
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();- ব্রাউজারটি সক্ষম ডিবাগার দিয়ে বিকাশকারী বিকল্পে ওয়েব পৃষ্ঠাটি চালায়, তখন এটি স্বয়ংক্রিয়ভাবে ডিবাগার থেকে ডিবাগিং শুরু করে ; বিন্দু।
- ব্রাউজারটি বিকাশকারী উইন্ডোটি খুলতে হবে।
আমি পুরানো ভাল ব্যবহার printf পদ্ধতির (একটি প্রাচীন কৌশল যা যে কোনও সময় ভালভাবে কাজ করবে)।
ম্যাজিক তাকান %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);%oক্লিকযোগ্য এবং গভীর-ব্রাউজযোগ্য, জেএস অবজেক্টের সুন্দর-মুদ্রিত সামগ্রী ডাম্প করুন । %sকেবল একটি রেকর্ডের জন্য দেখানো হয়েছিল।
এবং এই:
console.log("%s", new Error().stack);new Error()অনুরোধের বিন্দুতে আপনাকে ফাইলের মতো জাভা-জাতীয় স্ট্যাক ট্রেস দেয় ( ফাইল এবং লাইন নম্বরের পথ সহ !!)।
উভয়ই %oএবং new Error().stackক্রোম এবং ফায়ারফক্সে উপলভ্য।
এই জাতীয় শক্তিশালী সরঞ্জামগুলির সাহায্যে আপনি আপনার জেএসে যা ভুল হচ্ছে তা অনুমান করেন, ডিবাগ আউটপুট রাখুন ( ifডেটার পরিমাণ হ্রাস করতে বিবৃতিতে মোড়ানো ভুলবেন না ) এবং আপনার অনুমানটি যাচাই করুন। সমস্যা সমাধান করুন বা নতুন অনুমান করুন বা বিট সমস্যার জন্য আরও ডিবাগ আউটপুট রাখুন।
স্ট্যাক ট্রেস ব্যবহারের জন্যও:
console.trace();কনসোল হিসাবে
শুভ হ্যাকিং!
ফায়ারব্যাগ এবং আই ডিবাগার দিয়ে শুরু করুন।
যদিও জাভাস্ক্রিপ্টে ডিবাগারগুলির সাথে সাবধান হন। প্রতিবার একবারে তারা আপনার পরিবেশটি ডিবাগ করার চেষ্টা করছে এমন কিছু ত্রুটি ঘটাতে যথেষ্ট পরিমাণ পরিবেশকে প্রভাবিত করবে।
উদাহরণ:
ইন্টারনেট এক্সপ্লোরারের জন্য এটি সাধারণত ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে। আধ ঘন্টা বা তার পরে আমার আবার চালু করা দরকার। এটি মোটামুটি নিয়মিত মনে হচ্ছে।
ফায়ারব্যাগের জন্য এটি সম্ভবত এক বছরের বেশি সময় লেগেছে তাই এটি সম্ভবত পুরানো সংস্করণ হতে পারে। ফলস্বরূপ, আমি নির্দিষ্টকরণগুলি মনে রাখিনা, তবে মূলত কোডটি সঠিকভাবে চলছিল না এবং কিছুক্ষণের জন্য এটি ডিবাগ করার চেষ্টা করার পরে আমি ফায়ারব্যাগকে অক্ষম করে দিয়েছিলাম এবং কোডটি ভাল কাজ করে।
যদিও alert(msg);এই পরিস্থিতিতে "আমি কী চলছে" তা জানতে চাই ... প্রতিটি বিকাশকারী সেই ক্ষেত্রেই মুখোমুখি হয়েছে যেখানে আপনি (খুব বড় বা অবিরাম) লুপটি শেষ করেন যা আপনি ভেঙে ফেলতে পারবেন না।
আমি প্রস্তাব দিচ্ছি যে বিকাশের সময় আপনি যদি নিজের মুখোমুখি ডিবাগ বিকল্প চান তবে একটি ডিবাগ বিকল্পটি ব্যবহার করুন যা আপনাকে ব্রেক করতে দেয়। (পিএস অপেরা, সাফারি এবং ক্রোম? সমস্ত কি তাদের নেটিভ ডায়লগে এটি উপলব্ধ আছে)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}আপনি উপরে পপআপ ডিবাগিং বৃহৎ লুপ, যেখানে টিপে আপনার স্ব পেতে পারেন Enter/ Okআপনি প্রতিটি বার্তার মাধ্যমে তিড়িং লাফ দেয়, কিন্তু টিপে Escape/ Cancelদেয় আপনি চমত্কারভাবে আউট বিরতি।
আমি ওয়েবকিটের বিকাশকারী মেনু / কনসোল ব্যবহার করি (সাফারি 4)। এটি প্রায় ফায়ারব্যাগের মতো ident
console.log()নতুন কালো - এর চেয়ে অনেক ভাল alert()।
আমার প্রথম পদক্ষেপ সবসময় এইচটিএমএল যাচাই করতে এবং বাক্য গঠন করা উচিত নয় JSLint । আপনার যদি পরিষ্কার মার্কআপ এবং বৈধ জাভাস্ক্রিপ্ট কোড থাকে তবে এটি এখন ফায়ারব্যাগ বা অন্য কোনও ডিবাগারের জন্য সময়।
ভিজ্যুয়াল স্টুডিও ২০০৮ এর কয়েকটি খুব ভাল জাভাস্ক্রিপ্ট ডিবাগিং সরঞ্জাম রয়েছে। আপনি আপনার ক্লায়েন্টের পাশের জাভাস্ক্রিপ্ট কোডটিতে একটি ব্রেকপয়েন্ট রেখে দিতে পারেন এবং ঠিক একই সরঞ্জামগুলি ব্যবহার করে আপনি সার্ভারের পাশের কোডটি ব্যবহার করতে পারেন। এটি সক্ষম করার জন্য কোনও প্রক্রিয়াতে সংযুক্ত হওয়ার বা কৌশলযুক্ত কিছু করার দরকার নেই।
আমি কয়েকটি সরঞ্জাম ব্যবহার করি: ফিডলার , ফায়ারব্যাগ এবং ভিজ্যুয়াল স্টুডিও। আমি শুনি ইন্টারনেট এক্সপ্লোরার 8 এর একটি ভাল বিল্ট-ইন ডিবাগার রয়েছে।
আমি ব্যবহার করতাম ইন্টারনেট এক্সপ্লোরার 8 বের হওয়া অবধি ফায়ারব্যাগ । আমি ইন্টারনেট এক্সপ্লোরারের বিশাল অনুরাগী নই, তবে বিল্ট-ইন বিকাশকারী সরঞ্জামগুলির সাথে কিছুটা সময় ব্যয় করার পরে, যার মধ্যে সত্যিই দুর্দান্ত ডিবাগার রয়েছে, অন্য কিছু ব্যবহার করা অর্থহীন বলে মনে হয়। আমার এই টুপিটি মাইক্রোসফ্টকে টিপতে হবে তারা এই সরঞ্জামটিতে দুর্দান্ত কাজ করেছে।
আমি পেয়েছি ইন্টারনেট এক্সপ্লোরার 8 এর নতুন সংস্করণ (প্রেস F12) জাভাস্ক্রিপ্ট কোডটি ডিবাগ করতে খুব ভাল।
অবশ্যই, ফায়ারবক্স আপনি ফায়ারফক্স ব্যবহার করলে ভাল।
ভিজ্যুয়াল স্টুডিওর জাভাস্ক্রিপ্ট ডিবাগার ব্যবহার করার পাশাপাশি, আমি আমার নিজস্ব সরল প্যানেল লিখেছিলাম যা আমি কোনও পৃষ্ঠায় অন্তর্ভুক্ত করি। এটি কেবল ভিজ্যুয়াল স্টুডিওর ইমিডিয়েট উইন্ডোর মতো । আমি আমার ভেরিয়েবলের মান পরিবর্তন করতে, আমার ফাংশনগুলিতে কল করতে এবং ভেরিয়েবলের মান দেখতে পারি। এটি কেবল পাঠ্য ক্ষেত্রে লিখিত কোডটি মূল্যায়ন করে।
ফায়ারব্যাগ এবং ব্রাউজার-নেটিভ বিকাশকারী এক্সটেনশনের পাশাপাশি জেটব্রেইনস ওয়েবস্টর্ম আইডিই ফায়ারফক্স এবং ক্রোমের জন্য দূরবর্তী ডিবাগ সমর্থন নিয়ে আসে (এক্সটেনশন প্রয়োজনীয়) এর ।
এছাড়াও সমর্থন করে:
- কফিস্ক্রিপ্ট: ওয়েবস্টর্ম source উত্স মানচিত্রের সাহায্যে নোড.জেজেসে কফিসিপিটি ডিবাগ করা যায়
- Node.js
এটি নিখরচায় পরীক্ষা করার বিকল্পগুলি হ'ল 30 টি পরীক্ষা বা একটি প্রাথমিক অ্যাক্সেস সংস্করণ ব্যবহার করা ।
আপনি ব্যবহার করে থাকেন ভিসুয়াল স্টুডিও , শুধু করা debugger;আপনি যে কোডটি ডিবাগ করতে চান উপরে। মৃত্যুদন্ডের সময় নিয়ন্ত্রণ সেই জায়গায় থামবে এবং আপনি সেখান থেকে ধাপে ধাপে ডিবাগ করতে পারবেন।
বেশিরভাগ উত্তরের মতো এটি সত্যই নির্ভর করে: আপনি আপনার ডিবাগিংটি দিয়ে কী অর্জন করার চেষ্টা করছেন? বেসিক ডেভলপমেন্ট, ফিক্সিং পারফরম্যান্স ইস্যু? বেসিক বিকাশের জন্য, পূর্ববর্তী সমস্ত উত্তরগুলি পর্যাপ্ত চেয়ে বেশি।
বিশেষত পারফরম্যান্স পরীক্ষার জন্য, আমি ফায়ারব্যাগের প্রস্তাব দিই। সময়ের পদ্ধতিতে কোন পদ্ধতিগুলি সবচেয়ে ব্যয়বহুল তা প্রোফাইলে সক্ষম হওয়া আমার পক্ষে কাজ করা বেশ কয়েকটি প্রকল্পের জন্য অমূল্য। ক্লায়েন্ট-সাইড লাইব্রেরিগুলি যত বেশি শক্তিশালী হয়ে ওঠে এবং আরও সাধারণভাবে ক্লায়েন্টের পাশে রাখা হয়, এই ধরণের ডিবাগিং এবং প্রোফাইলিং কেবল আরও দরকারী হয়ে উঠবে।
ফায়ারব্যাগ কনসোল এপিআই: http://getfirebug.com/console.html
F12ওয়েব বিকাশকারীদের টিপে ব্রাউজারটি ছাড়াই দ্রুত জাভাস্ক্রিপ্ট কোডটি ডিবাগ করতে পারে। এটি উইন্ডোজ প্রতিটি ইনস্টলেশন মধ্যে নির্মিত হয়।
ইন ইন্টারনেট এক্সপ্লোরার 11 , F12 চেপে সরঞ্জাম যেমন ব্রেকপয়েন্ট, ঘড়ি ও স্থানীয় পরিবর্তনশীল দেখার, এবং বার্তা এবং অবিলম্বে কোড সঞ্চালনের জন্য একটি কনসোল হিসাবে সরঞ্জাম ডিবাগ প্রদান করে।