DevTools-এ নতুন - নভেম্বর ২০২৬

প্রকাশিত: ২০ অক্টোবর, ২০২৬

Chrome 155 এবং Chrome 156 অক্টোবরে স্টেবল ভার্সনে শিপ করা হয়েছে, যা নভেম্বরে আপনার ব্রাউজারে ডিবাগিং এবং অথরিং ক্ষমতার একটি নতুন সেট নিয়ে এসেছে: এজেন্টদের জন্য DevTools-এ CSS স্টাইল ইন্সপেকশন, এলিমেন্ট-এ CSS অ্যাঙ্কর পজিশনিংয়ের জন্য একটি ইন্টার‍্যাক্টিভ position-area এডিটর এবং অ্যাপ্লিকেশন-এ ওয়েব ইনস্টল ম্যানিফেস্ট এবং বিজ্ঞাপন প্রোভেন্যান্স ডায়াগনস্টিক। এছাড়াও, আপনি মেমরি-তে ডেড কনটেক্সট ভেরিয়েবল শনাক্ত করতে, নেটওয়ার্ক-তে আর্লি হিন্টস প্রিলোড সংক্রান্ত সতর্কতা ও পারসিস্টেন্ট ওভাররাইড পরীক্ষা করতে এবং পারফর্ম্যান্স-তে আরও সহজে টাইমলাইন নেভিগেট করতে পারবেন।

অ্যাঙ্কর পজিশনিং ওভারলের পাশে এলিমেন্ট প্যানেলের স্টাইল ট্যাবে ভিজ্যুয়াল পজিশন-এরিয়া এডিটরে অ্যাঙ্কর গ্রিড অঞ্চল বেছে নেওয়া।
অ্যাঙ্কর পজিশনিং ওভারলের পাশে এলিমেন্ট প্যানেলের স্টাইল ট্যাবের ভিজ্যুয়াল পজিশন-এরিয়া এডিটরে অ্যাঙ্কর গ্রিড অঞ্চল বেছে নেওয়া।

এজেন্টের জন্য DevTools

Chrome DevTools MCP সার্ভার CSS স্টাইল ইন্সপেকশন, কনফিগারেশন ফাইল সাপোর্ট এবং কোডিং এজেন্টের জন্য চাঙ্কড ট্রেস পার্সিং যোগ করে:

  • CSS স্টাইল ইন্সপেকশন: get_css_styles টুলের সাহায্যে কম্পিউট করা ও ম্যাচ করা স্টাইল ইন্সপেক্ট করুন, যা পেজিনেশন (pageSize ও pageIdx) সাপোর্ট করে এবং ম্যাচ করা নিয়ম, ইনহেরিট করা নিয়ম, ছদ্ম-এলিমেন্ট, @keyframes ও @ নিয়ম (@position-try, @property ও @function) ফর্ম্যাট করে।
  • কনফিগারেশন ফাইল ও পাথ কন্ট্রোল: নির্দিষ্ট কনফিগারেশন ফাইলের মাধ্যমে সার্ভার ফ্ল্যাগ ম্যানেজ করুন, কাস্টম ফাইল সিস্টেম রুট কনফিগার করুন এবং CLI-তে ডিফল্ট হিসেবে --allow-unrestricted-paths ব্যবহার করুন।
  • চাঙ্কড ট্রেস বাফার পার্সিং: চাঙ্কড ট্রেস বাফার পার্সার এবং ১.২ জিবি ডিফল্ট ট্রেস বাফার সহ বড় পারফর্ম্যান্স রেকর্ডিং পার্স করুন। এছাড়াও, মেমরি লিক আটকাতে DevTools প্রতিটি পার্সের জন্য ট্রেস ইঞ্জিন ইনস্ট্যান্স স্কোপ করে।
  • ডায়ালগ ম্যানেজ করা ও কনসোল পারসিস্টেন্স: ইনপুট টুল অ্যাকশনের সময় ট্রিগার হওয়া জাভাস্ক্রিপ্ট ডায়ালগ অটোমেটিক ম্যানেজ করুন এবং একই ডকুমেন্ট নেভিগেশন জুড়ে কনসোল মেসেজ ইতিহাস সেভ করুন।
  • মেনু আপডেট: সেট-আপ সংক্রান্ত নির্দেশাবলী খুলতে DevTools-এর প্রধান মেনুতে এজেন্টের জন্য Chrome DevTools পান বিকল্পে ক্লিক করুন।

