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

Sofia Emelianova

জেমিনির কনসোল অন্তর্দৃষ্টি বেশিরভাগ ইউরোপীয় দেশে লাইভ হচ্ছে

এই সংস্করণটি বেশিরভাগ ইউরোপীয় দেশে জেমিনির কনসোল অন্তর্দৃষ্টির সমর্থন নিয়ে আসে।

আপনি যদি এই দেশগুলির মধ্যে একটিতে থাকেন তবে আপনি এখন কনসোলে অন্তর্দৃষ্টি প্রদান করতে Gemini কে বলতে পারেন, যাতে আপনি ত্রুটি এবং সতর্কতাগুলি আরও ভালভাবে বুঝতে পারেন৷

কর্মক্ষমতা প্যানেল আপডেট

এই আপডেটটি পারফরম্যান্স প্যানেলে কিছু উন্নতি এনেছে।

উন্নত নেটওয়ার্ক ট্র্যাক

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

নেটওয়ার্ক ট্র্যাক এখন নিম্নলিখিত কাজ করে:

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

অতিরিক্তভাবে, আপনি এখন সারাংশ ট্যাবে ট্র্যাকের অনুরোধে বা এর URL-এ ডান-ক্লিক করতে পারেন এবং ড্রপ-ডাউন মেনু থেকে নেটওয়ার্ক প্যানেলে প্রকাশ নির্বাচন করতে পারেন। DevTools আপনাকে নেটওয়ার্ক প্যানেলে নিয়ে যাবে এবং আপনি টেবিলে যে অনুরোধটি খুঁজছেন তা হাইলাইট করবে।

এক্সটেনসিবিলিটি API দিয়ে পারফরম্যান্স ডেটা কাস্টমাইজ করুন

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

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

সংক্ষেপে, পারফরম্যান্স ডেটা প্রসারিত করার জন্য, performance.measure() বা performance.mark() API কলগুলির measureOption.detail বা markOption.detail প্যারামিটারগুলিতে একটি নির্দিষ্ট কাঠামো পাস করুন।

টাইমিংস ট্র্যাকে বিশদ বিবরণ

আপনি যদি একজন ওয়েব ডেভেলপার হন যিনি টাইমিংস ট্র্যাকে এন্ট্রি যোগ করতে পারফরম্যান্স API-এর ব্যবহারকারীর সময় অংশ ব্যবহার করেন, তাহলে আপনি এখন ইভেন্টগুলি এবং তাদের টাইমস্ট্যাম্পগুলি mark এবং measure জন্য সারাংশ ট্যাবে আপনার নির্বিচারে বিবরণ দেখতে পারেন৷

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

নেটওয়ার্ক প্যানেলে সমস্ত তালিকাভুক্ত অনুরোধ অনুলিপি করুন

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

নামযুক্ত HTML ট্যাগ এবং কম বিশৃঙ্খলা সহ দ্রুত হিপ স্ন্যাপশট

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

চেক_বক্সের কর্মক্ষমতা ক্যাপচার সেটিং-এ সাংখ্যিক মান অন্তর্ভুক্ত করা হয়েছে, ডিফল্টরূপে চালু করা হয়েছে এবং মেমরি প্যানেল থেকে সরানো হয়েছে।

স্ন্যাপশটে অভ্যন্তরীণ অবজেক্ট ম্যানুয়ালি অন্তর্ভুক্ত করতে, চালু করুন, প্রথমে সেটিংস > পরীক্ষা-নিরীক্ষা > চেক_বক্স হিপ স্ন্যাপশটে অভ্যন্তরীণ প্রকাশ করার বিকল্প দেখান , তারপর মেমরি প্যানেলে চেক_বক্স এক্সপোজ ইন্টারনাল (...) চালু করুন ।

ক্রোমিয়াম সমস্যা: 41490040 , 343341610 , 42203857 ।

অ্যানিমেশন ক্যাপচার করতে এবং @keyframes লাইভ সম্পাদনা করতে অ্যানিমেশন প্যানেল খুলুন

অ্যানিমেশন প্যানেল এখন নিম্নলিখিত কাজ করে:

• আপনি যখন প্যানেল খুলবেন তখন অ্যানিমেশনগুলি ক্যাপচার করে যা ইতিমধ্যেই চলছে, তাই আপনাকে অ্যানিমেশনগুলি ক্যাপচার করতে পৃষ্ঠাটি রিফ্রেশ করতে হবে না৷
• @keyframes এর লাইভ এডিটিং সমর্থন করে। অন্য কথায়, আপনি Elements > Styles- এ @keyframes বিভাগে সম্পাদনা করার সাথে সাথে ক্যাপচার করা অ্যানিমেশন আপডেট করে।

নিম্নলিখিত ভিডিওতে কর্ম উভয় বৈশিষ্ট্য দেখুন.

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

বাতিঘর 12.1.0

Lighthouse প্যানেল এখন Lighthouse 12.1.0 চালায়।

এই আপডেটটি লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) এর পক্ষে পুরানো ফার্স্ট মিনিংফুল পেইন্ট (FMP) মেট্রিক অপসারণ সহ বেশ কয়েকটি পরিবর্তন এনেছে। পরিবর্তনের সম্পূর্ণ তালিকা দেখুন।

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

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

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

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

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

ক্রোমিয়াম সমস্যা: 349939551 , 343942719 , 349334243 , 349428374 ।

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

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

• কর্মক্ষমতা :
  • নেটওয়ার্ক ট্র্যাক: WebSocket সংযোগ ইভেন্ট যোগ করা হয়েছে 331351979 ।
  • পারফরম্যান্স প্যানেল এখন ব্যস্ততম প্রধান থ্রেড কার্যকলাপ 345599356- এ সঠিকভাবে জুম ইন করে।
  • ভুল ট্রেস ফাইলের ধরন আপলোড করার সাথে একটি বাগ সংশোধন করা হয়েছে, এটি এখন সঠিক .json বা .gz 349864878 ব্যতীত যেকোনো ধরনের আপলোড করতে বাধা দেয়।
• উপাদান > শৈলী :
  • দৈর্ঘ্যের সম্পত্তির মানগুলির ইউনিট ড্রপ-ডাউন এখন 41495618 বর্জন করা হয়েছে।
  • নেস্টেড এট-রুল 346732737 এর জন্য স্থির সমাধানকারী সক্রিয় বৈশিষ্ট্য।
  • নিষ্ক্রিয় @position-try বিভাগগুলি এখন ধূসর হয়ে গেছে 40246493 ।
• আবেদন :
  • কুকিজ : একটি বাগ সংশোধন করা হয়েছে যা রিফ্রেশ ক্লিক 348683488 এ কুকি রিফ্রেশ করবে না।
  • স্থানীয় সঞ্চয়স্থান : আপনি এখন 341129585 বর্ণানুক্রমিকভাবে কী দ্বারা বাছাই করতে পারেন।

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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

Sofia Emelianova

মিথুনের কনসোল অন্তর্দৃষ্টিগুলি বেশিরভাগ ইউরোপীয় দেশগুলিতে সরাসরি চলছে

এই সংস্করণটি বেশিরভাগ ইউরোপীয় দেশগুলিতে মিথুনের দ্বারা কনসোল অন্তর্দৃষ্টিগুলির সমর্থন নিয়ে আসে।

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

পারফরম্যান্স প্যানেল আপডেট

এই আপডেটটি পারফরম্যান্স প্যানেলে কয়েকটি উন্নতি নিয়ে আসে।

বর্ধিত নেটওয়ার্ক ট্র্যাক

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

নেটওয়ার্ক ট্র্যাক এখন নিম্নলিখিতগুলি করে:

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

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

এক্সটেনসিবিলিটি এপিআই সহ পারফরম্যান্স ডেটা কাস্টমাইজ করুন

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

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

সংক্ষেপে, পারফরম্যান্সের ডেটা প্রসারিত করতে, পরিমাপের জন্য একটি নির্দিষ্ট কাঠামো পাস করুন measureOption.detail বা markOption.detail performance.measure() বা performance.mark() এপিআই কলগুলির ডিটেল প্যারামিটারগুলি।

সময় ট্র্যাকের বিশদ

