DevTools, Chrome 131-এ নতুন কী আছে৷

Sofia Emelianova

Gemini দিয়ে CSS ডিবাগ করুন

Chrome DevTools নতুন পরীক্ষামূলক AI সহায়তা প্যানেল পায় যেখানে আপনি Gemini এর সাথে চ্যাট করতে পারেন এবং আপনার CSS ডিবাগ করতে সহায়তা পেতে পারেন৷

এখন এটি চেষ্টা করুন! এলিমেন্টস প্যানেলে, একটি এলিমেন্টে ডান-ক্লিক করুন এবং Ask AI নির্বাচন করুন বা সংশ্লিষ্টটিতে ক্লিক করুনউপাদানের পাশে বোতাম। DevTools নতুন AI সহায়তা প্যানেল খুলবে।

নতুন প্যানেল আপনাকে সংশ্লিষ্ট সেটিং চালু করতে বলবে। নিশ্চিত করুন যে আপনি প্রয়োজনীয়তাগুলি পূরণ করেছেন, সেটিং টগল চালু করুন এবং AI সহায়তা প্যানেলে ফিরে যান। এটি আপনার প্রসঙ্গ হিসাবে নির্বাচিত উপাদানটি গ্রহণ করবে। উপাদান সম্পর্কে আপনার প্রশ্ন টাইপ করুন.

নতুন প্যানেলটি কীভাবে সর্বোত্তমভাবে ব্যবহার করা যায় সে সম্পর্কে আরও জানতে, DevTools AI সহায়তার সাথে 5টি দুর্দান্ত জিনিস দেখুন এবং স্টাইলিংয়ের জন্য AI সহায়তা দেখুন৷

DevTools টিম আপনার প্রতিক্রিয়া শোনার জন্য উন্মুখ। crbug.com/364805393 এ এটি নির্দ্বিধায় ছেড়ে দিন।

একটি ডেডিকেটেড সেটিংস ট্যাবে AI বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করুন

আপনি এখন এক জায়গায় সমস্ত AI বৈশিষ্ট্য পরিচালনা করতে পারেন: নতুন সেটিংস সেটিংস >এআই উদ্ভাবন ট্যাব। এটি গুরুত্বপূর্ণ বিবেচনার তালিকা দেয়, এআই বৈশিষ্ট্যগুলি বর্ণনা করে এবং আপনাকে পৃথকভাবে সেগুলি চালু এবং বন্ধ করতে দেয়।

আরও তথ্যের জন্য দেখুন, সেটিংস > AI উদ্ভাবন ।

কনসোল অন্তর্দৃষ্টি এক ক্লিক দূরে

DevTools-এর আর AI বৈশিষ্ট্যের জন্য সেটিংস সিঙ্ক চালু করার প্রয়োজন নেই। সুতরাং, পূর্বে প্রকাশিত কনসোল অন্তর্দৃষ্টি , স্টাইলিংয়ের জন্য AI সহায়তা সহ, এক ক্লিক দূরে।

আপনি যদি Chrome এ লগ ইন করে থাকেন, তাহলে সেটিংস > এ এই বৈশিষ্ট্যগুলি চালু করুন৷এআই উদ্ভাবন এবং আপনি যেতে ভাল.

কর্মক্ষমতা প্যানেল উন্নতি

এই সংস্করণটি পারফরম্যান্স প্যানেলে অনেক উন্নতি এনেছে।

কর্মক্ষমতা ফলাফল টীকা এবং শেয়ার করুন

পারফরম্যান্স প্যানেলটি বাম দিকে একটি প্রসারণযোগ্য সাইডবারে নতুন টীকা ট্যাব পায় যা পারফরম্যান্সের ফলাফলগুলি ভাগ করার সময় ট্রেস অনুসন্ধান এবং সহযোগিতার জন্য নোট তৈরি করার প্রক্রিয়াটিকে স্ট্রিমলাইন করে৷

আপনি এখন তীরগুলির সাহায্যে ইভেন্টগুলিকে লেবেল এবং সংযোগ করতে পারেন এবং সঠিক ট্রেসের উপর সময়সীমা হাইলাইট করতে পারেন৷ তারপরে আপনি পারফরম্যান্স প্যানেলে টীকাযুক্ত ট্রেসগুলি সংরক্ষণ করতে, ভাগ করতে এবং আপলোড করতে পারেন৷

পারফরম্যান্স প্যানেলেই পারফরম্যান্সের অন্তর্দৃষ্টি পান

আপনি এখন পারফরম্যান্স প্যানেলের বাম সাইডবারে নতুন অন্তর্দৃষ্টি ট্যাবে কর্মযোগ্য অন্তর্দৃষ্টিগুলি আবিষ্কার করতে পারেন৷ অন্তর্দৃষ্টিগুলি Lighthouse রিপোর্ট এবং কর্মক্ষমতা অন্তর্দৃষ্টি প্যানেল থেকে একত্রিত করা হয়েছে যা অবমূল্যায়িত হতে চলেছে ৷

