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

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

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

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

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

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