chrome-devtools-mcp রিপোজিটরি থেকে আরও জানুন।

এলিমেন্ট: ভিজ্যুয়াল পজিশন-এরিয়া এডিটর, ইমপ্লিসিট অ্যাঙ্কর সিলেকশন এবং CSS অথরিং আপডেট

এলিমেন্ট প্যানেল CSS অ্যাঙ্কর পজিশনিংয়ের জন্য ভিজ্যুয়াল টুলিংয়ের সুবিধা নিয়ে আসে এবং CSS ইন্সপেকশনকে আরও উন্নত করে:

  • ভিজ্যুয়াল position-area এডিটর: স্টাইল ট্যাবে position-area ডিক্লারেশনের পাশে ইনলাইন সোয়াচে ক্লিক করে ভিজ্যুয়ালি অ্যাঙ্কর গ্রিড অঞ্চল বেছে নিন, একই সাথে বা আলাদাভাবে অক্ষ কনফিগার করুন, self কীওয়ার্ড টগল করুন এবং অক্ষ-বিহীন কীওয়ার্ড ছোট করুন।
  • পপওভার অ্যাডর্নারে ইমপ্লিসিট অ্যাঙ্কর বেছে নেওয়া: কোনও এলিমেন্টে একাধিক ইমপ্লিসিট অ্যাঙ্কর থাকলে, DOM ট্রিতে পপওভার অ্যাডর্নারে ডানদিকের বোতামে ক্লিক করুন এবং যেকোনও সংশ্লিষ্ট অ্যাঙ্কর এলিমেন্টে যান।
  • অ্যাঙ্কর পজিশনিং বক্স ওভারলে: অ্যাঙ্কর-পজিশন করা এলিমেন্ট ডিবাগ করার সময় সরাসরি ভিউপোর্ট ওভারলেতে ইনসেট-মডিফায়েড কন্টেনিং ব্লক (IMCB) মার্জিন, প্যাডিং, বর্ডার ও কন্টেন্ট বক্স পরীক্ষা করুন।
  • Flexbox এডিটরে wrap-reverse: স্টাইল ট্যাবে ভিজ্যুয়াল Flexbox এডিটর থেকে সরাসরি flex-wrap: wrap-reverse টগল করুন।
  • @starting-style-এর জন্য ইনঅ্যাক্টিভ CSS স্টাইল ও ইনহেরিট করা নিয়ম: আপডেট জুড়ে ম্যানুয়ালি বড় ও ছোট করার স্ট্যাটাস বজায় রেখে ইনঅ্যাক্টিভ @starting-style নিয়ম ও Inherited from বিভাগ দেখুন।
  • মাল্টি-ড্যাশ কাস্টম প্রপার্টি ও ক্লাস অটো-কমপ্লিট: তিন বা তার বেশি ড্যাশ (যেমন ---theme-color) দিয়ে শুরু হওয়া CSS কাস্টম প্রপার্টি পরীক্ষা ও এডিট করুন এবং নতুন ক্লাস যোগ করুন অটো-কমপ্লিট সাজেশন থেকে আগে থেকেই প্রয়োগ করা ক্লাস ফিল্টার করে বাদ দিন।
এলিমেন্ট প্যানেল DOM ট্রিতে পপওভার অ্যাডর্নার কনটেক্সট মেনু থেকে একটি ইমপ্লিসিট অ্যাঙ্কর এলিমেন্ট বেছে নেওয়া।
এলিমেন্ট প্যানেলের DOM ট্রিতে পপওভার অ্যাডর্নার কনটেক্সট মেনু থেকে একটি ইমপ্লিসিট অ্যাঙ্কর এলিমেন্ট বেছে নেওয়া।

Chromium সংক্রান্ত সমস্যা: 553335561, 438724570, 413061413, 397184392, 539424116, 533783988

