DevTools, Chrome 137-এ নতুন কী রয়েছে৷

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

গুগল আই/ও ২০২৫ সংস্করণ

এই বছরের গুগল আই/ও-তে ক্রোম ডেভটুলসের উপস্থিতি থাকবে। লাইভ এবং রেকর্ড করা সেশনের মিশ্রণ থাকবে।

নতুন নতুন আকর্ষণীয় বৈশিষ্ট্য সম্পর্কে জানতে, নিম্নলিখিতগুলি দেখুন:

এছাড়াও, র‍্যাচেল অ্যান্ড্রুর " হোয়াটস নিউ অন দ্য ওয়েব সেশন" , ২০ মে, ২০২৫ | ৪:৩০ বিকাল পিটি শুনতে ভুলবেন না।

আমাদের সাম্প্রতিক হাইলাইটগুলির একটি সংক্ষিপ্ত বিবরণের জন্য আমাদের সর্বশেষ ভিডিওটি দেখুন:

জেমিনি দিয়ে আপনার কর্মক্ষেত্রে CSS পরিবর্তনগুলি সংশোধন করুন এবং সংরক্ষণ করুন

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

স্বয়ংক্রিয় কর্মক্ষেত্র একটি পরীক্ষামূলক বৈশিষ্ট্য। আপনি আপনার বিদ্যমান উৎস ফোল্ডারটি সংযুক্ত করতে পারেন অথবা একটি ডেমো চেষ্টা করে দেখতে পারেন।

একটি ওয়ার্কস্পেস ফোল্ডার সংযুক্ত থাকলে, Elements প্যানেলে, Ask AI এ ক্লিক করুন, Gemini কে CSS পরিবর্তন করতে বলুন, Continue to test changes live এ ক্লিক করুন, তারপর Unsaved changes প্রসারিত করুন, Apply to workspace এ ক্লিক করুন, diff পর্যালোচনা করুন এবং Save all এ ক্লিক করুন।

একটি ওয়ার্কস্পেস ফোল্ডার সংযুক্ত করুন এবং পরিবর্তনগুলি আপনার সোর্স ফাইলগুলিতে সংরক্ষণ করুন।

আপনি এখন স্বয়ংক্রিয়ভাবে (অথবা ম্যানুয়ালি) একটি ওয়ার্কস্পেস ফোল্ডার সংযুক্ত করতে পারেন যাতে DevTools আপনার কম্পিউটারে সংরক্ষিত জাভাস্ক্রিপ্ট, HTML এবং CSS পরিবর্তনগুলি আবার সোর্স ফাইলে সংরক্ষণ করতে পারে।

জাভাস্ক্রিপ্টের সাথে এটি কীভাবে কাজ করে তা দেখুন:

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

পারফরম্যান্সের অন্তর্দৃষ্টি সম্পর্কে জেমিনিকে জিজ্ঞাসা করুন

একটি বোতামে ক্লিক করেই, আপনি এখন জেমিনির সাথে চ্যাট শুরু করতে পারেন এবং নিম্নলিখিত পারফরম্যান্স অন্তর্দৃষ্টিগুলি অনুসন্ধান এবং কার্যকর করতে পারেন:

  • পর্যায়ক্রমে LCP
  • LCP অনুরোধ আবিষ্কার
  • রেন্ডার ব্লকিং অনুরোধ
  • লেআউট পরিবর্তনের অপরাধীরা
  • ডকুমেন্ট অনুরোধের বিলম্ব

পারফরম্যান্স প্যানেলে অন্তর্দৃষ্টি পেতে 'Ask AI' বোতামটি যোগ করার আগে এবং পরে।

এই বৈশিষ্ট্য সম্পর্কে আপনার মতামত crbug.com/371170842 ঠিকানায় জানাতে দ্বিধা করবেন না।

জেমিনি দিয়ে পারফরম্যান্সের ফলাফল টীকা করুন

আপনি এখন জেমিনিকে পারফরম্যান্স ট্রেসে ইভেন্ট সম্পর্কে টীকা তৈরি করতে বলতে পারেন।

মেইন ট্র্যাকের একটি ইভেন্টে ডাবল-ক্লিক করুন, তারপর ইনপুট ফিল্ডের পাশে Generate label এ ক্লিক করুন। স্ট্যাক ট্রেস এবং প্রসঙ্গের উপর ভিত্তি করে জেমিনি একটি লেবেল প্রস্তাব করতে পারে।

জেমিনির সাথে আপনার চ্যাটে স্ক্রিনশট যোগ করুন

AI সহায়তা প্যানেলে, আপনি এখন স্ক্রিনশট নিন বোতামে ক্লিক করে পৃষ্ঠাটির একটি স্ক্রিনশট ক্যাপচার করতে পারেন এবং এটি জেমিনির সাথে আপনার চ্যাটে জমা দিতে পারেন।

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

'এআই সহায়তা' প্যানেলে 'স্ক্রিনশট নিন' বোতামটি যুক্ত করার আগে এবং পরে।

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

