DevTools এ নতুন কি আছে (Chrome 116)

Sofia Emelianova

অনুপস্থিত স্টাইলশীটগুলির উন্নত ডিবাগিং

DevTools আপনাকে অনুপস্থিত স্টাইলশীটগুলির সমস্যাগুলি দ্রুত শনাক্ত করতে এবং ডিবাগ করতে সহায়তা করার জন্য বেশ কয়েকটি উন্নতি পায়:

• উৎস > পৃষ্ঠা ট্রি এখন শুধুমাত্র সফলভাবে স্থাপন করা এবং লোড করা স্টাইলশীট দেখায় বিভ্রান্তি কমাতে।
• উত্স > সম্পাদক এখন ব্যর্থ @import , url() , এবং href বিবৃতিগুলির পাশে ইনলাইন ত্রুটি টুলটিপগুলিকে আন্ডারলাইন করে এবং দেখায়৷

• কনসোল , ব্যর্থ অনুরোধের লিঙ্কগুলি ছাড়াও, এখন সঠিক লাইনের লিঙ্ক সরবরাহ করে যা একটি স্টাইলশীট উল্লেখ করে যা লোড হতে ব্যর্থ হয়েছে।

• নেটওয়ার্ক প্যানেল ধারাবাহিকভাবে ইনিশিয়েটর কলামকে সঠিক লাইনের লিঙ্ক সহ পপুলেট করে যা একটি স্টাইলশীট উল্লেখ করে যা লোড হতে ব্যর্থ হয়।

• ইস্যু প্যানেল সমস্ত স্টাইলশীট লোডিং সমস্যা তালিকাভুক্ত করে, যার মধ্যে ভাঙা URL, ব্যর্থ অনুরোধ এবং ভুল @import স্টেটমেন্ট রয়েছে।

ক্রোমিয়াম সমস্যা: 1440626 , 1442198 , 1453611 ।

উপাদান > শৈলী > ইজিং এডিটরে লিনিয়ার টাইমিং সমর্থন

দ এলিমেন্টস > শৈলীতে ইজিং এডিটর আপনাকে একটি ক্লিকের মাধ্যমে transition-timing-function এবং animation-timing-function মান সামঞ্জস্য করতে দেয়। এই সংস্করণে, ইজিং এডিটর লিনিয়ার টাইমিং ফাংশন সমর্থন পায়।

লিনিয়ার টাইমিং কনফিগার করতে, লিনিয়ার পিকার বোতামে ক্লিক করুন। একটি নিয়ন্ত্রণ পয়েন্ট যোগ করতে, লাইনের যে কোনো জায়গায় ক্লিক করুন। একটি নিয়ন্ত্রণ বিন্দু সরাতে, এটি ডাবল ক্লিক করুন. এছাড়াও আপনি প্রিসেটগুলির মধ্যে একটি বেছে নিতে পারেন: linear , elastic , bounce , বা emphasized ৷ অ্যাকশনে রৈখিক সমন্বয় দেখতে ভিডিওটি দেখুন।

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

স্টোরেজ বালতি সমর্থন এবং মেটাডেটা ভিউ

অ্যাপ্লিকেশন > স্টোরেজ বিভাগ স্টোরেজ বালতি সমর্থন পায়। স্টোরেজ বাকেটগুলি একে অপরের থেকে স্বাধীন, তাই আপনি ডেটার স্লাইসগুলির জন্য উচ্ছেদ অগ্রাধিকার নির্দিষ্ট করতে পারেন এবং নিশ্চিত করতে পারেন যে সবচেয়ে মূল্যবান ডেটা মুছে না যায়৷ প্রতিটি স্টোরেজ বালতি প্রতিষ্ঠিত স্টোরেজ API যেমন IndexedDB এবং CacheStorage এর সাথে সম্পর্কিত ডেটা সঞ্চয় করতে পারে।

বৈশিষ্ট্য পরীক্ষা করতে এই বেহালা দেখুন. DevTools খুলুন, Application > Storage > Indexed DB এ নেভিগেট করুন এবং কোডটি চালান। DevTools এখন আপনাকে বালতি এবং তাদের বিষয়বস্তু দেখায়। এর মেটাডেটা দেখতে একটি বালতি নির্বাচন করুন।

