DevTools (Chrome 145) এ নতুন কী?

প্রকাশিত: ১১ ফেব্রুয়ারি, ২০২৬

ক্রোম ১৩৯-এর মতোই, ক্রোম ১৪৫-এর ক্ষেত্রেও ক্রোম ডেভটুলস টিম পণ্যের উৎকর্ষ, জ্ঞাত সমস্যাগুলোর সমাধান, UI বাস্তবায়নকে একীভূত করা এবং টেস্টের কার্যকারিতা উন্নত করার ওপর অগ্রাধিকার দিয়েছে। এই প্রচেষ্টার মাধ্যমে বিভিন্ন প্যানেলে আনা অসংখ্য সূক্ষ্ম সংশোধন ও পরিমার্জন আপনার দৈনন্দিন ডিবাগিং এবং ডেভেলপমেন্টের কাজকে আরও মসৃণ, নির্ভরযোগ্য এবং ফলপ্রসূ করে তুলবে।

ডেভটুলস এমসিপি সার্ভার আপডেট

DevTools MCP সার্ভারটি v0.11.0 থেকে v0.14.0-তে উল্লেখযোগ্য আপডেট পেয়েছে, যার মাধ্যমে গুরুত্বপূর্ণ অটোমেশন এবং এমুলেশন সক্ষমতা যুক্ত করা হয়েছে।

  • স্বয়ংক্রিয় সংযোগ: নতুন --auto-connect ফ্ল্যাগটি সার্ভারকে স্বয়ংক্রিয়ভাবে একটি চলমান Chrome ইনস্ট্যান্স খুঁজে বের করতে এবং তার সাথে সংযুক্ত হতে সাহায্য করে, ফলে ম্যানুয়ালি WebSocket URL কপি করার প্রয়োজন হয় না।
  • একীভূত এমুলেশন: এখন একটিমাত্র emulate টুলই জিওলোকেশন, নেটওয়ার্কের অবস্থা (অফলাইন/ধীরগতির ৩জি), সিপিইউ থ্রটলিং এবং ইউজার এজেন্ট ওভাররাইড পরিচালনা করে।
  • সংরক্ষিত লগ: এখন আপনি ডেভটুলস-এর 'লগ সংরক্ষণ' কার্যকারিতার আদলে, নেভিগেশন জুড়ে নেটওয়ার্ক অনুরোধ এবং কনসোল বার্তা অ্যাক্সেস করতে পারবেন।

পরিবর্তনগুলির সম্পূর্ণ তালিকার জন্য গিটহাবে থাকা পাবলিক চেঞ্জলগটি দেখুন।

সফট নেভিগেশন এখন ট্রেস ভিউতে দেখা যাচ্ছে।

আপনার ওয়েবসাইট যদি সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) আর্কিটেকচার ব্যবহার করে, তাহলে এখন পারফরম্যান্স প্যানেলের ট্রেস ভিউতে সফট নেভিগেশন এবং সফট এলসিপি মার্কারগুলো দেখা যাবে। এর ফলে আধুনিক ওয়েব অ্যাপ্লিকেশনগুলোতে পারফরম্যান্স ডিবাগ করা উল্লেখযোগ্যভাবে সহজ হয়ে যায়, যেখানে সম্পূর্ণ পেজ রিলোড ছাড়াই নেভিগেশন সম্পন্ন হয়।

এই ব্লগ পোস্টে সফট নেভিগেশন সম্পর্কে আরও পড়ুন। লাইভ মেট্রিক্স ভিউ এবং পারফরম্যান্স ইনসাইটস-এ সফট নেভিগেশন প্রতিফলিত হয় না, কিন্তু এই এপিআই-এর কাজ চলতে থাকায় ভবিষ্যতের রিলিজগুলোতে সেই কাজটি করার পরিকল্পনা রয়েছে।

পারফরম্যান্স প্যানেলে youtube.com থেকে প্রাপ্ত ট্রেস সহ একটি সফট ন্যাভ মার্কার।

