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

Sofia Emelianova

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

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

• বিভ্রান্তি কমাতে Sources > Page tree এখন শুধুমাত্র সফলভাবে স্থাপন করা এবং লোড করা স্টাইলশিটগুলি দেখায়।
• Sources > Editor এখন ব্যর্থ @import , url() এবং href স্টেটমেন্টের পাশে ইনলাইন ত্রুটি টুলটিপগুলিকে আন্ডারলাইন করে এবং দেখায়।

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

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

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

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

এলিমেন্টস > স্টাইলস > ইজিং এডিটরে লিনিয়ার টাইমিং সাপোর্ট

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

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

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

স্টোরেজ বাকেট সাপোর্ট এবং মেটাডেটা ভিউ

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

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

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

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

বাতিঘর ১০.৩.০

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

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

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

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

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

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

এই উন্নতিগুলি আনার জন্য DevTools টিম ইয়ানলিং ওয়াং এবং এলর্ম কোচের প্রতি কৃতজ্ঞতা প্রকাশ করছে।

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

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

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

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

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

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

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

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

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

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

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