ইউনিফাইড মেটাডেটা ভিউ এখন স্থানীয়, সেশন এবং ক্যাশে স্টোরেজ বিভাগের জন্যও উপলব্ধ।

ক্রোমিয়াম সমস্যা: 1448011 , 1406017 ।

বাতিঘর 10.3.0

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

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

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

অ্যাক্সেসযোগ্যতা: কীবোর্ড কমান্ড এবং উন্নত স্ক্রিন রিডিং

DevTools এখন আরও শর্টকাট সমর্থন করে এবং স্ক্রিন রিডারগুলির সমস্যা সমাধান করে:

• আপনি এখন একটি কীবোর্ড শর্টকাট দিয়ে প্রসঙ্গ মেনু খুলতে পারেন, উদাহরণস্বরূপ, Windows এবং অনেক লিনাক্স ডিস্ট্রিবিউশনে Shift + F10 । MacOS শর্টকাটগুলির জন্য, বিকল্প পয়েন্টার অ্যাকশনগুলি দেখুন।
• স্ক্রিন রিডার অ্যাপ্লিকেশন:
  • অপ্রয়োজনীয়ভাবে চেকবক্স লেবেল দুবার ঘোষণা করবে না।
  • আপনি যখন "কলাম শিরোনাম পড়ুন" শর্টকাট টিপুন তখন বাছাইযোগ্য কলামগুলির জন্য কলাম হেডারের নাম ঘোষণা করবে৷

DevTools টিম এই উন্নতিগুলি অবতরণ করার জন্য Yanling Wang এবং Elorm Coch-এর প্রতি কৃতজ্ঞতা প্রকাশ করে৷

ক্রোমিয়াম সমস্যা: 1446482 , 1414952 ।

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

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

• আপনি টাইমলাইন ( 1422552 ) এর সাথে ইন্টারঅ্যাক্ট করার পরেও নেটওয়ার্ক প্যানেল নেটওয়ার্ক কার্যকলাপ রেকর্ড করা চালিয়ে যায়।
• প্রি-রেন্ডার অ্যাক্টিভেশন বা ব্যাক/ফরোয়ার্ড ক্যাশে নেভিগেশন ছিল কিনা কভারেজ প্যানেল এখন শনাক্ত করে এবং আপনাকে পুনরায় লোড করতে অনুরোধ করে ( 1393057 )।
• আপনি এখন কীবোর্ডের সাহায্যে উত্স > ব্রেকপয়েন্ট প্যানে নেভিগেট করতে পারেন: সরানোর জন্য তীর উপরে এবং নিচের দিকে এবং স্থান নির্বাচন করতে ( 1446150 )।
• নেটওয়ার্ক প্যানেলে স্থির HAR ফাইল আপলোড এবং ফিল্টারিং ( 1450622 )।
• পারফরম্যান্স প্যানেলে ফ্লেমচার্ট এখন ট্রেসের মধ্যে ছোট ফাঁক রাখে যাতে সেগুলিকে আরও ভালোভাবে রেন্ডার করা যায় ( 1452150 )।
• সোর্স ম্যাপে এম্বেড করা ফাইলগুলির জন্য স্থির স্বয়ংক্রিয় ম্যাপিং ( 1446383 )।

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

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

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

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

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

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

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

Sofia Emelianova

অনুপস্থিত স্টাইলশিটগুলির উন্নত ডিবাগিং

ডিভটুলস আপনাকে নিখোঁজ স্টাইলশিটগুলি দ্রুত সনাক্ত করতে এবং ডিবাগ করতে সহায়তা করতে বেশ কয়েকটি উন্নতি পেয়েছে:

• উত্স > পৃষ্ঠা গাছ এখন বিভ্রান্তি হ্রাস করতে কেবল সফলভাবে মোতায়েন করা এবং লোডযুক্ত স্টাইলশিটগুলি দেখায়।
• উত্স > সম্পাদক এখন @import , url() এবং href বিবৃতিগুলির পাশে ইনলাইন ত্রুটি সরঞ্জামটিগুলি আন্ডারলাইন করে এবং দেখায়।