ক্রোমিয়াম সমস্যা: 450673886 , 450673887

লাইন-লেভেল প্রোফাইলারের টাইমিং এখন অনেক বেশি নির্ভুল।

পারফরম্যান্স প্যানেলে একটি ট্রেস রেকর্ড করার পর, সোর্সেস প্যানেলটি ট্রেসে প্রাপ্ত সময়গুলো লাইন-ভিত্তিক প্রদর্শন করে। এর মাধ্যমে আপনি নির্ভুলভাবে শনাক্ত করতে পারেন যে কোডের কোন লাইনগুলো সবচেয়ে বেশি এক্সিকিউশন টাইম নিচ্ছে।

পূর্বে এই ফিচারটিতে কিছু বাগ ছিল, যার কারণে সোর্স কোড সুন্দরভাবে ফরম্যাট করা হলে ( {} বাটন ব্যবহার করে) অথবা সোর্স-ম্যাপড স্ক্রিপ্ট ব্যবহার করার সময় এটি নির্ভরযোগ্য ছিল না। এই সমস্যাগুলো সমাধান করা হয়েছে, ফলে এখন প্রোডাকশন-রেডি ও মিনিফাইড কোডের জন্য লাইন-লেভেল প্রোফাইলিং নির্ভুল এবং ব্যবহারযোগ্য।

সোর্সেস প্যানেলে লাইন নম্বরের পাশে কার্য সম্পাদনের সময় দেখানো হয়েছে।

দ্রুততর ট্রেস ইন্টারঅ্যাকশন

পারফরম্যান্স প্যানেলের একটি বড় প্রতিবন্ধকতা সমাধান করা হয়েছে। পূর্বে, অপ্রয়োজনীয় ইভেন্ট সর্টিংয়ের কারণে টাইম রেঞ্জ নির্বাচন করা বা ব্যস্ত ট্রেসগুলো প্যান করার সময় UI-তে উল্লেখযোগ্য ল্যাগ দেখা দিত। এটিকে অপ্টিমাইজ করা হয়েছে, ফলে জটিল ফ্লেম চার্টের সাথে ইন্টারঅ্যাকশন এখন অনেক বেশি রেসপন্সিভ।

ক্রোমিয়াম ইস্যু: 457866795

রেন্ডার-ব্লকিং রিসোর্স শনাক্ত করুন

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

নেটওয়ার্ক প্যানেলে নতুন রেন্ডার ব্লকিং কলাম।

ক্রোমিয়াম ইস্যু: ৪১১৬৯১৫৪

স্বতন্ত্র নেটওয়ার্ক অনুরোধের গতি হ্রাস

ক্রোম ১৪৪-এ চালু হওয়া রিকোয়েস্ট কন্ডিশনস প্যানেলে (যা পূর্বে নেটওয়ার্ক রিকোয়েস্ট ব্লকিং নামে পরিচিত ছিল), এখন ডিফল্টরূপে স্বতন্ত্র রিকোয়েস্ট থ্রটলিং সক্রিয় করা আছে।

যদিও এই ফিচারটি পূর্ববর্তী মাইলস্টোনে চালু করা হয়েছিল, কিন্তু পরবর্তীকালে একটি রিগ্রেশনের কারণে এটি নিষ্ক্রিয় করে দেওয়া হয়। ক্রোম ১৪৫-এ, আপনি এখন ধীরগতির ডিপেন্ডেন্সি অনুকরণ করতে অথবা আপনার অ্যাপ নির্দিষ্ট রিসোর্স ডিলে কীভাবে সামলায় তা পরীক্ষা করার জন্য নির্ভরযোগ্যভাবে নির্দিষ্ট নেটওয়ার্ক রিকোয়েস্টের গতি কমাতে পারবেন।

নির্দিষ্ট প্যাটার্ন থ্রটলিং বা ব্লক করা শুরু করতে > আরও টুলস > শর্তাবলীর অনুরোধ থেকে প্যানেলটি খুলুন।

