Project IDX-এ আপনার অ্যাপ ডিবাগ করুন

প্রজেক্ট IDX আপনার কর্মক্ষেত্র থেকে সরাসরি আপনার অ্যাপ ডিবাগ করার কয়েকটি ভিন্ন উপায় অফার করে। ওয়েব এবং ফ্লাটার অ্যাপ আপনার ওয়ার্কস্পেসে Chrome ওয়েব প্রিভিউতে Lighthouse এবং Chrome DevTools অফার করে। আপনি কোড করার সময় আপনার অ্যাপকে স্পট-চেক এবং পরীক্ষা করতে ফ্লাটার অ্যাপগুলি iOS, Android এবং ওয়েব প্রিভিউ অফার করে। অন্তর্নির্মিত ডিবাগ কনসোল বেশিরভাগ সাধারণ ভাষার জন্য স্বয়ংক্রিয় ডিবাগিং সমর্থন করে এবং কাস্টম ডিবাগিং আপনি আপনার কর্মক্ষেত্রে একটি launch.json ফাইলে সংজ্ঞায়িত করতে পারেন।

আপনার অ্যাপের পূর্বরূপ দেখুন

IDX-এ ওয়েব অ্যাপস (Chrome এবং মোবাইল Safari) এবং Flutter অ্যাপের (iOS, Android, Chrome) জন্য ইন-ওয়ার্কস্পেস অ্যাপ প্রিভিউ অন্তর্ভুক্ত রয়েছে। অ্যান্ড্রয়েড এবং ক্রোম প্রিভিউ হট রিলোড এবং হট রিফ্রেশ সমর্থন করে এবং সম্পূর্ণ এমুলেটর ক্ষমতা প্রদান করে। Safari এবং iOS সিমুলেটরগুলি বিভিন্ন iOS ডিভাইসে ভিজ্যুয়াল এবং ইন্টারেক্টিভ প্রিভিউ অফার করে এবং মোবাইল এবং ওয়েব অ্যাপের জন্য iOS অভিজ্ঞতা অনুকরণ করে।

IDX প্রিভিউ সম্পর্কে আরও জানতে, আপনার অ্যাপের পূর্বরূপ দেখুন।

ওয়েব পূর্বরূপের জন্য Chrome DevTools ব্যবহার করুন (পরীক্ষামূলক)

Chrome DevTools আপনাকে সরাসরি ওয়েব প্রিভিউ থেকে আপনার অ্যাপে সমস্যা নির্ণয় করতে সাহায্য করে। আপনি IDX ওয়েব প্রিভিউ প্যানেলে Chrome DevTools অ্যাক্সেস করতে পারবেন যেভাবে আপনি আপনার Chrome ব্রাউজার থেকে DevTools খুলবেন।

এই বৈশিষ্ট্যটি পরীক্ষামূলক কারণ আমরা একটি আদর্শ ব্যবহারকারীর অভিজ্ঞতা তৈরি করে কাজ করি। এটিকে আরও ভালোভাবে তৈরি করতে সাহায্য করার জন্য আমাদের মতামত পাঠান ।

1. আপনার IDX কর্মক্ষেত্রে Chrome DevTools যোগ করুন:

   1. গিয়ার আইকনে ক্লিক করে বা Ctrl + , (Windows/Linux/ChromeOS-এ) বা Cmd + , (MacOS-এ) টিপে সেটিংস উইন্ডো খুলুন।
   2. IDX: Web Dev Tools সেটিংস খুঁজুন এবং ওয়েব পূর্বরূপের জন্য Chrome DevTools সক্ষম করুন নির্বাচন করুন (ব্রাউজার পুনরায় লোড প্রয়োজন) । আপনি একটি settings.json ফাইল ব্যবহার করলে, আপনি "IDX.webDevTools": true ।
   3. আপনার ব্রাউজার উইন্ডো রিফ্রেশ করুন এবং আপনার IDX ওয়ার্কস্পেস পুনরায় লোড করুন।

2. Project IDX-এ ওয়েব প্রিভিউ খুলুন: কমান্ড প্যালেট খুলুন ( Mac-এ Cmd+Shift+P অথবা ChromeOS, Windows বা Linux-এ Ctrl+Shift+P ) এবং Project IDX নির্বাচন করুন: ওয়েব প্রিভিউ দেখান ।

3. DevTools প্যানেলটি ওয়েব প্রিভিউ প্যানেলের মধ্যে ছোট করা হয়েছে। প্যানেল প্রসারিত করতে DevTools বারে ক্লিক করুন এবং ওয়েব প্রিভিউ প্যানেলের ভিতরে DevTools ব্যবহার করুন।

IDX ওয়েব প্রিভিউতে DevTools প্যানেলটি ব্যবহার করুন যেভাবে আপনি Chrome ব্রাউজারে আপনার অ্যাপ ডিবাগ করতে চান।

ওয়েব প্রিভিউগুলির জন্য লাইটহাউস চালান

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

1. Project IDX-এ ওয়েব প্রিভিউ খুলুন: কমান্ড প্যালেট খুলুন ( Mac-এ Cmd+Shift+P অথবা ChromeOS, Windows বা Linux-এ Ctrl+Shift+P ) এবং Project IDX নির্বাচন করুন: ওয়েব প্রিভিউ দেখান ।

2. ওয়েব প্রিভিউ টুলবার থেকে পারফরম্যান্স চেক আইকনে ক্লিক করুন।

3. লাইটহাউস প্যানেলে, আপনি যে অডিট বিভাগগুলি চান তা নির্বাচন করুন৷ আপনি প্রতিবেদনগুলি থেকে নির্বাচন করতে পারেন অডিটিং কর্মক্ষমতা , অ্যাক্সেসযোগ্যতা , সর্বোত্তম অনুশীলনের সাথে সামঞ্জস্য , এসইও এবং প্রগতিশীল ওয়েব অ্যাপ পারফরম্যান্স । প্রতিবেদন তৈরি করতে বিশ্লেষণ পৃষ্ঠায় ক্লিক করুন।

   প্রতিবেদনগুলি তৈরি হতে কয়েক মিনিট সময় লাগতে পারে৷

4. একবার লাইটহাউস প্যানেলে রিপোর্টগুলি উপস্থিত হলে, আপনি প্রতিটি অডিট বিভাগের ফলাফলগুলি পর্যালোচনা করতে পারেন, বা স্কোর এবং বিভাগের নাম ক্লিক করে অডিট বিভাগগুলির মধ্যে পরিবর্তন করতে পারেন৷

ডিবাগ কনসোল ব্যবহার করুন

প্রজেক্ট IDX কোড OSS থেকে বিল্ট-ইন ডিবাগ কনসোল অন্তর্ভুক্ত করে। সর্বাধিক সাধারণ প্রোগ্রামিং ভাষার জন্য বাক্সের বাইরের ডিবাগারগুলির সাথে আপনার অ্যাপ ডিবাগ করতে এই কনসোলটি ব্যবহার করুন, বা VSCode মার্কেটপ্লেস থেকে একটি ডিবাগিং এক্সটেনশন যোগ করুন৷

আপনি যদি কাস্টম ডিবাগিং লিখতে চান, আপনার কর্মক্ষেত্রে একটি launch.json ফাইল যোগ করুন।