• কনসোল , ব্যর্থ অনুরোধগুলির লিঙ্কগুলি ছাড়াও, এখন সঠিক লাইনের লিঙ্কগুলি সরবরাহ করে যা লোড করতে ব্যর্থ একটি স্টাইলশিটকে উল্লেখ করে।

• নেটওয়ার্ক প্যানেল ধারাবাহিকভাবে সঠিক লাইনের লিঙ্কগুলির সাথে ইনিশিয়েটর কলামটিকে পপুলেট করে যা লোড করতে ব্যর্থ একটি স্টাইলশিটকে উল্লেখ করে।

• ইস্যু প্যানেলে সমস্ত স্টাইলশিটগুলি লোডিং ইস্যুগুলি, ভাঙা ইউআরএল, ব্যর্থ অনুরোধগুলি এবং @import স্টেটমেন্টগুলি ভুল জায়গায় স্থান দেওয়া হয়েছে।

ক্রোমিয়াম ইস্যু: 1440626 , 1442198 , 1453611 ।

উপাদানগুলিতে লিনিয়ার টাইমিং সমর্থন> শৈলী> স্বাচ্ছন্দ্য সম্পাদক

দ উপাদানগুলিতে সম্পাদক ইজিং > স্টাইলগুলি আপনাকে একটি ক্লিকের সাথে transition-timing-function এবং animation-timing-function মানগুলি সামঞ্জস্য করতে দেয়। এই সংস্করণে, ইজিং এডিটর লিনিয়ার টাইমিং ফাংশন সমর্থন পায়।

লিনিয়ার সময়গুলি কনফিগার করতে, লিনিয়ার পিকার বোতামটি ক্লিক করুন। একটি নিয়ন্ত্রণ পয়েন্ট যুক্ত করতে, লাইনের যে কোনও জায়গায় ক্লিক করুন। একটি নিয়ন্ত্রণ পয়েন্ট অপসারণ করতে, এটি ডাবল ক্লিক করুন। আপনি প্রিসেটগুলির মধ্যে একটিও চয়ন করতে পারেন: linear , elastic , bounce বা emphasized । ক্রিয়াকলাপে লিনিয়ার সামঞ্জস্য দেখতে ভিডিওটি দেখুন।

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

স্টোরেজ বালতি সমর্থন এবং মেটাডেটা ভিউ

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

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

ইউনিফাইড মেটাডেটা ভিউ এখন স্থানীয়, সেশন এবং ক্যাশে স্টোরেজ বিভাগগুলির জন্যও উপলব্ধ।

ক্রোমিয়াম ইস্যু: 1448011 , 1406017 ।

বাতিঘর 10.3.0

বাতিঘর প্যানেল এখন বাতিঘর 10.3.0 চালায়। সবচেয়ে উল্লেখযোগ্যভাবে, এই সংস্করণটি চারটি নতুন অডিট যুক্ত করেছে যা টেবিল শিরোনাম এবং ক্যাপশন , ইনপুট বোতামের নাম এবং ভাষার অমিলগুলি সহ বিভিন্ন অ্যাক্সেসযোগ্যতার সমস্যাগুলি ক্যাপচার করে। যেমন:

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

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

অ্যাক্সেসযোগ্যতা: কীবোর্ড কমান্ড এবং উন্নত স্ক্রিন পঠন

ডিভটুলগুলি এখন আরও শর্টকাট সমর্থন করে এবং স্ক্রিন পাঠকদের সাথে সমস্যাগুলি সমাধান করে:

• আপনি এখন কীবোর্ড শর্টকাট দিয়ে প্রসঙ্গ মেনুটি খুলতে পারেন, উদাহরণস্বরূপ, উইন্ডোজ এবং অনেকগুলি লিনাক্স বিতরণে শিফট + এফ 10 । ম্যাকোস শর্টকাটগুলির জন্য, বিকল্প পয়েন্টার ক্রিয়াগুলি দেখুন।
• স্ক্রিন রিডার অ্যাপ্লিকেশন:
  • অকারণে চেকবক্স লেবেল দু'বার ঘোষণা করবে না।
  • আপনি "কলাম শিরোনাম পড়ুন" শর্টকাট টিপলে বাছাইযোগ্য কলামগুলির জন্য কলাম শিরোনামের নামগুলি ঘোষণা করবে।

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