এই সংস্করণটি পারফরম্যান্স প্যানেলে দুটি নতুন অন্তর্দৃষ্টি নিয়ে আসে: ডুপ্লিকেটেড জাভাস্ক্রিপ্ট এবং লিগ্যাসি জাভাস্ক্রিপ্ট ।

ডুপ্লিকেট জাভাস্ক্রিপ্ট

নতুন Performance > Insights > Duplicated JavaScript আপনার পৃষ্ঠায় উপস্থিত থাকলে, আপনার বান্ডেলগুলিতে থাকা বৃহৎ ডুপ্লিকেট জাভাস্ক্রিপ্ট মডিউলের অনুরোধগুলিকে নেটওয়ার্ক ট্র্যাকে হাইলাইট করবে।

পারফরম্যান্স প্যানেলে 'ডুপ্লিকেটেড জাভাস্ক্রিপ্ট' অন্তর্দৃষ্টি।

জাভাস্ক্রিপ্ট নির্ভরতা অন্বেষণ করতে আপনি ইনসাইট-এ View Treemap-এ ক্লিক করতে পারেন।

লিগ্যাসি জাভাস্ক্রিপ্ট

নতুন Performance > Insights > Legacy JavaScript আপনার পৃষ্ঠায় যদি লিগ্যাসি জাভাস্ক্রিপ্টের অনুরোধ থাকে, তাহলে Network track-এ সেগুলো হাইলাইট করবে, উদাহরণস্বরূপ, পলিফিল এবং ট্রান্সফর্ম যা পুরানো ব্রাউজারগুলিকে নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্য ব্যবহার করতে সক্ষম করে। তবে, আধুনিক ব্রাউজারগুলির জন্য অনেকগুলি প্রয়োজনীয় নয়।

পারফরম্যান্স প্যানেলে 'লিগ্যাসি জাভাস্ক্রিপ্ট' অন্তর্দৃষ্টি।

জল্পনা এখন নিয়ম ট্যাগ সমর্থন করে

যদি ট্যাগ থাকে, তাহলে Application > Speculative loads এখন নিয়ম সেটের জন্য URL-এর পরিবর্তে ট্যাগ দেখায়।

নিয়ম সেট URL-এর পরিবর্তে একটি ট্যাগ ব্যবহার করার আগে এবং পরে।

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

বাতিঘর ১২.৬.০

লাইটহাউস প্যানেলটি এখন লাইটহাউস ১২.৬.০ চালিত।

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

লাইটহাউস রিপোর্টে অন্তর্দৃষ্টিতে স্যুইচ করার বিকল্প যোগ করার আগে এবং পরে।

পরিবর্তনগুলির সম্পূর্ণ তালিকাও দেখুন।

DevTools-এ Lighthouse প্যানেল ব্যবহারের মূল বিষয়গুলি জানতে, Lighthouse: ওয়েবসাইটের গতি অপ্টিমাইজ করুন দেখুন।

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

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

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

  • নেটওয়ার্ক : সার্ভার টাইমিংয়ের পরিচিত ফর্ম্যাটগুলির জন্য পার্সিং যোগ করা হয়েছে।
  • আপনি এখন Cmd / Ctrl + ক্লিক (Chromium সমস্যা: 409474445 ) ব্যবহার করে টেবিলের সারিগুলি অনির্বাচন করতে পারেন।
  • কর্মক্ষমতা > অন্তর্দৃষ্টি > দক্ষ ক্যাশে ব্যবহার করুন লাইফটাইম এখন ৩০ দিনের সমান বা তার বেশি TTL সহ সম্পদ উপেক্ষা করে।

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

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

  • পারফরম্যান্স : ট্রেসে ইনিশিয়েটর তীরগুলি এখন আরও দৃশ্যমান।
  • এলিমেন্টস : আপনি এখন শর্টকাট A (Chromium সমস্যা: 40888478 ) ব্যবহার করে পূর্ণ-পৃষ্ঠা অ্যাক্সেসিবিলিটি ট্রি ভিউ টগল করতে পারেন।

  • স্ক্রিন রিডাররা এখন অন্যান্য বিষয়ের মধ্যে ঘোষণা করে:

    • কোড ব্লক থেকে কপি করলে "ক্লিপবোর্ডে কপি করা হয়েছে"।
    • AI সহায়তা চ্যাটে আপনার কর্মক্ষেত্রে পরিবর্তনগুলি প্রয়োগ করার সময় "কর্মক্ষেত্রে আবেদন করা"।
    • "লেবেল তৈরি করা হচ্ছে" যখন আপনি AI কে Performance > Annotations এ এটি তৈরি করতে বলেন।
    • মনে রাখবেন যে AI সহায়তা চ্যাটে প্রস্তাবিত প্রম্পট রয়েছে।
    • প্রাসঙ্গিক অন্তর্দৃষ্টির জন্য আনুমানিক সঞ্চয় সম্পর্কে জানুন পারফরম্যান্স > অন্তর্দৃষ্টিতে ।

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

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

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

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

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

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