@starting-style এর জন্য ডিবাগিং উন্নতি

CSS @starting-style রুল ডিবাগ করার সুবিধা এখন ডিফল্টরূপে সক্রিয় করা হয়েছে । এই ফিচারটি কোনো এলিমেন্ট প্রথমবার রেন্ডার হওয়ার সময় প্রয়োগ করা স্টাইলগুলো পরীক্ষা করতে সাহায্য করে, যা এন্ট্রি অ্যানিমেশন এবং ট্রানজিশন ডিবাগ করার জন্য অপরিহার্য।

ক্রোমিয়াম ইস্যু: ৪৬৫৩৬৭৫৭২

এআই সহায়তা আপডেট

  • মাল্টিমোডাল ইনপুট: এখন আপনি আপনার ক্লিপবোর্ড থেকে সরাসরি ছবি পেস্ট করে এআই অ্যাসিস্ট্যান্স চ্যাটে দৃষ্টি সংক্রান্ত সমস্যা নিয়ে প্রশ্ন করতে পারবেন।

ক্রোমিয়াম ইস্যু: ৪৭০৯৯৭৬৯৯

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

  • উপাদানসমূহ: রুট <html> ট্যাগের পাশে একটি নতুন 'ভিউ সোর্স' ব্যাজ যোগ করা হয়েছে, যা ডকুমেন্টের সোর্স কোডে দ্রুত যাওয়ার একটি উপায় প্রদান করে।
  • সূত্র: সম্পাদনাযোগ্য JSON ফাইলগুলিতে এখন একটি রিভার্সিবল প্রিটি-প্রিন্ট টগল রয়েছে, যার ফলে মূল ফরম্যাটিং না হারিয়ে ডেটা সম্পাদনা করা আরও সহজ হয়।
  • নেটওয়ার্ক: আরও ভালো পাঠযোগ্যতার জন্য কনটেক্সট মেনুর আইটেমগুলো সেন্টেন্স কেস ব্যবহার করে আপডেট করা হয়েছে।
  • কনসোল: পেজ রিলোড করার পর আনক্যাচড এক্সেপশনের ফিল্টারগুলো হারিয়ে যাওয়ার সমস্যাটি সমাধান করা হয়েছে।

ক্রোমিয়াম সমস্যা: 378870233 , 461041921 , 433162438

প্রবেশগম্যতা ঘোষণা

এই সংস্করণে নিম্নলিখিত প্রবেশগম্যতা উন্নয়নগুলি আনা হয়েছে:

  • অনুসন্ধান: এখন Ctrl+F ব্যবহার করার সময় স্ক্রিন রিডার অনুসন্ধানের ফলাফলের সংখ্যা ঘোষণা করে (যেমন, "৫টির মধ্যে ১")।
  • রেকর্ডার: কোনো রেকর্ডিং সফলভাবে মুছে ফেলা বা ইম্পোর্ট করা হলে এখন স্ক্রিন রিডার তা ঘোষণা করে।
  • সেটিংস: এখন থেকে এক্সপেরিমেন্টস ট্যাবে ফিল্টার করার সময় স্ক্রিন রিডার ফলাফলের সংখ্যা ঘোষণা করবে।
  • গোপনীয়তা: প্রাইভেসি প্যানেলের অরিজিন গ্রুপটি এখন কিবোর্ড ব্যবহার করে সম্পূর্ণরূপে অ্যাক্সেস করা যাবে।
  • UI: ডক আইকনগুলোর দৃশ্যমানতা উন্নত করা হয়েছে এবং হাই কনট্রাস্ট ও ফোর্সড কালার মোডে ব্যবহারকারীদের জন্য এলিমেন্ট নির্বাচন করা নিষ্ক্রিয় করা হয়েছে।

ক্রোমিয়াম সমস্যা: 448675917 , 392090449 , 471713944 , 471141907 , 471095586