অন্তর্দৃষ্টি ট্যাবের লক্ষ্য হল নির্দেশিত বিশ্লেষণ প্রদান করা এবং কর্মক্ষমতা সংক্রান্ত সমস্যাগুলির বিষয়ে পদক্ষেপযোগ্য অন্তর্দৃষ্টি প্রস্তাব করা যা আপনার ওয়েবসাইটকে ধীর করে দিতে পারে। অন্তর্দৃষ্টি ব্যবহার করতে, পারফরম্যান্স প্যানেলের বাম সাইডবারে ট্যাবটি খুলুন, বিভিন্ন বিভাগ প্রসারিত করুন এবং আইটেমগুলি হোভার করুন এবং ক্লিক করুন৷ পারফরম্যান্স প্যানেল ট্রেসে সংশ্লিষ্ট ইভেন্টগুলিকে হাইলাইট করবে।

DevTools টিম অন্তর্দৃষ্টিগুলির উপযোগিতা, এটিকে উন্নত করার উপায় এবং PageSpeed ​​Insights এবং Lighthouse এর মতো অন্যান্য টুলিংয়ের সাথে সেগুলি ব্যবহার করার আপনার অভিজ্ঞতার বিষয়ে আপনার প্রতিক্রিয়ার জন্য অপেক্ষা করছে৷ crbug.com/371170842 এ আপনার মতামত নির্দ্বিধায় জানান।

স্পট অত্যধিক বিন্যাস সহজে স্থানান্তর

লেআউট শিফট ট্র্যাক একটি নতুন চেহারা পায়. লেআউট পরিবর্তনগুলি এখন (আরো দৃশ্যমান) বেগুনি হীরা দিয়ে চিহ্নিত করা হয়েছে এবং টাইমলাইনে তাদের নৈকট্যের উপর ভিত্তি করে ক্লাস্টারে বিভক্ত । উভয় শিফট এবং তাদের ক্লাস্টারগুলি সামারি ট্যাবে সময়, স্কোর, উপাদান এবং সম্ভাব্য অপরাধীদের সাথে একটি সংগঠিত টেবিল পায়।

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

ক্রোমিয়াম সমস্যা: 369100729 ।

অ-সংরক্ষিত অ্যানিমেশনগুলি চিহ্নিত করুন

অ্যানিমেশন ট্র্যাক এখন আপনাকে অ-সংরক্ষিত অ্যানিমেশন সম্পর্কে দরকারী তথ্য দেখায়:

• সংশ্লিষ্ট CSS সম্পত্তি অনুযায়ী অ্যানিমেশনের নাম দেয়, যদি থাকে।
• ট্র্যাকে লাল ত্রিভুজ সহ অ-সংযুক্ত অ্যানিমেশনগুলি চিহ্নিত করে৷
• সারাংশ ট্যাবে কম্পোজিটিং ব্যর্থতার কারণ দেখায়।

আরও তথ্যের জন্য, স্টিক টু কম্পোজিটর-অনলি প্রপার্টি এবং লেয়ার কাউন্ট ম্যানেজ করুন দেখুন।

ক্রোমিয়াম সমস্যা: 41006273 ।

হার্ডওয়্যার কনকারেন্সি সেন্সরে চলে যায়

হার্ডওয়্যার কনকারেন্সি সেটিং পারফরম্যান্স প্যানেল থেকে আরও উপযুক্ত জায়গায় চলে যায়— সেন্সর প্যানেল।

ক্রোমিয়াম সমস্যা: 371463665 ।

বেনামী স্ক্রিপ্টগুলি উপেক্ষা করুন এবং স্ট্যাক ট্রেসে আপনার কোডের উপর ফোকাস করুন

কনসোলে স্ট্যাক ট্রেসগুলি এখন সঠিকভাবে সনাক্ত করে, উপেক্ষা করে, ভেঙে দেয় এবং (যদি প্রসারিত হয়) ধূসর আউট ফ্রেমগুলি যা উপেক্ষা-তালিকাভুক্ত ফাইলগুলি থেকে আসে। পূর্বে, এটি প্রসারিত ট্রেসে ফাংশনের নামটি ধূসর করেনি।

এছাড়াও আপনি উৎস URL ছাড়া বেনামী স্ক্রিপ্ট উপেক্ষা করতে DevTools সেট করতে eval বা কনসোল থেকে নতুন সেটিংস Settings > Egnore list > check_box বেনামী স্ক্রিপ্ট চালু করতে পারেন।

অতিরিক্তভাবে, আপনি যখন ডান-ক্লিক করেন এবং কনসোল লগ হিসাবে সংরক্ষণ করুন... , এটি বেশি/কম পাঠ্য দেখান সংরক্ষণ করে না।

ক্রোমিয়াম সমস্যা: 40279542 , 40945570 , 345248263 ।

উপাদান > শৈলী: sideways-* গ্রিড ওভারলে এবং CSS-ওয়াইড কীওয়ার্ডের জন্য লেখার মোড