ক্রোমিয়াম ইস্যু: 1446482 , 1414952 ।

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

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

• আপনি টাইমলাইন ( 1422552 ) এর সাথে ইন্টারঅ্যাক্ট করার পরেও নেটওয়ার্ক প্যানেল নেটওয়ার্ক ক্রিয়াকলাপ রেকর্ডিং চালিয়ে যাচ্ছে।
• কভারেজ প্যানেলটি এখন স্বীকৃতি দেয় যে প্রেরেন্ডার অ্যাক্টিভেশন বা ব্যাক/ফরোয়ার্ড ক্যাশে নেভিগেশন ছিল এবং আপনাকে পুনরায় লোড করতে অনুরোধ করে ( 1393057 )।
• আপনি এখন কীবোর্ডের সাথে উত্স > ব্রেকপয়েন্টস ফলকটি নেভিগেট করতে পারেন: তীরটি এবং তীরটি সরানোর জন্য এবং নির্বাচন করার জন্য স্থান ( 1446150 )।
• নেটওয়ার্ক প্যানেলে ফিক্সড এইচআর ফাইলগুলি আপলোড এবং ফিল্টারিং ( 1450622 )।
• পারফরম্যান্স প্যানেলে ফ্ল্যামকার্ট এখন তাদের আরও ভাল ( 1452150 ) রেন্ডার করার জন্য ট্রেসগুলির মধ্যে ছোট ফাঁক ফেলেছে।
• উত্স মানচিত্রে এম্বেড করা ফাইলগুলির জন্য স্থির স্বয়ংক্রিয় ম্যাপিং ( 1446383 )।

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

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

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

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

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

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

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

Sofia Emelianova

Improved debugging of missing stylesheets

DevTools gets a number of improvements to help you identify and debug issues with missing stylesheets faster:

• The Sources > Page tree now shows only the successfully deployed and loaded stylesheets to minimize confusion.
• The Sources > Editor now underlines and shows inline error tooltips next to failed @import , url() , and href statements.

• The Console , in addition to links to failed requests, now provides links to the exact line that references a stylesheet that failed to load.

• The Network panel consistently populates the Initiator column with links to the exact line that references a stylesheet that failed to load.

• The Issues panel lists all stylesheets loading issues, including broken URLs, failed requests, and misplaced @import statements.

Chromium issues: 1440626 , 1442198 , 1453611 .

Linear timing support in Elements > Styles > Easing Editor

দ Easing Editor in Elements > Styles lets you adjust transition-timing-function and animation-timing-function values with a click. In this version, the Easing Editor gets the linear timing function support.

To configure linear timings, click the linear picker button. To add a control point, click anywhere on the line. To remove a control point, double-click it. You can also choose one of the presets: linear , elastic , bounce , or emphasized . Watch the video to see the linear adjustment in action.

Chromium issue: 1421241 .

Storage buckets support and metadata view

The Application > Storage section gets storage buckets support. Storage buckets are independent from each other, so you can specify eviction prioritization for slices of data and make sure the most valuable data doesn't get deleted. Each storage bucket can store data associated with established storage APIs such as IndexedDB and CacheStorage .

Check out this fiddle to test the feature. Open DevTools, navigate to Application > Storage > Indexed DB , and run the code. DevTools now shows you the buckets and their contents. Select a bucket to view its metadata.

The unified metadata view is now also available for local, session, and cache storage sections.

Chromium issues: 1448011 , 1406017 .

Lighthouse 10.3.0

The Lighthouse panel now runs Lighthouse 10.3.0. Most notably, this version adds four new audits that capture various accessibility issues with table headers and captions , input button names , and language mismatches . যেমন:

See also the full list of changes . To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed .

Chromium issue: 772558 .

Accessibility: Keyboard commands and improved screen reading

DevTools now supports more shortcuts and fixes issues with screen readers:

• You can now open the context menu with a keyboard shortcut, for example, Shift + F10 on Windows and many Linux distributions. For MacOS shortcuts, see Alternate pointer actions .
• Screen reader applications:
  • Won't unnecessarily announce checkbox labels twice.
  • Will announce column header names for sortable columns when you press the "Read column header" shortcut.

