ডেভটুলস একটি এআই সহায়তা প্যানেল প্রদান করে, যা একজন এআই এজেন্টের সাথে চ্যাট করার মাধ্যমে আপনাকে আপনার ওয়েবসাইট বুঝতে এবং সমস্যা সমাধান করতে সাহায্য করে।
এআই-এর সাহায্যে আপনি আপনার ওয়েবসাইটের স্টাইলিং , নেটওয়ার্কিং , পারফরম্যান্স এবং সোর্স ডিবাগ করতে পারবেন।
এআই অ্যাসিস্ট্যান্স প্যানেলে জেমিনির সাথে কার্যকরভাবে চ্যাট করতে, প্যানেলটি কীভাবে খুলতে হয়, প্রম্পট করতে হয় এবং কথোপকথনের প্রবাহ নিয়ন্ত্রণ করতে হয় তা জেনে নিন।
এআই সহায়তা প্যানেলটি খুলুন
এআই সহায়তা প্যানেলটি ড্রয়ারের ভেতরে খোলে।
প্যানেলটি খুলতে, উপরের প্রধান টুলবারের ডানদিকে গ্লোবাল এন্ট্রি পয়েন্টে অবস্থিত এআই অ্যাসিস্ট্যান্স বোতামটিতে ক্লিক করুন।
এছাড়াও আপনি Elements , Network , Sources , বা Performance প্যানেল থেকে কোনো এলিমেন্ট বা রিকোয়েস্টের উপর রাইট-ক্লিক করে এবং Ask AI নির্বাচন করে সরাসরি প্যানেলটি খুলতে পারেন।
কমান্ড মেনু থেকে
কমান্ড মেনু থেকে এআই অ্যাসিস্ট্যান্স চালু করতে, AI টাইপ করুন এবং তারপরে Show AI assistance কমান্ডটি চালান, যার পাশে ড্রয়ার ব্যাজটি রয়েছে।
'More tools' মেনু থেকে
বিকল্পভাবে, উপরের ডান কোণায়, > আরও বিকল্প > আরও সরঞ্জাম > এআই সহায়তা নির্বাচন করুন।
প্রম্পটিং
নতুন কথোপকথন শুরু করার সময়, এআই সহায়তা আপনাকে দ্রুত শুরু করতে সাহায্য করার জন্য উদাহরণমূলক নির্দেশনা প্রদান করে।
প্যানেলের নিচের প্রম্পট ইনপুট ফিল্ডটি আগে থেকে পূরণ করতে যেকোনো একটি প্রম্পটে ক্লিক করুন।
বিকল্পভাবে, ইনপুট ফিল্ডে আপনার নিজের নির্দেশ বা প্রশ্ন টাইপ করুন।
প্রম্পট পাঠাতে, Enter চাপুন অথবা ইনপুট ফিল্ডের ডানদিকের তীরচিহ্নে ক্লিক করুন।
ফ্রি চ্যাট বক্সের মাধ্যমে, আপনি "অ্যাক্সেসিবিলিটি ডিবাগ করতে ডেভটুলস কীভাবে ব্যবহার করবেন?" বা "কোন নেটওয়ার্ক রিকোয়েস্টগুলো ধীরগতির?"-এর মতো উচ্চ-স্তরের প্রশ্ন জিজ্ঞাসা করতে পারেন। এছাড়াও, উদাহরণস্বরূপ, সোর্সেস প্যানেল থেকে কোনো ফাইলের অংশবিশেষ কপি করে চ্যাটে পেস্ট করে সেটির কাজ কী, তা-ও জিজ্ঞাসা করতে পারেন।
স্টাইলিংয়ের জন্য এআই সহায়তা
একটি ওয়েবসাইটের সামগ্রিক লেআউট, নির্দিষ্ট এলিমেন্টের স্টাইল বুঝতে এবং CSS বাগের জন্য AI-নির্মিত সমাধান পেতে, স্টাইলিংয়ের জন্য AI সহায়তা প্যানেলটি ব্যবহার করুন।
এলিমেন্টস প্যানেল থেকে এআই সহায়তা চালু করুন
এলিমেন্টস প্যানেল থেকে এআই সহায়তা চালু করতে, কোনো DOM নোড পরিদর্শন করার সময় নোডটির উপর রাইট-ক্লিক করুন এবং 'Ask AI' বিকল্পটি নির্বাচন করুন।
আপনি যখন এইভাবে এআই অ্যাসিস্ট্যান্স খোলেন, তখন ইন্সপেক্টেড DOM এলিমেন্টটি কথোপকথনের জন্য একটি কনটেক্সট এলিমেন্ট হিসেবে আগে থেকেই নির্বাচিত থাকে।
বিকল্পভাবে, হোভার করা DOM নোডের সাথে সংযুক্ত ভাসমান বোতামটিতে ক্লিক করুন।
কথোপকথনের প্রেক্ষাপট
এআই সহায়তার সাথে কথোপকথন সর্বদা বর্তমানে পরিদর্শন করা এলিমেন্টটির সাথে সম্পর্কিত থাকে, যেটি হলো এলিমেন্টস প্যানেলের DOM ট্রি-তে নির্বাচিত সর্বশেষ এলিমেন্ট। এই এলিমেন্টটির একটি রেফারেন্স প্যানেলের নিচের বাম কোণায় দেখানো হয়।
বর্তমান এলিমেন্টের পাশে থাকা এলিমেন্ট পিকার ব্যবহার করে অথবা এলিমেন্টস প্যানেলের DOM ট্রি থেকে নির্বাচন করে কনটেক্সট পরিবর্তন করুন।
প্রসঙ্গটি নির্বাচিত হয়ে গেলে, আপনি ভিউপোর্টের একটি স্ক্রিনশট নিয়ে আপনার চ্যাটে জমা দিতে পারেন। চ্যাট ইনপুট ফিল্ডের পাশে থাকা Take screenshot` বোতামটিতে ক্লিক করুন।
আপনার নির্দেশাবলীতে অতিরিক্ত চাক্ষুষ প্রেক্ষাপট যোগ করতে আপনি স্ক্রিনশট ব্যবহার করতে পারেন, যেমন, দৃশ্যমান সব বাটনের মধ্যে ব্যবধান একই আছে কিনা তা পরীক্ষা করার জন্য।
যদিও বর্তমানে পরিদর্শিত এলিমেন্টটিই আলোচনার ভিত্তি, পরিদর্শিত পৃষ্ঠাটি থেকে আরও তথ্য সংগ্রহের জন্য এআই সহায়তার সমস্ত ওয়েব এপিআই-তে অ্যাক্সেস রয়েছে। এর মধ্যে document.querySelector ব্যবহার করে অন্যান্য এলিমেন্ট কোয়েরি করা বা কম্পিউটেড স্টাইল মূল্যায়ন করা অন্তর্ভুক্ত।
নেটওয়ার্কের জন্য এআই সহায়তা
আপনার ওয়েবসাইট থেকে পাঠানো অনুরোধগুলো বোঝার জন্য নেটওয়ার্কের এআই সহায়তা প্যানেলটি ব্যবহার করুন।
নেটওয়ার্ক প্যানেল থেকে এআই সহায়তা চালু করুন
নেটওয়ার্ক প্যানেল থেকে এআই সহায়তা চালু করতে, কোনো অনুরোধের উপর রাইট-ক্লিক করুন এবং 'Ask AI' বিকল্পটি নির্বাচন করুন।
আপনি যখন এইভাবে এআই অ্যাসিস্ট্যান্স চালু করেন, তখন নির্বাচিত নেটওয়ার্ক অনুরোধটি কথোপকথনের প্রেক্ষাপট হিসেবে আগে থেকেই নির্বাচিত থাকে।
বিকল্পভাবে, আপনি যে নেটওয়ার্ক অনুরোধটির উপর মাউস রাখবেন, তার পাশে থাকা ভাসমান বোতামটিতে ক্লিক করুন।
কথোপকথনের প্রেক্ষাপট
এআই সহায়তার সাথে চ্যাটগুলো নেটওয়ার্ক প্যানেলের অনুরোধ তালিকায় বর্তমানে নির্বাচিত নেটওয়ার্ক অনুরোধটির সাথে সম্পর্কিত। এই অনুরোধটির একটি রেফারেন্স প্যানেলের নিচের বাম কোণায় দেখানো হয়।
নেটওয়ার্ক প্যানেলে অন্য কোনো অনুরোধে ক্লিক করে প্রসঙ্গ পরিবর্তন করুন।
এআই সহায়তা আপনার প্রশ্নগুলোর উত্তর দেওয়ার জন্য রিকোয়েস্ট ইউআরএল, হেডার, টাইমিং এবং রিকোয়েস্ট ইনিশিয়েটর চেইন ব্যবহার করছে।
গুরুত্বপূর্ণ: যেসব হেডারে সংবেদনশীল তথ্য থাকতে পারে, সেগুলো স্বয়ংক্রিয়ভাবে মুছে ফেলা হয়।
কথোপকথন শুরু করার পর, এআই সহায়তা দ্বারা ব্যবহৃত কাঁচা ডেটা দেখতে Analyzing network data ' চিপে থাকা এক্সপ্যান্ড' বোতামে ক্লিক করুন।
পারফরম্যান্সের জন্য এআই সহায়তা
পারফরম্যান্স প্যানেলে রেকর্ড করা পারফরম্যান্স প্রোফাইলগুলো বুঝতে পারফরম্যান্সের জন্য এআই সহায়তা প্যানেলটি ব্যবহার করুন।
পারফরম্যান্স প্যানেল থেকে এআই সহায়তা চালু করুন
পারফরম্যান্স প্যানেল থেকে এআই অ্যাসিস্ট্যান্স চালু করতে, প্রথমে একটি পারফরম্যান্স প্রোফাইল রেকর্ড করুন ।
আপনি কী অনুসন্ধান করতে চান তার উপর নির্ভর করে, আপনি স্বতন্ত্র পারফরম্যান্স ইনসাইটস থেকে অথবা পারফরম্যান্স ট্রেস ভিউতে থাকা অ্যাক্টিভিটিগুলোর জন্য **এআই অ্যাসিস্ট্যান্স** প্যানেলটি খুলতে পারেন।
কর্মক্ষমতা অন্তর্দৃষ্টি
ইনসাইটস ট্যাবে, একটি ইনসাইট খুলুন, যেমন **LCP by phase** , তারপর Ask AI বোতামে ক্লিক করুন ।
DevTools এই পারফরম্যান্স ইনসাইটটিকে আলোচনার প্রেক্ষাপট হিসেবে আগে থেকেই নির্বাচিত করে AI সহায়তা প্যানেলটি খোলে।
পারফরম্যান্স ট্রেস ভিউ
ট্রেস ভিউ থেকে এআই সহায়তা চালু করতে, যেকোনো একটি অ্যাক্টিভিটির উপর রাইট-ক্লিক করুন এবং 'Ask AI' অপশনটি নির্বাচন করুন।
এক্ষেত্রে, এই কার্যকলাপটি কথোপকথনের প্রেক্ষাপট হিসেবে আগে থেকেই নির্বাচিত থাকে।
কথোপকথনের প্রেক্ষাপট
নির্বাচিত পারফরম্যান্স অ্যাক্টিভিটিটি এআই অ্যাসিস্ট্যান্সের সাথে আপনার কথোপকথনের প্রেক্ষাপট হিসেবে ব্যবহৃত হয়। এই অ্যাক্টিভিটির একটি রেফারেন্স প্যানেলের নিচের বাম কোণে দেখানো হয়।
কর্মক্ষমতা অন্তর্দৃষ্টি
আপনি যদি কোনো নির্দিষ্ট পারফরম্যান্স ইনসাইটের জন্য ‘আস্ক এআই’- তে ক্লিক করে থাকেন, তাহলে আপনি এই ইনসাইটটিকে নির্বাচিত কনটেক্সট হিসেবে দেখতে পাবেন। আপনার নির্বাচন পরিবর্তন করতে আপনি ‘অন্যান্য ইনসাইট’-এর অধীনে ‘আস্ক এআই’-তে ক্লিক করতে পারেন।
কথোপকথন শুরু করার পর, এআই সহায়তা দ্বারা ব্যবহৃত মূল ডেটা দেখতে ' Analyzing insight: ... অংশটি প্রসারিত করুন।
ট্রেস ভিউ
আপনি পারফরম্যান্স ট্রেস থেকে বিভিন্ন আইটেম নির্বাচন করতে পারেন এবং সেই অনুযায়ী প্রেক্ষাপট পরিবর্তিত হবে।
এআই সহায়তা আপনার অনুরোধের উত্তর দিতে নির্বাচিত কল ট্রি থেকে সময় ব্যবহার করছে।
একটি কথোপকথন শুরু করার পর, এআই সহায়তা দ্বারা ব্যবহৃত কাঁচা ডেটা দেখতে Analyzing call tree চিপে থাকা বোতামটি ক্লিক করুন।
উৎসের জন্য এআই সহায়তা
আপনার ওয়েবসাইট দ্বারা লোড ও ব্যবহৃত ফাইলগুলো বুঝতে সোর্সের জন্য এআই সহায়তা প্যানেলটি ব্যবহার করুন।
সোর্সেস প্যানেল থেকে উন্মুক্ত এআই সহায়তা
সোর্সেস প্যানেল থেকে এআই অ্যাসিস্ট্যান্স চালু করতে, কোনো একটি ফাইলে রাইট-ক্লিক করুন এবং আস্ক এআই অপশনটি নির্বাচন করুন।
আপনি যখন এইভাবে এআই অ্যাসিস্ট্যান্স চালু করেন, তখন নির্বাচিত ফাইলটি কথোপকথনের প্রেক্ষাপট হিসেবে আগে থেকেই নির্বাচিত থাকে।
বিকল্পভাবে, কোনো ফাইলের উপর মাউস রাখলে ভাসমান বাটনটিতে ক্লিক করুন।
কথোপকথনের প্রেক্ষাপট
নির্বাচিত ফাইলটি এআই সহায়তার সাথে আপনার কথোপকথনের প্রেক্ষাপট হিসেবে ব্যবহৃত হয়। এই ফাইলটির একটি রেফারেন্স প্যানেলের নিচের বাম কোণে দেখানো হয়।
সোর্সেস প্যানেলে অন্য একটি ফাইলে ক্লিক করে প্রসঙ্গ পরিবর্তন করুন।
এআই সহায়তা আপনার প্রশ্নগুলোর উত্তর দেওয়ার জন্য নির্বাচিত ফাইলের নাম, ইউআরএল, সোর্স ম্যাপ (যদি থাকে) এবং বিষয়বস্তু ব্যবহার করছে।
একটি কথোপকথন শুরু করার পর, এআই সহায়তা দ্বারা ব্যবহৃত কাঁচা ডেটা দেখতে Analyzing file চিপে থাকা বোতামটি ক্লিক করুন।
কথোপকথনের প্রবাহ
একটি প্রম্পট পাঠানোর মাধ্যমে স্টাইলিং এজেন্টের সাথে কথোপকথন শুরু হয়। আপনার প্রম্পটের সর্বোত্তম উত্তর দেওয়ার জন্য প্রয়োজনীয় তথ্য পেতে, এজেন্ট জাভাস্ক্রিপ্ট তৈরি ও কার্যকর করে যা ওয়েব এপিআই (API)-কে কল করে। এজেন্টের অগ্রগতি ধাপে ধাপে দেখানো হয়। প্রাথমিক ধাপের স্ট্যাটাস হলো Investigating… ।
আপনার প্রশ্নের সমাধান করার জন্য এজেন্ট যত বেশি সুনির্দিষ্ট পদক্ষেপ গ্রহণ করে, ধাপের লেবেলটি তত আপডেট হতে থাকে।
এজেন্ট চূড়ান্ত উত্তরে পৌঁছানোর পর, তদন্তের ধাপগুলোর নিচে উত্তরটি প্রদর্শিত হয় এবং এর সাথে পরবর্তী পদক্ষেপের জন্য পরামর্শও দেওয়া থাকে।
কথোপকথন চালিয়ে যেতে প্রস্তাবিত যেকোনো প্রম্পটে ক্লিক করুন। ক্লিক করুন।
নেপথ্যে এআই সহায়তা কী করেছিল, তা আরও ভালোভাবে বোঝার জন্য এটি একটি তদন্তমূলক পদক্ষেপ।
যখন আপনি একটি প্রোগ্রেস চিপ প্রসারিত করেন, তখন এজেন্ট কর্তৃক সম্পাদিত কোডটি তার রিটার্ন ভ্যালু সহ দেখতে পান। পরবর্তী ব্যবহারের জন্য, যেমন কনসোল প্যানেল দিয়ে এটি চালানোর জন্য, সম্পাদিত কোডটি কপি করুন।
থেমে যাওয়া কথোপকথন
এআই সহায়তা এমন কোড তৈরি করতে পারে যার পার্শ্বপ্রতিক্রিয়া রয়েছে। এমনটা ঘটলে, কোডটি কার্যকর হওয়ার আগে কথোপকথনটি থামিয়ে দেওয়া হয়।
যখন কথোপকথনটি থামবে, তখন এজেন্টের প্রস্তাবিত কোডটি পর্যালোচনা করুন। এগিয়ে যেতে Continue'- তে ক্লিক করুন অথবা কার্যকর হওয়া আটকাতে 'Cancel'-এ ক্লিক করুন।
আপনার কর্মক্ষেত্রে পরিবর্তনগুলি সংরক্ষণ করুন
একটি সংযুক্ত ওয়ার্কস্পেস ফোল্ডারের মাধ্যমে, আপনি এআই সহায়তার পরামর্শে করা স্টাইল পরিবর্তনগুলো আপনার কম্পিউটারের সিএসএস সোর্স ফাইলগুলোতে সংরক্ষণ করতে পারেন।
এটি করতে:
প্রথমে, একটি মেটাডেটা ফাইল তৈরি করুন এবং একটি ওয়ার্কস্পেস ফোল্ডার সংযুক্ত করুন ।
বিকল্পভাবে, আপনি ম্যানুয়ালি একটি ফোল্ডার যোগ করতে পারেন।
এলিমেন্টস প্যানেল থেকে চ্যাট শুরু করুন।
আপনার CSS পরিবর্তন করতে দ্রুত AI সহায়তা নিন ।
এআই সহায়তা কোড তৈরি করতে এবং এর নির্বাহ থামিয়ে দিতে পারে। কোডটি পর্যালোচনা করুন এবং পরিবর্তনগুলো সরাসরি পরীক্ষা করতে ' চালিয়ে যান' -এ ক্লিক করুন।
সংরক্ষণ না করা পরিবর্তনসমূহ বিভাগটি প্রসারিত করুন এবং ওয়ার্কস্পেসে প্রয়োগ করুন-এ ক্লিক করুন।
diffএ পরিবর্তনগুলো পর্যালোচনা করুন এবং Save all-এ ক্লিক করুন।
এই কার্যপ্রক্রিয়াটি শিখতে, দেখুন:
কোন উত্তর দেওয়া হয়নি
বিভিন্ন কারণে এআই সহায়তা উত্তর দিতে ব্যর্থ হতে পারে।
আপনার যদি মনে হয় যে আপনার অনুরোধটি এমন কিছু যা নিয়ে এআই সহায়তার আলোচনা করতে পারা উচিত, তাহলে একটি বাগ রিপোর্ট করুন ।
কথোপকথনের ইতিহাস
একবার কথোপকথন শুরু করলে, আপনার এবং এআই-এর মধ্যে পূর্ববর্তী আলাপচারিতার ওপর ভিত্তি করেই পরবর্তী প্রতিটি উত্তর দেওয়া হয়।
এআই সহায়তা আপনার কথোপকথনের ইতিহাস সেশনগুলোর মধ্যে সংরক্ষণ করে রাখে, ফলে আপনি ডেভটুলস বা ক্রোম রিলোড করার পরেও আপনার আগের চ্যাটগুলো দেখতে পারেন।
আপনার কথোপকথনের ইতিহাস নিয়ন্ত্রণ করতে প্যানেলের উপরের বাম কোণায় থাকা কন্ট্রোলগুলো ব্যবহার করুন।
নতুন শুরু করুন
বর্তমানে নির্বাচিত কথোপকথনের প্রেক্ষাপটে একটি নতুন কথোপকথন শুরু করতে, বোতামটিতে ক্লিক করুন।
চালিয়ে যান
পূর্বের কথোপকথন চালিয়ে যেতে, বাটনে ক্লিক করুন এবং কনটেক্সট মেনু থেকে এটি নির্বাচন করুন।
মুছে ফেলুন
ইতিহাস থেকে কোনো কথোপকথন মুছে ফেলতে, বোতামে ক্লিক করুন।
উত্তরগুলো মূল্যায়ন করুন এবং মতামত দিন।
এআই সহায়তা একটি পরীক্ষামূলক ফিচার। তাই, উত্তরের মান এবং সার্বিক অভিজ্ঞতা কীভাবে আরও উন্নত করা যায়, তা জানতে আমরা সক্রিয়ভাবে আপনাদের মতামত খুঁজছি।
ভোটের উত্তর
উত্তরের নিচে থাকা থাম্বস আপ) এবং (থাম্বস ডাউন) বোতাম ব্যবহার করে উত্তরটিকে রেটিং দিন।
প্রতিবেদনের উত্তর
অনুপযুক্ত বিষয়বস্তু সম্পর্কে জানাতে, ভোটিং বাটনগুলোর পাশে থাকা বাটনটিতে ক্লিক করুন।