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

সোফিয়া এমেলিয়ানোভা
Sofia Emelianova
GitHub

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

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

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

'আস্ক এআই' মেনু বিকল্প এবং সংশ্লিষ্ট বোতাম।

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

নতুন এআই সহায়তা প্যানেল একটি প্রম্পটের উত্তর দিচ্ছে।

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

DevTools টিম আপনার প্রতিক্রিয়া জানার জন্য অধীর আগ্রহে অপেক্ষা করছে। crbug.com/364805393 ঠিকানায় এটি ছেড়ে দিন।

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

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

নতুন এআই উদ্ভাবন ট্যাব।

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

কনসোল ইনসাইটগুলি এক ক্লিক দূরে

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

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

পারফর্মেন্স প্যানেলের উন্নতি

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

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

পারফরম্যান্স প্যানেলটি বাম দিকে একটি সম্প্রসারণযোগ্য সাইডবারে নতুন অ্যানোটেশন ট্যাব পেয়েছে যা পারফরম্যান্সের ফলাফল ভাগ করে নেওয়ার সময় ট্রেস অন্বেষণ এবং সহযোগিতার জন্য নোট তৈরির প্রক্রিয়াটিকে সহজতর করে।

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

বাম দিকের সাইডবারে নতুন টীকা ট্যাব এবং ইভেন্ট, পরিসর এবং সংযোগ টীকাযুক্ত।

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

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

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

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

অতিরিক্ত লেআউট পরিবর্তনগুলি সহজেই সনাক্ত করা যায়

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

'লেআউট শিফট' ট্র্যাকের আপডেটের আগে এবং পরে এবং 'সারাংশ' ট্যাব পুনর্গঠিত করা হয়েছে।

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

লাইভ মেট্রিক্স ভিউতে 'লেআউট শিফট' লগ যোগ করার আগে এবং পরে।

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

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

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

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

ট্র্যাকে অ্যানিমেশনের নামকরণের আগে এবং পরে, অ-সংযোজিত অ্যানিমেশনগুলিকে চিহ্নিত করা এবং ব্যর্থতার কারণ দেখানো।

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

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

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

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

'হার্ডওয়্যার কনকারেন্সি' সেটিংটি সেন্সর প্যানেলে সরানোর আগে এবং পরে।

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

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

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

আপনি নতুন সেটিংস > Ignore list > চালু করে eval অথবা console থেকে Anonymous scripts চালু করতে পারেন যাতে DevTools সোর্স URL ছাড়া anonymous scripts উপেক্ষা করতে পারে।

স্ট্যাক ট্রেসে উপেক্ষা তালিকা উন্নত করার আগে এবং পরে।

উপরন্তু, যখন আপনি কনসোল লগে ডান-ক্লিক করেন এবং Save as... করেন , তখন এটি Show more/less লেখাটি সংরক্ষণ করে না।

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

এলিমেন্টস > স্টাইল: গ্রিড ওভারলে এবং CSS-ওয়াইড কীওয়ার্ডের জন্য sideways-* লেখার মোডের জন্য সমর্থন।

এলিমেন্টস > স্টাইলস ট্যাব এখন নিম্নলিখিতগুলি সমর্থন করে:

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

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

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

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

টাইমস্প্যান এবং স্ন্যাপশট মোডে নন-HTTP পৃষ্ঠার জন্য অডিট সক্ষম করার আগে এবং পরে।

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

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

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

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

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

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

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

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

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

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

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

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

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