The DevTools team expresses gratitude to Yanling Wang and Elorm Coch for landing these improvements.

Chromium issues: 1446482 , 1414952 .

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

• The Network panel continues recording network activity even after you've interacted with the timeline ( 1422552 ).
• The Coverage panel now recognizes if there was prerender activation or back/forward cache navigation and prompts you to reload ( 1393057 ).
• You can now navigate the Sources > Breakpoints pane with the keyboard: Arrow up and Arrow down to move and Space to select ( 1446150 ).
• Fixed HAR files uploading and filtering in the Network panel ( 1450622 ).
• Flamechart in the Performance panel now puts small gaps between traces to render them better ( 1452150 ).
• Fixed automatic mapping for files embedded in source maps ( 1446383 ).

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

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

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

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

Sofia Emelianova

Improved debugging of missing stylesheets

DevTools gets a number of improvements to help you identify and debug issues with missing stylesheets faster:

• The Sources > Page tree now shows only the successfully deployed and loaded stylesheets to minimize confusion.
• The Sources > Editor now underlines and shows inline error tooltips next to failed @import , url() , and href statements.

• The Console , in addition to links to failed requests, now provides links to the exact line that references a stylesheet that failed to load.

• The Network panel consistently populates the Initiator column with links to the exact line that references a stylesheet that failed to load.

• The Issues panel lists all stylesheets loading issues, including broken URLs, failed requests, and misplaced @import statements.

Chromium issues: 1440626 , 1442198 , 1453611 .

Linear timing support in Elements > Styles > Easing Editor

দ Easing Editor in Elements > Styles lets you adjust transition-timing-function and animation-timing-function values with a click. In this version, the Easing Editor gets the linear timing function support.

To configure linear timings, click the linear picker button. To add a control point, click anywhere on the line. To remove a control point, double-click it. You can also choose one of the presets: linear , elastic , bounce , or emphasized . Watch the video to see the linear adjustment in action.

Chromium issue: 1421241 .

Storage buckets support and metadata view

The Application > Storage section gets storage buckets support. Storage buckets are independent from each other, so you can specify eviction prioritization for slices of data and make sure the most valuable data doesn't get deleted. Each storage bucket can store data associated with established storage APIs such as IndexedDB and CacheStorage .

Check out this fiddle to test the feature. Open DevTools, navigate to Application > Storage > Indexed DB , and run the code. DevTools now shows you the buckets and their contents. Select a bucket to view its metadata.

The unified metadata view is now also available for local, session, and cache storage sections.

Chromium issues: 1448011 , 1406017 .

Lighthouse 10.3.0

The Lighthouse panel now runs Lighthouse 10.3.0. Most notably, this version adds four new audits that capture various accessibility issues with table headers and captions , input button names , and language mismatches . যেমন:

See also the full list of changes . To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed .

Chromium issue: 772558 .

Accessibility: Keyboard commands and improved screen reading

DevTools now supports more shortcuts and fixes issues with screen readers:

• You can now open the context menu with a keyboard shortcut, for example, Shift + F10 on Windows and many Linux distributions. For MacOS shortcuts, see Alternate pointer actions .
• Screen reader applications:
  • Won't unnecessarily announce checkbox labels twice.
  • Will announce column header names for sortable columns when you press the "Read column header" shortcut.

The DevTools team expresses gratitude to Yanling Wang and Elorm Coch for landing these improvements.

Chromium issues: 1446482 , 1414952 .

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

• The Network panel continues recording network activity even after you've interacted with the timeline ( 1422552 ).
• The Coverage panel now recognizes if there was prerender activation or back/forward cache navigation and prompts you to reload ( 1393057 ).
• You can now navigate the Sources > Breakpoints pane with the keyboard: Arrow up and Arrow down to move and Space to select ( 1446150 ).
• Fixed HAR files uploading and filtering in the Network panel ( 1450622 ).
• Flamechart in the Performance panel now puts small gaps between traces to render them better ( 1452150 ).
• Fixed automatic mapping for files embedded in source maps ( 1446383 ).

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

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

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

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