আপনি যদি কোনও ওয়েব বিকাশকারী হন যিনি টাইমিংস ট্র্যাকটিতে এন্ট্রি যুক্ত করতে পারফরম্যান্স এপিআইয়ের ব্যবহারকারী সময় অংশটি ব্যবহার করেন, আপনি এখন mark এবং measure ইভেন্ট এবং তাদের টাইমস্ট্যাম্পগুলির জন্য সংক্ষিপ্তসার ট্যাবে আপনার স্বেচ্ছাচারিতা বিশদ দেখতে পাবেন।

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

নেটওয়ার্ক প্যানেলে সমস্ত তালিকাভুক্ত অনুরোধগুলি অনুলিপি করুন

পুরো নেটওয়ার্ক লগটি অনুলিপি করার পরিবর্তে, নেটওয়ার্ক প্যানেলটি এখন আপনাকে ফিল্টার প্রয়োগ করতে দেয় এবং কেবল তালিকাভুক্ত অনুরোধগুলি অনুলিপি করতে দেয়।

নামযুক্ত এইচটিএমএল ট্যাগ এবং কম বিশৃঙ্খলা সহ দ্রুত হিপ স্ন্যাপশটগুলি

মেমরি প্যানেলে হিপ স্ন্যাপশটগুলি আরও দ্রুততর হয়, এখন এইচটিএমএল ট্যাগ দ্বারা নামকরণ করা অবজেক্টগুলি রয়েছে, কম অভ্যন্তরীণ অবজেক্টগুলি দেখিয়ে জাভাস্ক্রিপ্ট ভাষার শব্দার্থবিজ্ঞানের সাথে আরও ভাল মিল রয়েছে এবং সর্বদা সংখ্যার মান অন্তর্ভুক্ত করে।

চেক_বক্সের পারফরম্যান্সের মধ্যে ক্যাপচার সেটিংয়ে সংখ্যাসূচক মানগুলি অন্তর্ভুক্ত করা হয়েছে, ডিফল্টরূপে চালু করা হয়েছে এবং মেমরি প্যানেল থেকে সরানো হয়েছে।

স্ন্যাপশটে ম্যানুয়ালি অভ্যন্তরীণ অবজেক্টগুলিকে অন্তর্ভুক্ত করার জন্য, চালু করুন, প্রথম সেটিংস সেটিংস > পরীক্ষাগুলি > চেক_বক্স শো বিকল্পটি হিপ স্ন্যাপশটে ইন্টার্নালগুলি প্রকাশ করার বিকল্প , তারপরে মেমরি প্যানেলে চেক_বক্স এক্সপোজ ইন্টার্নালস (...) চালু করুন।

ক্রোমিয়াম ইস্যু: 41490040 , 343341610 , 42203857 ।

অ্যানিমেশনগুলি ক্যাপচার করতে অ্যানিমেশন প্যানেল খুলুন এবং @keyframes লাইভ সম্পাদনা করুন

অ্যানিমেশন প্যানেল এখন নিম্নলিখিতগুলি করে:

• আপনি প্যানেলটি খোলার সময় ইতিমধ্যে অগ্রগতিতে থাকা অ্যানিমেশনগুলি ক্যাপচার করে, তাই অ্যানিমেশনগুলি ক্যাপচার করতে আপনাকে পৃষ্ঠাটি রিফ্রেশ করতে হবে না।
• @keyframes লাইভ সম্পাদনা সমর্থন করে। অন্য কথায়, আপনি উপাদান > শৈলীতে @keyframes বিভাগ সম্পাদনা করার সাথে সাথে ক্যাপচার করা অ্যানিমেশন আপডেট করে।

নিম্নলিখিত ভিডিওতে উভয় বৈশিষ্ট্য কর্মে দেখুন।

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

বাতিঘর 12.1.0

বাতিঘর প্যানেল এখন বাতিঘর 12.1.0 চালায়।

এই আপডেটটি বৃহত্তম বিষয়বস্তু পেইন্ট (এলসিপি) এর পক্ষে পুরানো প্রথম অর্থবহ পেইন্ট (এফএমপি) মেট্রিক অপসারণ সহ বেশ কয়েকটি পরিবর্তন নিয়ে আসে। পরিবর্তনের সম্পূর্ণ তালিকা দেখুন।