উপাদান > শৈলী ট্যাব এখন নিম্নলিখিত সমর্থন করে:

• ভিউপোর্টে গ্রিড ওভারলে এখন sideways-rl এবং sideways-lr লেখার মোডগুলির জন্য গ্রিড প্রদর্শন করে।
• CSS-ব্যাপী কীওয়ার্ডগুলি সমাধান করে। ব্যবহারিকভাবে, এর অর্থ হল, উদাহরণস্বরূপ, যদি inherit একটি রঙ হয়, তবে শৈলী ট্যাবটি তার পাশে একটি রঙ চয়নকারী দেখায়।

ক্রোমিয়াম সমস্যা: 40280717 , 40706051 , 40501131 ।

টাইমস্প্যান এবং স্ন্যাপশট মোডে অ-HTTP পৃষ্ঠাগুলির জন্য লাইটহাউস অডিট

লাইটহাউস এখন টাইমস্প্যান এবং স্ন্যাপশট মোডে নন-HTTP পৃষ্ঠাগুলির জন্য প্রতিবেদন তৈরি করতে পারে।

অ্যাক্সেসযোগ্যতা

এই সংস্করণে নিম্নলিখিত অ্যাক্সেসযোগ্যতার উন্নতি রয়েছে:

• সোর্স > এডিটরে , খোলা ফাইল সহ ট্যাবগুলি এখন এক্স বোতামে ফোকাস করে এবং এন্টার বা স্পেস টিপে বন্ধ করা যেতে পারে।
• পারফরম্যান্সে , আপনি এখন ট্রেসে একটি এন্ট্রি নির্বাচন করতে পারেন এবং প্রসঙ্গ মেনু খুলতে স্পেস টিপুন।
• পারফরম্যান্সে , বাম দিকে সাইডবারে অন্তর্দৃষ্টি ট্যাবটি কীবোর্ড-অ্যাক্সেসযোগ্য এবং "ট্যাব করা" হতে পারে৷

ক্রোমিয়াম সমস্যা: 372411090 ।

বিবিধ হাইলাইট

এই রিলিজে কিছু উল্লেখযোগ্য সংশোধন এবং উন্নতি হল:

• থ্রটলিং সেটিংস এখন পারফরম্যান্স এবং নেটওয়ার্ক প্যানেলের মধ্যে সঠিকভাবে সিঙ্ক করা হয়েছে ( 370332090 )।
• অ্যাপ্লিকেশন > ব্যাকগ্রাউন্ড পরিষেবা > অনুমানমূলক লোড > নিয়মগুলিতে এখন একটি {} প্রিটি-প্রিন্ট বোতাম রয়েছে সোর্স > এডিটর ( 40279147 ) এর মতো।
• লাইভ এক্সপ্রেশন : একটি স্বয়ংসম্পূর্ণ বিকল্প নির্বাচন করার পরে ট্যাব টিপে এখন পাঠ্য ইন্ডেন্ট করার পরিবর্তে সম্পাদনা ক্ষেত্র থেকে প্রস্থান করে ( 349939551 )।
• উপাদান > শৈলী : anchor() এবং anchor-size() নতুন সিনট্যাক্স সমর্থন করে যেখানে আপনি আর্গুমেন্ট পুনরায় অর্ডার করতে পারেন এবং anchor-size() দিকনির্দেশ ( 343516786 ) বাদ দিতে পারেন। উপরন্তু, স্থির ফলব্যাক রেন্ডারিং ( 365802559 )।
• নেটওয়ার্ক : ফিক্সড গ্রাফকিউএল প্রিভিউ ( 369931288 )।
• কর্মক্ষমতা : এখন লোডিং এবং প্রসেসিং ট্রেসের ক্রমবর্ধমান অগ্রগতি রিপোর্ট করে।
• WebAuthn : এখন signal* পদ্ধতি ( 368467199 ) দ্বারা পরিবর্তিত শংসাপত্রগুলি গতিশীলভাবে আপডেট করে।
• WebAssembly: একটি WebAssembly মডিউলের জন্য একাধিক ডিবাগ চিহ্ন উপলব্ধ থাকলে এবং কোনটি ব্যবহার করা হচ্ছে ( 40879198 , 369515221 ) থাকলে কনসোলে একটি সতর্কতা এখন আপনাকে জানায়৷
• কোর ওয়েব ভাইটালস ওভারলে রেন্ডারিং ট্যাব 328487897 থেকে সরানো হয়েছে।
• জেনারেটিভ AI বৈশিষ্ট্যগুলির জন্য এখন Chrome সেটিংস সিঙ্কের প্রয়োজন নেই৷

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসাবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন৷ এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম APIগুলি পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের করার আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন বৈশিষ্ট্য, আপডেট বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
• more_vert আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
• @ ChromeDevTools-এ টুইট করুন।
• DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

DevTools-এ নতুন কি আছে

DevTools সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।