অ্যাপ্লিকেশন: ওয়েব ইনস্টল ম্যানিফেস্ট ডায়াগনস্টিক, বিজ্ঞাপনের উৎস এবং স্টোরেজ টেবিল আপডেট

অ্যাপ্লিকেশন এবং সমস্যা প্যানেল, ওয়েব ইনস্টল ম্যানিফেস্ট, বিজ্ঞাপন স্ক্রিপ্টের উৎস এবং স্টোরেজ পরিদর্শনের জন্য ডায়াগনস্টিক যোগ করে:

  • ওয়েব ইনস্টল ম্যানিফেস্ট ডায়াগনস্টিক: সমস্যা প্যানেলে ওয়েব ইনস্টল (navigator.install এবং <install>) ম্যানিফেস্ট সংক্রান্ত সমস্যাগুলি দেখুন—যার মধ্যে ফেচ করতে না পারা, সিনট্যাক্স সংক্রান্ত সমস্যা, ভুল start_url ভ্যালু, নাম বা আইডি না থাকা এবং ম্যানিফেস্ট না থাকার মতো সমস্যাগুলি অন্তর্ভুক্ত—প্রভাবিত ম্যানিফেস্ট ফাইলের সরাসরি লিঙ্ক সহ।
  • বিজ্ঞাপনের উৎস কলাম এবং মেট্রিক ডকুমেন্টেশন: অ্যাপ্লিকেশন প্যানেলের বিজ্ঞাপন বিভাগে নতুন বিজ্ঞাপনের উৎস কলামটি চেক করে দেখুন যে কোনও বিজ্ঞাপন স্ক্রিপ্ট কোনও পূর্বপুরুষ স্ক্রিপ্ট চেইন বা ফিল্টার তালিকার নিয়মের সাথে মিলেছে কিনা, সাথে ডকুমেন্টেশন টুলটিপ এবং বিজ্ঞাপন মেট্রিক্সে আরও জানুন লিঙ্কগুলি দেখুন।
  • IndexedDB এবং কুকি টেবিল এরগোনমিক্স: IndexedDB ডেটা গ্রিডে নেস্টেড অবজেক্ট বড় করুন, এতে ডাইনামিক সারি উচ্চতা থাকে যা আপনার স্ক্রল পজিশন বজায় রাখে এবং কীবোর্ড বা প্রসঙ্গ মেনু ব্যবহার করে কুকি টেবিলে বেছে নেওয়া সারি মুছে দিন।
অ্যাপ্লিকেশন প্যানেলের বিজ্ঞাপন বিভাগে বিজ্ঞাপনের উৎস কলাম এবং বংশানুক্রমিক টুলটিপ এবং সমস্যা ড্রয়ারে ওয়েব ইনস্টল ম্যানিফেস্ট ত্রুটি পরীক্ষা করা।
অ্যাপ্লিকেশন প্যানেলের বিজ্ঞাপন বিভাগে বিজ্ঞাপনের উৎস কলাম এবং বংশানুক্রমিক টুলটিপ পরীক্ষা করা হচ্ছে, এর পাশাপাশি সমস্যা ড্রয়ারে ওয়েব ইনস্টল ম্যানিফেস্ট ত্রুটিও দেখা হচ্ছে।

Chromium সংক্রান্ত সমস্যা: 333795265, 553428200, 514957134, 555304817, 555304814, 562142155

নেটওয়ার্ক: আর্লি হিন্ট প্রিলোড সংক্রান্ত সতর্কতা ও স্থায়ী ওভাররাইড