ডিভটুলগুলিতে বাতিঘর প্যানেল ব্যবহারের মূল বিষয়গুলি শিখতে, বাতিঘর দেখুন: ওয়েবসাইটের গতি অনুকূল করুন ।

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

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

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

• লাইভ এক্সপ্রেশনগুলির সম্পাদনা ক্ষেত্রে স্বয়ংক্রিয়-সমাপ্তির পরে ট্যাব টিপুন ফোকাসটি পরবর্তী ফোকাস পয়েন্টে নিয়ে যায়। পূর্বে, এটি পাঠ্যকে ইনডেন্ট করবে।
• একটি রেসাইজার ক্লিক করা এটিতে ফোকাস রাখে, যাতে আপনি এটি ডান এবং বাম তীর কী দিয়ে সরাতে পারেন।
• একটি স্ক্রিন রিডার এখন উত্সগুলিতে অ্যাড ওয়াচ এক্সপ্রেশন সম্পাদনা ক্ষেত্রটি ঘোষণা করেছে এবং কীবোর্ডের সাথে নেভিগেট করার সময় ঘড়ির এক্সপ্রেশন মুছুন এখন স্পষ্টভাবে দৃশ্যমান।

ক্রোমিয়াম ইস্যু: 349939551 , 343942719 , 349334243 , 349428374 ।

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

এগুলি এই রিলিজের কিছু লক্ষণীয় সমাধান এবং উন্নতি:

• কর্মক্ষমতা :
  • নেটওয়ার্ক ট্র্যাক: ওয়েবকেট সংযোগ ইভেন্টগুলি 331351979 যুক্ত করা হয়েছে।
  • পারফরম্যান্স প্যানেলটি এখন ব্যস্ততম প্রধান থ্রেড ক্রিয়াকলাপ 345599356 এ সঠিকভাবে জুম করে।
  • ভুল ট্রেস ফাইলের প্রকারগুলি আপলোড করে একটি বাগ স্থির করে, এটি এখন সঠিক .json বা .gz 349864878 ব্যতীত যে কোনও প্রকার আপলোড করতে বাধা দেয়।
• উপাদানসমূহ > শৈলী :
  • দৈর্ঘ্যের সম্পত্তির মানগুলিতে ইউনিট ড্রপ-ডাউন এখন 41495618 হ্রাস করা হয়।
  • নেস্টেড এটি-রুলস 346732737 এর জন্য সক্রিয় বৈশিষ্ট্যগুলি স্থির সমাধান করা।
  • নিষ্ক্রিয় @position-try বিভাগগুলি এখন 40246493 ধূসর হয়ে গেছে।
• আবেদন :
  • কুকিজ : এমন একটি বাগ ঠিক করা হয়েছে যা রিফ্রেশে কুকিজ রিফ্রেশ করবে না 348683488 ক্লিক করুন।
  • স্থানীয় স্টোরেজ : আপনি এখন বর্ণানুক্রমিকভাবে 341129585 কীগুলি অনুসারে বাছাই করতে পারেন।

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

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করা

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

• Crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
• আরও বিকল্প ব্যবহার করে একটি ডিভটুল ইস্যু রিপোর্ট করুন > সহায়তা > ডিভটুলগুলিতে একটি ডিভটুলস ইস্যুগুলির প্রতিবেদন করুন ।
• @ ক্রোমডেভটুলস এ টুইট করুন।
• ডিভটুলস ইউটিউব ভিডিও বা ডিভটুলস টিপস ইউটিউব ভিডিওগুলিতে আমাদের নতুন কী সম্পর্কে মন্তব্যগুলি ছেড়ে দিন।

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।

Sofia Emelianova

Console insights by Gemini are going live in most European countries

This version brings support of Console insights by Gemini to most European countries.

If you are in one of those countries, you can now ask Gemini to provide insights right in the Console , so you can better understand errors and warnings.

Performance panel updates

This update brings a few improvements to the Performance panel.

Enhanced Network track

