DevTools-এ একটি এআই সহায়তা প্যানেল রয়েছে যা একটি বিল্ট-ইন এআই এজেন্টের সাথে চ্যাট করার মাধ্যমে আপনাকে আপনার ওয়েবসাইট বুঝতে এবং সমস্যা সমাধান করতে সাহায্য করে।
এআই অ্যাসিস্ট্যান্স প্যানেলটি জেমিনি দ্বারা চালিত এবং এটি নিম্নলিখিত কাজগুলো করে:
- ওয়েব ডেভেলপমেন্টে বিশেষজ্ঞ।
- সম্পূর্ণ ওয়েব পেজ সম্পর্কে সাধারণ প্রশ্নের উত্তর দেওয়ার পাশাপাশি স্টাইলিং, নেটওয়ার্কিং, পারফরম্যান্সসহ বিভিন্ন বিষয়ে সুনির্দিষ্ট তথ্য প্রদান করতে পারি।
- এটি স্বয়ংক্রিয়ভাবে আপনার চ্যাট করার জন্য নির্দিষ্ট বিষয়বস্তু সংকুচিত করে ও নির্বাচন করে, যেমন DOM এলিমেন্ট, নেটওয়ার্ক রিকোয়েস্ট, পারফরম্যান্স ট্রেস ইভেন্ট এবং আরও অনেক কিছু।
- স্বয়ংক্রিয়ভাবে নিরীক্ষা চালানো এবং কর্মক্ষমতার বিবরণ লিপিবদ্ধ করার মতো কাজ সম্পাদন করতে পারে।
- এর কার্যকলাপ ও তার পেছনের যুক্তির একটি ধাপে ধাপে বিবরণ দেয় এবং ডেভটুলস-এর প্রাসঙ্গিক অংশগুলোর লিঙ্ক প্রদান করে, যাতে আপনি এক ক্লিকেই সেগুলো খতিয়ে দেখতে পারেন।
- এটি কোড পরিবর্তনের পরামর্শ দিতে পারে এবং এর থেকে প্রাপ্ত তথ্যের ভিত্তিতে আপনার কোডিং এজেন্টের কার্যকর করার জন্য একটি প্রম্পট তৈরি করতে পারে।
এআই-এর সাহায্যে আপনি আপনার ওয়েবসাইটের স্টাইলিং, নেটওয়ার্কিং, পারফরম্যান্স, সোর্স কোড এবং আরও অনেক কিছুর ডিবাগ করতে পারবেন।
এআই অ্যাসিস্ট্যান্স প্যানেলে জেমিনির সাথে কার্যকরভাবে চ্যাট করতে, প্যানেলটি কীভাবে খুলতে হয়, প্রম্পট করতে হয় এবং কথোপকথনের প্রবাহ নিয়ন্ত্রণ করতে হয় তা জেনে নিন।
এআই সহায়তা প্যানেলটি খুলুন
এআই অ্যাসিস্ট্যান্স প্যানেলটি ডিফল্টরূপে ড্রয়ারে খোলে।
প্যানেলটি খুলতে, উপরের প্রধান টুলবারের ডানদিকে গ্লোবাল এন্ট্রি পয়েন্টে অবস্থিত এআই অ্যাসিস্ট্যান্স বোতামটিতে ক্লিক করুন।
প্যানেলগুলো থেকে
আপনি কথোপকথনের প্রসঙ্গ নির্বাচিত থাকা অবস্থায়, এলিমেন্টস , নেটওয়ার্ক , সোর্সেস বা পারফরম্যান্স প্যানেল থেকে সরাসরি দুটি উপায়ে প্যানেলটি খুলতে পারেন:
ক্লিক করুন
কোনো এলিমেন্ট, নেটওয়ার্ক রিকোয়েস্ট, সোর্স ফাইল বা বিস্তারিত পারফরম্যান্স ইনসাইটের পাশে থাকা 'ডিবাগ উইথ এআই' বাটন। 
কোনো এলিমেন্ট, রিকোয়েস্ট, ফাইল বা ট্রেস এন্ট্রিতে রাইট-ক্লিক করুন এবং 'Debug with AI' কনটেক্সট মেনু থেকে সাধারণ প্রম্পট অপশনগুলোর মধ্যে একটি নির্বাচন করুন।
কমান্ড মেনু থেকে
কমান্ড মেনু থেকে এআই অ্যাসিস্ট্যান্স চালু করতে, AI টাইপ করুন এবং তারপরে Show AI assistance কমান্ডটি চালান, যার পাশে ড্রয়ার ব্যাজটি রয়েছে।
'More tools' মেনু থেকে
বিকল্পভাবে, উপরের ডান কোণায়, > আরও বিকল্প > আরও সরঞ্জাম > এআই সহায়তা নির্বাচন করুন।
প্রম্পটিং
নতুন কথোপকথন শুরু করার সময়, এআই সহায়তা আপনাকে দ্রুত শুরু করতে সাহায্য করার জন্য উদাহরণমূলক নির্দেশনা প্রদান করে।
প্যানেলের নিচের প্রম্পট ইনপুট ফিল্ডটি আগে থেকে পূরণ করতে যেকোনো একটি প্রম্পটে ক্লিক করুন।
বিকল্পভাবে, ইনপুট ফিল্ডে আপনার নিজের নির্দেশ বা প্রশ্ন টাইপ করুন।
প্রম্পট পাঠাতে, Enter চাপুন অথবা ইনপুট ফিল্ডের ডানদিকের তীরচিহ্নে ক্লিক করুন।
প্রসঙ্গ ছাড়া উন্মুক্ত প্রশ্ন
ফ্রি-ফর্ম চ্যাট বক্সের মাধ্যমে, আপনি পূর্ব প্রসঙ্গ ছাড়াই উচ্চ-স্তরের মুক্ত প্রশ্ন জিজ্ঞাসা করতে পারেন। উদাহরণস্বরূপ:
How to use DevTools to debug accessibility?আপনার নির্দেশনার আরও ভালোভাবে উত্তর দেওয়ার জন্য, এআই সহায়তা প্রথমে অ্যাক্সেসিবিলিটি যাচাই করতে একটি লাইটহাউস অডিট চালাবে।
What are the slowest network requests on this page?এআই সহায়তা নেটওয়ার্ক প্যানেলে সন্দেহজনক অনুরোধগুলোর একটি তালিকা এবং সেগুলোর লিঙ্ক প্রদান করবে, যাতে আপনি এক ক্লিকেই কথোপকথনের বিষয় হিসেবে কোনো একটি অনুরোধ নির্বাচন করতে পারেন।
What performance issues exist on the page?এই প্রম্পটের উত্তর দিতে, এআই সহায়তা আপনার নির্বাচিত সেটিংস সহ স্বয়ংক্রিয়ভাবে একটি পারফরম্যান্স ট্রেস রেকর্ড করবে।
How do I use the Animation panel?বাWhere is the high contrast setting in DevTools?এর মতো প্রশ্নগুলো সরাসরি ডেভটুলস ব্যবহারে সাহায্য করবে।
একবার চ্যাট শুরু করলে, চ্যাট খালি থাকলে এআই অ্যাসিস্ট্যান্স আপনার কার্যকলাপের উপর ভিত্তি করে বুদ্ধিমত্তার সাথে বিষয়বস্তু আপডেট করবে এবং আপনার করা ম্যানুয়াল নির্বাচনগুলোকেও সম্মান করবে।
প্রসঙ্গ সহ প্রম্পট
যখন আপনি কোনো প্যানেল থেকে এআই অ্যাসিস্ট্যান্স চালু করেন, তখন চ্যাট বক্সে সংশ্লিষ্ট কথোপকথনের প্রসঙ্গটি নির্বাচিত হয়ে যায়, ফলে আপনি আপনার নির্বাচিত বিষয়গুলো নিয়ে নির্দিষ্টভাবে চ্যাট করতে পারেন।
যেকোনো সময়, আপনি Elements- এর কোনো এলিমেন্ট, Network- এর কোনো রিকোয়েস্ট, Performance- এর কোনো ট্রেস এন্ট্রি, অথবা Sources- এর কোনো ফাইল নির্বাচন করে ম্যানুয়ালি কনটেক্সট পরিবর্তন করতে পারেন।
এছাড়াও আপনি, উদাহরণস্বরূপ, সোর্সেস প্যানেল থেকে কোনো ফাইলের অংশবিশেষ কপি করে চ্যাটে পেস্ট করে সেটির কাজ কী তা জিজ্ঞাসা করতে পারেন।
এরপর, এআই অ্যাসিস্ট্যান্সে কথোপকথনের প্রবাহ সম্পর্কে আরও জানুন।
কথোপকথনের প্রবাহ
একটি প্রম্পট পাঠানোর মাধ্যমে এজেন্টের সাথে কথোপকথন শুরু হয়। আপনার প্রম্পটের সর্বোত্তম উত্তর দেওয়ার জন্য প্রয়োজনীয় তথ্য সংগ্রহ করতে, এজেন্ট জাভাস্ক্রিপ্ট তৈরি ও কার্যকর করে যা ওয়েব এপিআই-কে কল করে।
এজেন্টের অগ্রগতি ধাপে ধাপে দেখানো হয়। প্রাথমিক ধাপের অবস্থা হলো Investigating… ।
আপনার নির্দেশনার উত্তর দিতে এজেন্ট যখন আরও সুনির্দিষ্ট পদক্ষেপ গ্রহণ করে, তখন প্রাথমিক ধাপের লেবেলটি আপডেট হতে থাকে।
আপনি কী ডিবাগ করছেন তার উপর নির্ভর করে, এজেন্টটি ডেভটুলস-এ পারফরম্যান্স ট্রেস রেকর্ড করা বা লাইটহাউস অডিট চালানোর মতো কাজও সম্পাদন করতে পারে।
এজেন্ট ওয়াকথ্রু
এজেন্টটি আপনার প্রম্পটের উত্তর তৈরি করার পর, প্রাথমিক ধাপের লেবেলটি ‘এজেন্টের কার্যপ্রণালী দেখান’ বা ‘চিন্তাভাবনা দেখান’ -এ পরিবর্তিত হয়, যা আপনি ডানদিকের একটি সাইড প্যানেলে প্রসারিত করে ডেটা বিশ্লেষণ করার জন্য এজেন্টের গৃহীত পদক্ষেপগুলো দেখতে পারেন।
ধাপগুলো হলো:
- এজেন্ট কর্তৃক ফেরত আসা ডেটার সাথে সম্পাদিত সম্প্রসারণযোগ্য কোড স্নিপেট। আপনি কোডটি কপি করে কনসোলে চালাতে পারেন।
- উইজেট যা ফলাফলকে আরও সহজে পাঠযোগ্য বিন্যাসে উপস্থাপন করে।
উইজেটগুলোর উপরের ডান কোণায় একটি 'রিভিল' বাটন আছে, যা আপনাকে ডেভটুলস-এর প্রাসঙ্গিক অংশে নিয়ে যায়।
ফলো-আপ প্রম্পট
এজেন্ট চূড়ান্ত উত্তরে পৌঁছানোর পর কিছু পরবর্তী প্রশ্ন করতে পারে। কথোপকথন চালিয়ে যেতে যেকোনোটিতে ক্লিক করুন।
আপনার কোডিং এজেন্টের জন্য একটি প্রম্পট তৈরি করুন।
আপনার কোডিং এজেন্টের জন্য একটি প্রম্পট তৈরি করতে, ‘কপি টু কোডিং এজেন্ট’-এ ক্লিক করুন।
এজেন্টটি তার প্রাপ্ত তথ্য ও অন্তর্দৃষ্টির সারসংক্ষেপ করবে এবং সংক্ষিপ্ত আকারে বা সহজে পাঠযোগ্য মার্কডাউন ফরম্যাটে একটি কার্যকর নির্দেশনা প্রদান করবে, যা আপনি ক্লিপবোর্ডে কপি করে আপনার পছন্দের কোনো এআই এজেন্টের সাহায্যে কোডিং চালিয়ে যেতে পারবেন।
থেমে যাওয়া কথোপকথন
এআই সহায়তা এমন কোড তৈরি করতে পারে যার পার্শ্বপ্রতিক্রিয়া রয়েছে। এমনটা ঘটলে, কোডটি কার্যকর হওয়ার আগে কথোপকথনটি থামিয়ে দেওয়া হয়।
যখন কথোপকথনটি থামবে, তখন এজেন্টের প্রস্তাবিত কোডটি পর্যালোচনা করুন। এগিয়ে যেতে Continue'- তে ক্লিক করুন অথবা কার্যকর হওয়া আটকাতে 'Cancel'-এ ক্লিক করুন।
আপনি চেঞ্জেস প্যানেলে প্রস্তাবিত কোড পরিবর্তনগুলো পরিদর্শন করতে পারেন।
এজেন্টটি ডেভটুলসের ভেতরে পরিবর্তনগুলো প্রয়োগ করে, কিন্তু আপনি আপনার ওয়ার্কস্পেস এমনভাবে কনফিগার করতে পারেন যাতে ডেভটুলস আপনার সোর্সগুলোতে পরিবর্তনগুলো সংরক্ষণ করে।
আপনার কর্মক্ষেত্রে পরিবর্তনগুলি সংরক্ষণ করুন
একটি সংযুক্ত ওয়ার্কস্পেস ফোল্ডারের মাধ্যমে, আপনি এআই সহায়তার পরামর্শে করা স্টাইল পরিবর্তনগুলো আপনার কম্পিউটারের সিএসএস সোর্স ফাইলগুলোতে সংরক্ষণ করতে পারেন।
এটি করতে:
প্রথমে, একটি মেটাডেটা ফাইল তৈরি করুন এবং একটি ওয়ার্কস্পেস ফোল্ডার সংযুক্ত করুন ।
বিকল্পভাবে, আপনি ম্যানুয়ালি একটি ফোল্ডার যোগ করতে পারেন।
এলিমেন্টস প্যানেল থেকে চ্যাট শুরু করুন।
আপনার CSS পরিবর্তন করতে দ্রুত AI সহায়তা নিন ।
এআই সহায়তা কোড তৈরি করতে এবং এর নির্বাহ থামিয়ে দিতে পারে। কোডটি পর্যালোচনা করুন এবং পরিবর্তনগুলো সরাসরি পরীক্ষা করতে ' চালিয়ে যান' -এ ক্লিক করুন।
সংরক্ষণ না করা পরিবর্তনসমূহ বিভাগটি প্রসারিত করুন এবং ওয়ার্কস্পেসে প্রয়োগ করুন-এ ক্লিক করুন।
diffএ পরিবর্তনগুলো পর্যালোচনা করুন এবং Save all-এ ক্লিক করুন।
এই কার্যপ্রক্রিয়াটি শিখতে, দেখুন:
কোন উত্তর দেওয়া হয়নি
বিভিন্ন কারণে এআই সহায়তা উত্তর দিতে ব্যর্থ হতে পারে।
আপনার যদি মনে হয় যে আপনার অনুরোধটি এমন কিছু যা নিয়ে এআই সহায়তার আলোচনা করতে পারা উচিত, তাহলে একটি বাগ রিপোর্ট করুন ।
কথোপকথনের ইতিহাস
একবার কথোপকথন শুরু করলে, আপনার এবং এআই-এর মধ্যে পূর্ববর্তী আলাপচারিতার ওপর ভিত্তি করেই পরবর্তী প্রতিটি উত্তর দেওয়া হয়।
এআই সহায়তা আপনার কথোপকথনের ইতিহাস সেশনগুলোর মধ্যে সংরক্ষণ করে রাখে, ফলে আপনি ডেভটুলস বা ক্রোম রিলোড করার পরেও আপনার আগের চ্যাটগুলো দেখতে পারেন।
আপনার কথোপকথনের ইতিহাস নিয়ন্ত্রণ করতে প্যানেলের উপরের বাম কোণায় থাকা কন্ট্রোলগুলো ব্যবহার করুন।
নতুন শুরু করুন
বর্তমানে নির্বাচিত কথোপকথনের প্রেক্ষাপটে একটি নতুন কথোপকথন শুরু করতে, বোতামটিতে ক্লিক করুন।
চালিয়ে যান
পূর্বের কথোপকথন চালিয়ে যেতে, বাটনে ক্লিক করুন এবং কনটেক্সট মেনু থেকে এটি নির্বাচন করুন।
মুছে ফেলুন
ইতিহাস থেকে কোনো কথোপকথন মুছে ফেলতে, বোতামে ক্লিক করুন।
উত্তরগুলো মূল্যায়ন করুন এবং মতামত দিন।
এআই সহায়তা একটি পরীক্ষামূলক ফিচার। তাই, উত্তরের মান এবং সার্বিক অভিজ্ঞতা কীভাবে আরও উন্নত করা যায়, তা জানতে আমরা সক্রিয়ভাবে আপনাদের মতামত খুঁজছি।
ভোটের উত্তর
উত্তরের নিচে থাকা থাম্বস আপ) এবং (থাম্বস ডাউন) বোতাম ব্যবহার করে উত্তরটিকে রেটিং দিন।
প্রতিবেদনের উত্তর
অনুপযুক্ত বিষয়বস্তু সম্পর্কে জানাতে, ভোটিং বাটনগুলোর পাশে থাকা বাটনটিতে ক্লিক করুন।