নেটওয়ার্ক প্যানেল, আর্লি হিন্টস ডায়াগনস্টিকস, লোকাল ওভাররাইড ও কাস্টম হেডার ওয়ার্কফ্লো রিফাইন করে:

  • ক্যাশে বন্ধ করা থাকলে আর্লি হিন্ট প্রিলোড সংক্রান্ত সতর্কতা: ক্যাশে বন্ধ করুন বিকল্প চালু থাকাকালীন 103 Early Hints রেসপন্সে প্রিলোড লিঙ্ক থাকলে, আর্লি হিন্ট হেডার বিভাগে একটি সতর্কতা দেখুন, যেখানে ব্যাখ্যা করা হয়েছে যে Chrome কেন সেইসব প্রিলোড উপেক্ষা করে।
  • পারসিস্টেন্ট লোকাল ওভাররাইড এবং কাস্টম হেডার কলাম: পৃষ্ঠা নেভিগেশন জুড়ে লোকাল রেসপন্স বডি ওভাররাইড পরিবেশন করুন, কাস্টম অনুরোধ এবং রেসপন্স হেডার কলাম কনফিগারেশন এবং রিলোড জুড়ে সাজানোর ক্রম বজায় রাখুন এবং প্রসঙ্গ মেনু থেকে ট্রাঙ্কেট করা কাঁচা অনুরোধ পেলোড কপি করুন।
'ক্যাশে বন্ধ করুন' বিকল্প চালু এবং লোকাল রেসপন্স ওভাররাইড অ্যাক্টিভ থাকা অবস্থায় নেটওয়ার্ক প্যানেলের হেডার ট্যাবে আর্লি হিন্ট প্রিলোড সংক্রান্ত সতর্কতা পরীক্ষা করা হচ্ছে।
ক্যাশে বন্ধ করা আছে এবং লোকাল রেসপন্স ওভাররাইড অ্যাক্টিভ আছে, এমন অবস্থায় নেটওয়ার্ক প্যানেলের হেডার ট্যাবে আর্লি হিন্টস প্রিলোড সংক্রান্ত সতর্কতা পরীক্ষা করা হচ্ছে।

Chromium সংক্রান্ত সমস্যা: 548701038, 559925510, 563542902, 556269542, 377410082

মেমরি: হিপ স্ন্যাপশটে ডেড কন্টেক্সট ফিল্ড শনাক্তকরণ

মেমরি প্যানেল এখন অব্যবহৃত ক্লোজার ভেরিয়েবল শনাক্ত করে যা V8 এক্সিকিউশন কন্টেক্সটে থেকে যায়। DevTools, হিপ স্ন্যাপশটে এম্বেড করা V8 স্কোপ মেটাডেটা পার্স করে যাতে শেয়ার করা Context অবজেক্টের সাথে ক্লোজার সম্পর্কিত করা যায়। তারপর এটি মেমরি ইমপ্যাক্ট অনুযায়ী সাজানো, কোনও লাইভ ক্লোজার অ্যাক্সেস না করলে, সিবলিং লং-লিভড ক্লোজারের মাধ্যমে অ্যাক্টিভ রাখা ডেড কনটেক্সট ফিল্ড হাইলাইট করে।

শেয়ার করা V8 এক্সিকিউশন কনটেক্সটের মাধ্যমে ধরে রাখা ডেড কনটেক্সট ভেরিয়েবল পরীক্ষা করার জন্য, মেমরি প্যানেলে কনটেক্সটের মাধ্যমে ধরে রাখা অবজেক্ট অনুযায়ী হিপ স্ন্যাপশট ফিল্টার করা।
শেয়ার করা V8 এক্সিকিউশন কনটেক্সটের মাধ্যমে ধরে রাখা ডেড কনটেক্সট ভেরিয়েবল পরীক্ষা করার জন্য, মেমরি প্যানেলে কনটেক্সটের মাধ্যমে ধরে রাখা অবজেক্ট অনুযায়ী হিপ স্ন্যাপশট ফিল্টার করা।

Chromium সংক্রান্ত সমস্যা: ৪৯৭৮৫৫৬৫৮

পারফর্ম্যান্স: আরও মসৃণ টাইমলাইন নেভিগেশন এবং কল ট্রি স্টেট সংরক্ষিত থাকে

পারফর্ম্যান্স প্যানেল আরও বেশি রেসপন্সিভ ফ্লেম চার্ট নেভিগেশন প্রদান করে এবং প্যানেল জুড়ে আপনার বিশ্লেষণের প্রসঙ্গ সংরক্ষণ করে:

  • আরও মসৃণ টাইমলাইন নেভিগেশন: টাইমলাইন মিনিম্যাপ জুম, প্যান ও টেনে আনার সময় আর ল্যাগ করে না।
  • কল ট্রি ও বটম-আপ স্টেট প্রিজার্ভ করা: কল ট্রি ও বটম-আপ ট্যাবে আপনার বড় করা নোড, বেছে নেওয়া বা স্ক্রল পজিশন না হারিয়ে DevTools প্যানেলের মধ্যে পাল্টান।