The Network track in the Performance panel has been enhanced to show critical information upfront, for example, more detailed duration and network initiator tree, and to provide greater clarity on the visual cues and colors. So, you don't have to switch between the Network panel and the Performance > Summary tab anymore. In addition, if you still need to switch to the Network panel, we've made it easier and faster for you.

The Network track now does the following:

• Shows a color legend for request types.
• Marks render-blocking requests with red triangles in the upper right corner.
• Shows request initiator upon selection with an arrow. This helps you understand the tree of network initiators that was previously only available in the Network panel.
• On hover, a reworked tooltip now shows structured timing information, including render-blocking status and changes in priority, if any.
• The Summary tab now also shows a breakdown of timings in a column on the right.

Additionally, you can now right-click the request in the track or its URL in the Summary tab and select Reveal in Network panel from the drop-down menu. DevTools will take you to the Network panel and highlight the request you are looking for in the table.

Customize performance data with extensibility API

This version brings support for extension data to the Performance panel. You can now add custom tracks with events and tooltip descriptions to the performance trace, details to the Summary tab, and more . This feature may be useful for developers of frameworks, libraries, and complex applications with custom instrumentation.

See an example of a custom track on this demo page . In Performance > Capture settings , turn on check_box Extension data . Start a performance recording, click Add new Corgi on the demo page, then stop the recording. You'll see a custom track in the trace that contains events with custom tooltips and details in the Summary tab.

In short, to extend performance data, pass a specific structure to the measureOption.detail or markOption.detail parameters of performance.measure() or performance.mark() API calls.

Details in the Timings track

If you are a web developer who uses the User Timing part of Performance API to add entries to the Timings track, you can now see your arbitrary details in the Summary tab for mark and measure events and their timestamps.

Chromium issue: 345418915 .

Copy all listed requests in the Network panel

Instead of copying the entire network log, the Network panel now lets you apply filters and copy only the listed requests.

Faster heap snapshots with named HTML tags and less clutter

Heap snapshots in the Memory panel get even faster, now have objects grouped by named HTML tags, better match JavaScript language semantics by showing fewer internal objects, and always include numeric values.

The performance of check_box Include numerical values in capture setting has been sped up, turned on by default, and removed from the Memory panel.

To manually include internal objects into the snapshot, turn on, first settings Settings > Experiments > check_box Show option to expose internals in heap snapshots , then turn on check_box Expose internals (...) in the Memory panel.

Chromium issues: 41490040 , 343341610 , 42203857 .

Open Animations panel to capture animations and edit @keyframes live

The Animations panel now does the following:

• Captures animations that are already in progress when you open the panel, so you don't have to refresh the page to capture animations.
• Supports live editing of @keyframes . In other words, updates the captured animation as you edit @keyframes section in Elements > Styles .

See both features in action in the following video.

Chromium issue: 352718055 .

Lighthouse 12.1.0

The Lighthouse panel now runs Lighthouse 12.1.0.

This update brings a number of changes, including the removal of the old First Meaningful Paint (FMP) metric in favor of Largest Contentful Paint (LCP) . See the full list of changes .

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed .

Chromium issue: 772558 .

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

This version has the following accessibility improvements:

• Pressing Tab after auto-completion in the edit field of live expressions moves the focus to the next focus point. Previously, it would indent the text.
• Clicking a resizer puts focus on it, so you can move it with right and left arrow keys.
• A screen reader now announces the Add watch expression edit field in Sources and Delete watch expression is now clearly visible when navigating with a keyboard.

Chromium issues: 349939551 , 343942719 , 349334243 , 349428374 .

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

• কর্মক্ষমতা :
  • Network track: Added WebSocket connection events 331351979 .
  • The Performance panel now correctly zooms in on the busiest main thread activity 345599356 .
  • Fixed a bug with uploading wrong trace file types, it now prevents uploading any type except the correct .json or .gz 349864878 .
• Elements > Styles :
  • Unit drop-down in length property values is now deprecated 41495618 .
  • Fixed resolving active properties for nested at-rules 346732737 .
  • Inactive @position-try sections are now grayed out 40246493 .
• আবেদন :
  • Cookies : Fixed a bug that wouldn't refresh cookies upon Refresh click 348683488 .
  • Local storage : You can now sort by keys alphabetically 341129585 .

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.