'পারফর্ম্যান্স' প্যানেলের 'কল ট্রি' ট্যাবে জুম করা টাইমলাইন মিনিম্যাপ রেঞ্জ এবং বড় করা JavaScript অ্যাক্টিভিটি নোড পরীক্ষা করা।
পারফর্ম্যান্স প্যানেলের কল ট্রি ট্যাবে জুম করা টাইমলাইন মিনিম্যাপ রেঞ্জ এবং বড় করা জাভাস্ক্রিপ্ট অ্যাক্টিভিটি নোড পরীক্ষা করা হচ্ছে।

Chromium সংক্রান্ত সমস্যা: 553831653, 561396590

অন্যান্য হাইলাইট

এছাড়াও, Chrome 155 ও Chrome 156-এ DevTools প্যানেল জুড়ে নিম্নলিখিত উন্নতি করা হয়েছে:

  • সেন্সর: সেন্সর প্যানেলে নতুন সিপিইউ পারফর্ম্যান্স টিয়ার কন্ট্রোল থেকে সরাসরি navigator.cpuPerformance ওভাররাইড করুন অথবা অ্যাক্টিভ সিপিইউ থ্রটলিং প্রিসেট রিফ্লেক্ট করতে দিন। (Chromium সংক্রান্ত সমস্যা: ৪৪৯৭৬০২৫২, ৫২৬৮৫৬২৩৪, ৫২৬৮৫৭৮২০)
  • ডিভাইস মোড: এমুলেট করা ডিভাইস অনুযায়ী আপনার স্কেল ও অটোমেটিক অ্যাডজাস্ট করা জুম সংক্রান্ত পছন্দ বজায় রাখুন এবং ডিভাইস টুলবার টগল করার সময় Save-Data ওভাররাইড বজায় রাখুন। (Chromium সংক্রান্ত সমস্যা: 561306841, 555160483)
  • রঙ চয়নকারী: ডার্ক ব্যাকগ্রাউন্ডে হালকা টেক্সটের জন্য APCA কনট্রাস্ট রঙের সাজেশন দেখুন এবং NaN ভ্যালু ছাড়াই আউট-অফ-গ্যামাট রঙকে oklab() এবং oklch()-এ কনভার্ট করুন। (Chromium সংক্রান্ত সমস্যা: 560325669, 558821258)
  • অ্যাক্সেসিবিলিটি: রঙ ছাড়া ইন্ডিকেটর ডট দিয়ে অ্যাক্টিভ রেগুলার এক্সপ্রেশন ফিল্টার টগল শনাক্ত করুন, CSS ওভারভিউ-এ স্ক্রিন রিডারের মাধ্যমে ঘোষিত ফন্ট প্রপার্টির নাম শুনুন এবং উন্নত কীবোর্ড ফোকাস রিং ও প্যানেল জুড়ে হাই কনট্রাস্ট দৃশ্যমানতার মাধ্যমে নেভিগেট করুন। (Chromium সংক্রান্ত সমস্যা: 556764882, 555848535, 555599825, 553804654)
সেন্সর ড্রয়ারে সিপিইউ পারফর্ম্যান্স টিয়ার ওভাররাইড করা এবং রঙ চয়নকারীতে কনট্রাস্ট রেশিও সাজেশন ও oklch ভ্যালু পরীক্ষা করা।
সেন্সর ড্রয়ারে সিপিইউ পারফর্ম্যান্স টিয়ার ওভাররাইড করা এবং রঙ চয়নকারীতে কন্ট্রাস্ট রেশিও সাজেশন ও oklch ভ্যালু পরীক্ষা করা।

Chromium সংক্রান্ত সমস্যা: 449760252, 526856234, 526857820, 561306841, 555160483, 560325669, 558821258, 556764882, 555848535, 555599825, 553804654